Geek Answers Handbook

JCarousel with unknown content width

I am trying to use the jCarousel plugin for jQuery to provide scrollable (horizontal) content to my site users.

The content that I mention is mostly user-defined elements <li>, styled to give them the feel and look of a tab. so basically I'm trying to achieve the same tab effect on flakes.com. As you can imagine, users create tabs and provide tab names themselves.

jCarousel requires you to specify a fixed width for the content, for example, all of their examples are based on images with a fixed height and width. but in my case, I do not control how the user calls his tab ... which makes it impossible to guess the width of the full div container.

I tried using a stupid method, for example, guessing the width programmatically, assuming each letter is about 5 pixels and multiplies 5 by the length of the word that they gave as the name for the tab. even so, I needed to manage the css file dynamically, and I'm not sure how to do it, and even if it is possible.

Any decisions were appreciated ...

<lu>
<li class='MyTab' id='578'>This is my tab</li>
<li class='MyTab' id='579'>of which I can</li>
<li class='MyTab' id='580'>never guess</li>
<li class='MyTab' id='581'><img src='img/bullet_key.png' /> The length of</li>
</lu>

The above html is created programmatically via ajax_tabs_output.aspx, loaded into the javascript array, and jCarousel takes care of the rest.

     function outputTabsArray() {
        $.ajax({
            url: 'ajax_tabs_output.aspx', 
            type: 'get', 
            data: 'q=array', 
            async: false, 
            success: function(out) 
                {
                    tabs_array = out;
                } 
            });
            }// end outputTabsArray

        function mycarousel_itemLoadCallback(carousel, state)
        {
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (carousel.has(i)) {
                    continue;
                }

                if (i > tabs_array.length) {
                    break;
                }

                carousel.add(i, mycarousel_getItemHTML(tabs_array[i-1]));
            }
        };

        /**
         * Item html creation helper.
         */
        function mycarousel_getItemHTML(item)
        {
            return '<div class="MyTab" id="' + item.tab_id + "'>" + item.tab_name + '</div>';
        };


            $('#mycarousel').jcarousel({
                size: tabs_array.length,
                itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
        });
+3
4

, , , jscrollhorizontalpane. , .

, . , :

.

<div class="scrollable">
  <div class="window">
    <div class="space">
      <ul class="tabs">
        <li class="tab">...</li>
        <li class="tab">...</li>
        <li class="tab">...</li>
      </ul>
    </div>
  </div>
  <a href="#" class="left">&larr;</a>
  <a href="#" class="right">&rarr;</a>
</div>

, "space" "window". , position:relative "window" position:absolute "space", left:-??px, scrollLeft.

CSS.

.window {
  overflow : hidden;
  width : 100%;
}
.space {
  width : 999em;      /* lots of space for tabs */
  overflow : hidden;  /* clear floats */
}
.tabs {
  float : left;       /* shrink so we can determine tabs width */
}
.tab {
  float : left;       /* line tabs up */
}

, . jQuery,

.

$(window)
  .resize(function () {
    var sz = $('.window');
    var ul = sz.find('ul');
    if ( sz.width() < ul.width() ) {
      $('.scrollable a.left, .scrollable a.right').show();
    }
    else {
      $('.scrollable a.left, .scrollable a.right').hide();
    }
  })
  .trigger('resize');

.

$('.scrollable a.left').hover(
  function (e) {
    var sz = $('.window');
    sz.animate({ scrollLeft : 0 }, 1000, 'linear');
  },
  function (e) {
    $('.window').stop();
  });

$('.scrollable a.right').hover(
  function (e) {
    var sz = $('.window');
    var margin = sz.find('ul').width() - sz.width();
    sz.animate({ scrollLeft : margin }, 1000, 'linear');
  },
  function (e) {
    $('.window').stop();
  });

!

"tab" upp outerWidth. , , .

+5

, , JCarousel , . , - JCarousel, , , .

, . . JQuery UI , .

, , , , CSS, :

http://unraveled.com/projects/css_tabs/

0

Soviut,

! JCarousel , .

, tab stuf, . , , , , .. ..

, div . , , www.pageflakes.com

, ( , ), , , div, , div, , , .

, , / . , , , , .

,

0

What you are looking for is not tabs, but draggable panels. One example can be found here called JQuery Portlets . A related Portlet blog post can be found here .

You can also see jQuery UI Drag-and-Drop, Droppable, and Sortable Plugins.

0
source

More articles:


All Articles