97

jQuery-ui Scrollable tabs plugin

Share Button

Updates October 27, 2011

Since this plugin doesn’t work with newer versions of jQuery UI, I am not supporting this anymore. Instead I decided to work on a newer and improved version which is half done with most of the features but still need to be improved.

Also one of my friend mekwall (a jQuery guru) :) has written an extension for jQuery-UI tabs for the same purpose which he named Jizmoz Tabs.

Problem:

jQuery UI tabs is one of my favorite jquery plugin I use in most of my projects. It is so simple to use and it degrade gracefully. It has some very nice features and the events are really helpful.

However while I was working on a project where all the tabs contents are dynamic i.e user perform a search and than the results will be grouped up in tabs but the problem was that you never know how many tabs do you need as it can be just 1 or it can be 50+. The problem is that you should know the number of tabs so you can give a width to the wrapper so all tabs can fit in one row.

Unfortunately in my case I could not use it because I cannot give the wrapper a width of like 1000px for many tabs. If you give the wrapper a fixed width, the tabs will try to adjust it self in as many rows as it can to adjust all the tabs, something like this:

Add new tab

Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab number 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab no 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And this is the tab number 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab number 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And last tab number 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.

Googling:

I searched google to find what should I do to solve this problem. The perfect solution would be to arrange the tabs in a way all the browsers handles them specially Firefox. If there is one tab, don’t show the ‘Close tab’ button, if you have many than show two small arrows on the left and right of the tabs bar so that user can scroll through the tabs in either direction.

After spending a lot of time on googling the solution, I did not found any proper solution. Though I found two plugins which was some how what I was looking for:

  1. JSExt advanced tabs: Very simple interface and exactly what i was looking for but sadly it was not based on jQuery and I will never want to include a whole new JS library to solve this problem as I was already using jQuery, jQuery-ui and Openlayers in my project. So I drop the idea to use this plugin.
  2. jQuery tabs paging: When I found this plugin I felt happy as it is based on jQuery and jQuery-ui. The problem was that it uses window.resize event to adjust tabs in one row and also its not very flexible in terms of options and I don’t like to mess up with others code to achieve what I want. So unfortunately I dropped this idea too.

Solution:

Finally I gave up and decided to create my own plugin as while googling a lot of people were looking for the solution of this exact same problem. And here is what I came up with:

Add new tab

Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab number 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab no 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And this is the tab number 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab number 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And last tab number 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.

Documentation, demo and downloads:

I have created a separate page for this plugin where you can find the details of plugin and its options.
http://jquery.aamirafridi.com/jst

Note:

I will appreciate and credit if somebody can spend sometime on the overflow issue of tabs in IE6.


Share Button
  • Ashish Mehra

    Hello There,

    Your script is awesome!

    Although there is a slight issue I am having..

    I used your script using jquery and jquery ui and everything runs perfect. But my website is using JQuery Tools (http://flowplayer.org/tools/index.html) and this toolset is NOT compatible with jqueryUI.

    Is there a way that you can tell me how to use JQuery Scrollable Tabs with Jquery Tools instead of JQuery UI??

    Thanks
    Ashish

    PS:- I look forward to your reply on this

    • http://www.aamirafridi.com Aamir Afridi

      Hi Ashish,
      I have not tested this with flowplayer (jQuery Tools) yet.
      I am putting this in my todo list and will let you know once i test it.
      Thanks

  • http://blog.tauren.com Tauren

    Nice work you’ve done! However, would it be possible to add an option to only scroll the tabs when the left/right button are clicked, and not actually CHANGE tabs?

    The problem is that my tabs are loaded via ajax and quite heavy, so I don’t want users to have to sequentially load all of the tabs between the one they are on and the one they want to find. It would be better to just scroll and find the desired tab, then click it to change to it. I don’t think I can use it the way it works now.

    Otherwise, this plugin looks like is pretty close to meeting my requirements. I still like the way HootSuite does tabs best, but have yet to find a ui-tabs enhancement that does it that way. Someday when I have time I’ll build a plugin to do something similar.

    There’s a picture I posted in my StackOverflow question that illustrates how it works. I also just added a link to this page from the SO question:
    http://stackoverflow.com/questions/2475725/jquery-ui-tabs-customization-for-many-tabs

  • Shani

    Hello,
    This is a very useful tool. Just one question –
    If I add a function that will be called onTabClose , how can I know inside that function which tab is being closed?

    var $tabs_example = jQuery(‘#tabs’)
    .tabs()
    .scrollabletab({
    ‘closable':true, //Default false
    ‘animationSpeed':50, //, Default 100
    ‘onTabClose':function(event){

    alert(“Which tab is being closed?”);
    }
    });

    Thanks

  • Crisboot

    This is good job! I was looking around for this solution, let’s make those tabs shine thanks to you! :D

  • veer singh verma

    Hi all
    I have faced problem when i add new tab in ie8 . it was showing me blank tab text.
    I have found one solution for this problem.I have edit the jquery-ui-1.7.2.custom.css file . I have replaced the all “float:left” into “display:inline” .
    Now it is working on IE 8,IE7,IE6

    If any one want the script please mail me at veersinghverma@gmail.com.

    Thanks

    Thanks.

    • http://www.aamirafridi.com Aamir Afridi

      Thanks @Veer I will test and if it really works. I will try to make some changes in the plugin to set the display property so user don’t have to change the css core file :)

  • ercanf

    Hi, I am using jquery ui tabs in a vertical format. To do that, I tweaked the original jquery ui tabs css and my tabs works perfectly as vertical. The problem is, when I use your plugin, the left and right arrow icons messes up. Is there any way I can insert them to the bottom of the tab? How can I do that?

    Thanks!

  • http://prodevstudio.com Azizur Rahman

    Hay,

    Thanks for the wonderful plugin it just saved me hours of work.
    This kind of things should have been built into jQuery UI by default.

    You might want to re-think on the name, its not easy to find.

    Keep up the good work.

  • Markus Warg

    Always make sure you call .scrollabletab() after tabs() is fully initialized and configured.

    i.e.

    $(…).tabs().scrollabletab();
    $(…).tabs( {options} );

    does not work, even if it works perfectly without scrollabletab. Maybe I was just dumb even trying this ;)

    $(…).tabs( {…} );
    $(…).tabs().scrollabletab( {…} );

    or

    $(…).tabs( {…} ).scrollabletab( {…} );

    works well.

    I really like this plugin!

  • Luigi Navarra

    Hi i got the following problem

    i put my tab container like this:


    Temporary List
    list 2
    list 3

    content

    . . . . . . . . . .
    . . . . . . . . . .

    has width = 100%, i don’t get any problem rendering the default jquery tab but if i use your scrollable tab the

    that wraps my has a fixed width = 0px and obviously the tabs div is not correctly rendered to work around
    this problem i had to fix the width manually using jquery.css after the .scrollabletab() invocation.

    Furthermore to make the tabs sortable i had to inspect html and search for the custom container that you add
    to contains ‘LI':

    and make them sortable like this:
    $tabs.find(“.stWidthChecker”).sortable({axis: “x”})

    why not implement an option to make them sortable?

    Thanks a lot, nice piece of software

    • http://www.aamirafridi.com Aamir Afridi

      Hi Luigi,
      Thanks for the idea :)
      I have added that to my list for the future improved version, http://jsfiddle.net/aDvQM/

  • Shaun

    Hi Aamir,

    Just to let you know, we’ve recently upgraded our solution to JQ 1.5.1 and JQUI 1.8.10. Your plugin works fine but a change in JQUI 1.8.5 cause dynamic tabs (add / remove) to fail. If we revert the changes from this commit :

    https://github.com/jquery/jquery-ui/commit/03eea0e39dc15b5fc8c811461dd7c08b9e09f660

    … then the plugin works again without any problems; I haven’t investigated any further for now, let me know if you find anything.

    Thanks!

    • http://www.aamirafridi.com Aamir Afridi

      Hi,

      Thank you very much for your comments and helping me identifying this issue.

      I have not tested this plugin on the newer version of jQuery and jQuery UI. I am planning to work on it this weekend or next to test it with newer versions and also add requested features.

      Keep checking the demo page for updates.

  • Jared

    Hi,

    I really like the scrolling tabs you have here, but I noticed that it doesn’t look like it works very cleanly with nested tabs, where both tab sets are supposed to be scrollable. See: http://jsfiddle.net/Db8HV/.

    Also, in newer versions of jqueryUI, innerHeight can be used as a setter, so on line 75, where you’re setting the variable arrowsTopMargin, it had the effect in my script of setting the height of the nav bar to 1.

    Otherwise, thanks for the great plugin!

    • http://www.aamirafridi.com Aamir Afridi

      Hi jared,

      Thank you very much for your comments and helping me identifying this issue.

      I have not tested this plugin on the newer version of jQuery and jQuery UI. I am planning to work on it this weekend or next to test it with newer versions and also add requested features.

      Keep checking the demo page for updates.

  • Gustavo Moreno

    Hi! awesome job, congrats!!! I just have a comment about it, I found 2 issues (or 1), you can not scroll tabs between disabled tabs, I have 5 (or more) tabs an 1 (or more) are disable an after those there are active tabs, I look your code and add some code, (i ‘m sorry for that)
    1.- when u define the action for scroll to previous u have to do:
    1.1.- comment the validation if disable
    //if(!$(this).hasClass(‘ui-state-disabled’)) return;
    1.2.- obtain the previousIndex (u r doing right now)
    1.3.- add this code after to obtain de previousIndex while($tabsNav.find(‘li’).eq(prevIndex).hasClass(‘ui-state-disabled’)) prevIndex = prevIndex-1;
    2.- when u define the action for scroll to next u have to do:
    2.1.- obtain the nextIndex tab (u r doing right now)
    2.2.- add this code after to obtain de nextIndex while($tabsNav.find(‘li’).eq(nextIndex).hasClass(‘ui-state-disabled’)) nextIndex = nextIndex+1;

    With those lines u can do scroll over disabled tabs to next enable tab.

    I hope this can help for anybody and I’m sorry for modify a little your code.

    Greetings and excelent job!!!

    • http://www.aamirafridi.com Aamir Afridi

      Hi Moreno,

      Thank you for the fix. Can you please email me the fixed js file may be with an example so after testing it, I can move the fix to the plugin.

  • Herbert Strahlmann

    hello

    great plugin, thx amir. is it doable that when staying on the “next” button the scroll coninues? is it also possible to don’t open the next tabs by hitting “next” but only scroll the tabs titles to appear? would it be possible to try to center the active tab?
    with this feature it would than behave exactly like http://dev.sencha.com/deploy/ext-4.0-beta2/examples/tabs/tabs-adv.html . THANNS

  • Gianni

    Hi there — Can this be used WITHOUT jqueryui? so on a normal list set up as tabs?

    • http://www.aamirafridi.com Aamir Afridi

      Sorry, not sure what exactly you trying to say. But i would say that No, this plugin cannot be used without jQueryUI.

  • Edwin

    Awesome plugin! Did you get it working on 1.5.2 already?

  • ali.k

    hi Aamir, download example pack(jQuery-ui Scrollable tabs) It doesn’t work when I disconnect.
    the same problem with the CSS!

  • ali.k

    I want this plug-in for RTL languages, would you please tell me which parts should I change in JS file?
    Does this plug-in support RTL languages?

    • http://www.aamirafridi.com Aamir Afridi

      I am afraid the answer is No.

  • George

    Good working.
    Two things:
    1) Some easing effects like sliding are needed when clicking the navigation buttons (left and right) so it does not look dry like now.
    2) When clicking the right navigation (for example), Tab1 should dispear and Tab 2 then is selected and showing as the first tab in the row.

    Hope I am making sense. Please let me know if you need further details.

    Thanks and keep up the good work.

  • Luigi Navarra

    The assignment

    var arrowsTopMargin = (parseInt(parseInt($tabsNav.innerHeight(true)/2)-8))

    is not correct because the method .innerHeight(true) does not exist (it exists .innerHeight() instead) and the variabla
    arrowsTopMargin in ‘NaN’. This value causes an error in IE8 when it is assigned as css value for the next span

  • Guillaume

    Hi Aamir,
    Great plug-in thanks, that’s exactly what I was looking for. However, I encounter a problem when trying to close a tab: “jQuery UI Tabs: Mismatching fragment identifier”. Adding new tabs, switching between tabs works great but this one bugs, and everything after that do not work anymore!
    Precision: I am adding the divs manually, so they are not right after the tabs like in normal cases, not sure if that can cause a problem …

    • http://www.aamirafridi.com Aamir Afridi

      Hi Guillaume,
      A demo will be help as I am not sure exactly what could be the problem. You can extend this fiddle http://jsfiddle.net/aDvQM/

      • Guillaume

        Ok, I simply moved the div out of the one containing the tabs and the tab completely breaks: http://jsfiddle.net/aDvQM/11/
        However, the display is fine on my website (only one div is displayed and I can switch between tabs and one div remains displayed) but closing a tab breaks. My problem is that I do not want to be forced to put the div in the same one containing the tabs, but the plug-in does not allow to do this apparently…

  • RiptoR

    I really like the plugin (especially the 2.0 version), but there’s one small thing that I can’t seem to fix myself.

    The “normal” active tab has no border at the bottom, so it looks like it’s part of the content below it. After applying your solution, the active tab has a border at the bottom. The original tabs float above the border of the list (ul) and because of this it looks as if the active tab has no bottom-border.

    I’ve tried everything to replicate this when your plugin is active, but to no avail.

    Any idea if this is something that can be (easily) fixed?

  • Conrado

    Greetings Aamir Afridi!

    first I would like to thanks for a great job… just awesome idea and great to apply!

    but you see that the browse IE 9 has a problem with tabs?

    thanks !!

    • http://www.aamirafridi.com Aamir Afridi

      Hi Conrado,

      Sorry I did not get a chance to check it on IE9. If you get the fix than let know :P
      Sorry for that but don’t have enough time to work on it at the moment.

      • Conrado

        I do not really figured out what is causing it
        I think it’s a bug in IE 9, also I realized that with the “Dev Tool – F12″ if you change anything in the CSS it shows normal … the only thing I did then was add a jQuery below .scrollabletab function to give a show at CSS class tabs.

        jquery: $ (‘.tabs’).show();

        the end was:

        $(function () {
        var $abas = $(‘#abas’)
        .tabs()
        .scrollabletab({ ‘closable': false,
        ‘animationSpeed': 500,
        ‘loadLastTab': false,
        ‘resizable': false
        });
        $(‘.tabs’).show();
        });

        ask me if you have any question .. greetings from Brazil

  • Ferran Vilà

    Hello, this plugin solves me the life :) but i don’t know if someone had the same problem than I.

    When the tabs go out to the navigator, i don’t see the selected tab.

    I create a new option (‘focus’) in the plugin to make this happens. I paste the code below.

    Definition of the new option:

    var settings = {
    ‘animationSpeed’ : 100,

    ‘focus':false // Default move to selected tab
    };

    Code:

    if(o.focus){
    setTimeout(function(){
    $tabsNav.find(‘li.ui-tabs-selected a’).trigger(‘click’);
    },o.animationSpeed);
    }

    Thanks and i hope that you enjoy the new option!

  • Samir

    Hi Aamir, I am sure this not my first contact with you.
    I like what you doing because it adds a lot of value the the JQuery Dialog control.

    But there is one thing important, that when I scroll,
    I do not want to start activating the tabs that in the middle until I reach the tab that is hidden. In other words, when I scroll I need to start unhiding the tabs one by one without changing the current tab.

    Best describes what I mean is what you have on your Web site, http://dev.sencha.com/deploy/ext-4.0.0/examples/tabs/tabs-adv.html. I will send you another example later on.

    Thanks again.

    • http://www.aamirafridi.com Aamir Afridi

      Hi Samir,

      Please try: http://aamirafridi.com/jquery/jquery-scrollable-tabs#comment-331

      Or have a look at the updates on the top of this page (in 5mins)

    • Alex

      Hi Samir,

      Did you every find a solution to this problem?

      -Alex

    • http://www.aamirafridi.com Aamir Afridi

      Please check Jizmoz Tabs, you can check the udpates on the top of this page.

  • Kerry

    Hi Aamir,

    Your plugin is very good. In particular, I’ve been trying the third pullet point on your latest post. I have a question. I have the tabs running in a variable width div. When I reduce the width of my browser window the scrollable buttons do not appear. When I refresh the page they appear for the current size of my window. How can I refresh the tabs so that the scrollable tabs activate when I reduce my browser window size?

    Thanks,
    -Kerry

  • vivek

    Hi Aamir,

    Thank you for your code. Its awesome. It helps me a lot

    I have a question.

    I tried to use the nested tabs. Tab inside tab. I need scroll for both the tabs. But its not working. How can we fix this.

    Thank you once again.

    Vivek

    • http://www.aamirafridi.com Aamir Afridi

      Hi vivek,

      Can you please make a demo on jsfiddle so I can have a look?

      Aamir

  • Alex

    Hi Aamir,

    This plugin is great. I am currently trying to adjust your code so that it works for a vertical scrolling tabs but am struggling to implement this. Unlike previously stated by another user I am unable to get this to work by default and editing the tabs css.

    Is there any code you could share that would make this possible?

    Thanks,

    Alex

    • http://www.aamirafridi.com Aamir Afridi

      Hi Alex,

      Already replied to your email.

      The plugin use soon complex calculations to enable the scrolling feature. The plugin will not work for vertical tabs but I guess it shouldn’t be difficult. If I find time I will add this option as well.

      Aamir

  • sandhosh

    hi aamir,
    nice work . how to change theme to smooth… i tried it ,its changing the color not showing the close icon…. pl help me

    • http://www.aamirafridi.com Aamir Afridi

      You need to change the color icons in your themeroller theme.

  • sandhosh

    thanks aamir … its working pretty cool… thanks again…

  • Siva

    Hi Aamir,
    Can you do a favour , The Plugin working Perfect , But i no need cross mark on first tab eventhough many tabs has been opened … Let Me Update as Soon as …. This plugin saves Me if i did this…

    siva

  • Siva

    Hi Aamir,

    $(‘li:first .ui-icon-close’).hide()- Its Working fine …

    Thanks,
    Siva

  • ruba

    i tried scroll tab.but style not apllying…

  • Nikhil

    Hi Aamir,

    This a great plugin, and its just what i have been looking for. However, I have noticed that when we have the ability to close the tabs, the go to next tab button overlaps with the close tab button on the last tab, due to which the last tab cannot be closed.
    – Is there a way to adjust the position of the go the next tab button such that its not overlapped.?
    – or, is there a way to disable the go to next tab button when we are on the last tab ?

    Thanks,

    Nikhil

  • aravind

    Hi Aamir,

    Thank you so much for this plugin. And i have small doubt.

    How can i make ajax call in content part?

    Thanks,
    Aravind

  • parto

    Hae. Thanxs first of all for some good job.
    My question is can we use the keyboard keys to scroll the tabs – left key to select tab on the left of current and right key to select tab on right?

  • Padmanabhan

    Hi,
    I just found this plugin. Its very useful for me.
    I need one help.
    When I scroll the tab, i reload the page. After reload I want to stay with reloaded tab to show.
    I tried many ways. But its not helped so much..

    Any idea ?
    Thank you !

    Padmanabhan.

  • http://www.aamirafridi.com Aamir Afridi

    All of you above, can you please give me a link or create a demo on js fiddle so i can help faster?

  • Ramesh

    Hi aamir. Excellent tabber you provided.. Thanks for that.. And my Question is can i make auto scroll option to scroll instead of clicking each tab?? Could you pls help me??

    Thanks in Advance,
    Ramesh.

  • Pingback: types of camel cigarettes()

  • Kirk Olson

    The plugin does not work correctly with the new jQuery 1.8

  • Shiby

    Hi,

    When I use ‘addTab’ event of this plugin to add new tabs, it is not scrolling to the newly added tab. But when i add it using jquery ui tabs’ add method, its is scrolling to the new tab correctly. ie $tabs.trigger(‘addTab’, [label,content]); doesnt work as expected, but $tabs.tabs(‘add’,’#’+rnd,label); works fine.

    Also, can I use the scrollToTab event to scroll to a particular tab, which may or maynot be visible in the navigator. ? Or is there any other way in which I can achieve the feature?

    Thanks in advance for any suggestions.

  • alfonse

    Hi

    First thing : Many thanks for your plugin

    Just in case you would be interested, I had to extend it in order to generate a ‘scrolledToTab’ event after the tab element has been scrolled to. Why ? In my case I need to position some floating element according to the tab, so I need to know when the tab get its final position.
    To realize it I modified the scrollsettings in ‘scrollToTab’ bind and add following onAfter callback :
    var scrollSettings = { ‘axis':’x’, ‘margin':true, ‘offset': {‘left':offsetLeft}, ‘easing':o.easing||”,onAfter : function() {$tabToScrollTo.trigger(‘scrolledToTab’);} }

    Cheers

  • Stefan

    Great plugin, exactly what I was looking for, thanks Aamir!

    I’m experimenting with the plugin where I want to link directly to a specific tab, this works fine by adding ‘window.location.hash = ui.tab.hash;’ to the tabs function.

    The problem is that when I link to a tab which is not visible on default when opening the page that tab is not highlighted since it is located in the overflow hidden part of the tabs..

    Is there any way to link to specific tab and highlight it on the page as well.

    Eg. tab-1 to tab-4 are visible on default, but when I link directly to tab-8 the tab is not highlighted as you can only see tab-1 to tab-4. only when I click the next, the tabs scroll to tab-9 and that part of the tab slider becomes visible..

    Example here:
    http://jsfiddle.net/yunowork/2LMEd/3/show/#tabs-4 (tab is visible)
    http://jsfiddle.net/yunowork/2LMEd/3/show/#tabs-8 (tab is not visible, only when clicking next/prev or with the rotate which I included)

    Thanks

  • http://reservit.com ganov

    hi Aamir,

    i should first thanks you for this wonderfull plugin …
    then, i have a simple question for you and other followers :
    i’m looking for a way to call a js function when the plugin is loaded… as a callback … i saw there is a callback when you add a tab. but here is one when everything is loaded ?

    thanks…
    ganov
    jquery’loper

    • http://www.aamirafridi.com Aamir Afridi

      Hi Ganov,

      There is no callback method for that because you don’t beed one. Simply run your js after this line:

      var $tabs = $(‘#tabs’).tabs().scrollabletab();
      //$tabs is now the selector of the main container so you can you use it.

  • Riya

    Hi Aamir,
    How can I retain the contents of tab/ tab on page reload/refresh.
    I’m using ajax to fetch the data in tabs.

  • Riya

    I’m using datatables.js in the scrollable tabs.
    Googled alot, even jquery cookies js is not working. F1!!

    • http://www.aamirafridi.com Aamir Afridi

      Hi Riya,

      Not related to this plugin but as long as I understand your question, all you can do is, on tab’s click, save the tab id in a cookie. When you reload the page, loop through the tabs id and trigger click event or use jQuery UI tabs’s select method to open all those tabs one by one so ajax loads the content for those tabs. Try http://stackoverflow.com/questions/4299435/jquery-tabs-remember-which-tab-after-refresh

  • Ishan Jain

    Hello can we use scrollable tabs, if we not use jqueryui-tab for tabing( I am using my own tab).

    • http://www.aamirafridi.com Aamir Afridi

      Hi Ishan,
      This is a jQuery UI tabs extension so it works only with jQuery UI tabs. So no :)

  • Pallavi

    Hi Aamir,

    How would i destroy the scrollabletab. In one scenario i have to destroy it and re-create the tabs.

  • David

    The plugin does not work correctly with the new jQuery 1.9

  • David

    HI Aamir,

    I should first thanks you for this wonderfull plugin,The plugin does not work correctly with the new jQuery 1.10 and jQuery ui1.10,Can you help me?
    thanks in advance
    David

  • nnhue

    Hi Aamir Afridi,

    How do i goto tab by title, or index?

    Thanks.

    • http://www.aamirafridi.com Aamir Afridi

      Try:
      $(‘#tabs ul’).tabs(‘select’, index);

  • Juan Rivillas

    Does the library works with the latest versions of jquery?? It´s not working for me, the arrows of the scroll are not displaying

  • Phil

    When I use the tab destroy method it does not remove the markup added by scrollableTab(). Can this be added easily?

    Great extension by the way.

    Thanks!

    • http://www.aamirafridi.com Aamir Afridi

      Thanks Phil.

      try the plugin’s option ‘closable':true. Check the last example on http://jquery.aamirafridi.com/jst/

      You can check the plugin source code how its done.

  • senthil

    Hi Aamir Afridi,

    I should first thanks you for this wonderfull plugin,The plugin does not work correctly with the new south-street/jquery-ui-1.10.3.custom.css and jquery-ui-1.10.3.custom.js Can you help me?
    thanks in advance

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi Senthil,
      I am aware of this issue. You can try version 2. Check the updates at the top of this blog post.

  • http://vk.com/vintproykt vintproykt

    I’ve detected a bug! When I connect your script and calling “$(“#vpychat”).tabs().scrollabletab()” it throws error in Chrome:

    ===
    Uncaught TypeError: Cannot read property ‘safari’ of undefined
    ===

    Any solution?

    • http://vk.com/vintproykt vintproykt

      I’ve just solved this by adding new line in script:
      var browser_safari = /safari/.test(navigator.userAgent.toLowerCase());

      And I have replaced 2 occurences of “$.browser.safari” to “browser_safari”.

      ===

      Anyway script seems not working right. Tabs have been modificated with adding new closing icons (for example), but when I try to drag them it gonna drag whole tab menu! Not “li” but “ul”. It’s bad.

  • Shawn Rebelo

    May need to check how these work when the tabs are inside a dialog.

    Also, getting ‘Typerror: e is undefined’ when I load the script.

    Using the latest from links below

    • Shawn Rebelo

      I get that error without running it, just being attached to my HTML page.

  • Mikhail

    What if I don’t want to activate next/prev tab by arrows but only scroll left and right? I have heavy content which loads on tab click and this solution not works.

    • http://www.aamirafridi.com/ Aamir Afridi

      I understand what you mean. Unfortunately there is no way for doing this in this plugin.

      • Mikhail

        There is such modification of 1st version, but it works only with old tab plugin

Copyright © 2017 — musings of Aamir Afridi