JQuery Scrolling/Paging Tabs

Question

I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.

I have scoured the internet and can not seem to find anything other than: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!

Answer 1

Could you simply wrap the tabs in a DIV with overflow-x: auto set in the CSS?

Answer 2

I always use JQuery UI tabs as a starting point for tabs. You can customize the JQuery UI download in the download section of the website. This method should be lighter than any other implementation, if you are already using JQuery on your website.

Out of the box, the JQuery UI tabs will not give you the scrolling you desire. This I believe could be achieved by altering the CSS, but more than likely will be easier if you alter the navigation of your site (i.e. create more levels, use shorter titles).

Hope this helps

Answer 3

I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the div.

    $(document).ready(function()
    {
      $('.scrollButtons .left').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var pos = content.position().left + 250;
        if (pos >= 0)
        {
            pos = 0;
        }
        content.animate({ left: pos }, 1000);
      });
      $('.scrollButtons .right').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var width = content.children('ul').width();
        var pos = content.position().left - 250;
        //var width = content.width();
        if (pos <= (width * -1) + 670)
        {
            pos = (width * -1) + 600;
        }
        content.animate({ left: pos }, 1000);
      });
    });

My Html looked like this:

    <div class="tabs">
    <div class="scrollable">
        <div class="content">
            <ul>
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>                    
                </ul>
        </div>
    </div>
    <div class="scrollButtons">
        <ul>
            <li>
                <div class="left">
                </div>
            </li>
            <li>
                <div class="right">
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 4

hey climber104 could u post the final css and html for it .. search for this a lot... thanx in advance

Answer 5

I have just created a plugin myself: Project home: http://jquery.aamirafridi.com/jst