Jquery Scrolling/Paging Tabs

JQuery Scrolling/Paging Tabs

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>

JS tab - paging or tab slider ala Firefox

you are looking for the term "tab scrolling" ?

jQuery tab pagination questions

You're going to need to write a significant amount of additional code using JQuery to adapt the tabs to what you're looking for. This isn't exactly something someone can simply answer for you.

After you initialize/instantiate the jquery tabs, you'll need to then manipulate jquery's original work done in the .tabs() plugin.

I would write another plugin eg. .dynamicTabs() and incorporate the .tabs() plugin as the groundwork...

It's not a simple solution :)

How do i use animate() to slide (left-wards or right-wards) the jQuery tabs navigation menu?

What I would do is put your tabs in a container that has a greater width that it's container and then animate that container e.g.

<div id="topContainer" style="width: 800px; overflow: hidden;">
    <!-- calculate the width of #animateMe -->
    <div id="animateMe" style="width: 1250px; position: absolute;">
        ... <!-- your tabs here -->
    </div>
    ... <!-- tab content here -->
</div>

You may not be able to do it with the jQuery UI Tabs functionality.

Edit: After messing around a bit you should be able to get this working with the jQuery UI Tabs functionality.

How to speed up scrolling through large tables?

It seems to me that you try to find a technical solution for a wrong posed problem.

Let us analyse a little your problem. If you has a table having about 50,000 cells (5,000 rows and 100 cells) if wold the wrong way to show all the information to the user.

First of all no display are able to show the information at once. Placing of all the information of one HTML page and scrolling in browser not better as for example the paging with respect of paging buttons. Having small size of HTML page will improve the performance in many times from the user point of view.

One more important point is that the user can't perceive all the information from 50,000 cells. The user have to analyse the information. The usage of background colors in cells or rows can improve the user experience (look at here for example). The usage of some other controls like here or here can help to reduce the number of columns which you need to display and help user to analyse the information quickly.

Moreover you should gives the user the possibility to display subset of the information based on some filters and sort it in special order. See toolbar filtering here or an example of the searching dialog here. In the searching fields you can use jQuery UI Autocomplete or other controls which will help the user. You can additionally include some additional controls on the table which are specific for your problem and which help the user to set more problem specific filters.

So you should consider the ways of the data filtering which can be better for your case. It can be that the information which you need to display could be better represented as Tree, a grid with subgrids or use just two grids (master and another with details of the item selected in the master grid). Probably the grouping of data is what the user need. Look at the jqGrid demo page for example and consider more different possibilities of the user interface which you can use for your problem.

---

Related Topics