jCarousel with unknown content width

Question

I am trying to use jCarousel plugin for jQuery in order to provide my website users with scrollable (horizontal) content.

The content I am mentioning is basically user defined <li> elements, styled so that they have a feel and look of a tab. so basically I am trying to achieve the same effect of the tabs in pageflakes.com. As you may imagine, the users are creating tabs and providing tab names by themselves..

jCarousel needs you to specify a fixed width for the content e.g., all their examples are based upon images that have fixed height and width. but in my case I have not control over what the user will name his/her tab...making it impossible for me to guess the width of the total container div.

I have tried using a silly method such as guessing the width programatically assuming each letter being approx 5 pixels and multiplying 5 with the length of the word they have given as a name for a tab. even in this case, i needed to manipulate the css file dynamically which I am not sure how to do and even if it is feasable to do so..

Any solutions 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 produced programatically through ajax_tabs_output.aspx, loaded into a javascript array and the 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}
        });

Answer 1

The closest thing to what you want is probably jscrollhorizontalpane. I've never used it so I can't vouch for it's effectiveness as a solution to this specific problem.

This sort of widget shouldn't be to hard to make if you want to attempt it. I'll break down the approximate method I would use:

Make sure to use plenty of wrappers.

<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>

What we'll be doing is shifting the "space" element back and forth inside "window" element. This can be done by setting position:relative to "window" and position:absolute to "space" and then shift it about using left:-??px, but I'll use the scrollLeft property.

Add some 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 */
}

This is just the basic stuff that the technique needs. Some of this stuff could be applied by jQuery,

Add events to window resize.

$(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');

Add events to scroll buttons.

$('.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();
  });

Done!

The widths could also be calculated by looping through the "tab" elements and summing upp outerWidth. This is unnecessary if you have full control but might be a better choice for a full standalone plugin.