JQuery Scrollable Tabs snap to selected tab

Question

I have been using the code found here to make scrollable tabs http://jsfiddle.net/mekwall/dECtZ/. It works really well, but I have encountered a problem when trying to default the initial selected tab.

The tab falls outside of the displayed tab range (5 out of 13 tabs are displayed on load, and I have selected the 8th tab to be selected on load).

Please see an example of the issue here: http://jsfiddle.net/chriscdk/cf7yvLfz/

I am hoping there is something I can use in the plugin,

$(function() {
    $("#tabs1").tabs({
        scrollable: true,
        changeOnScroll: false,
        selected:8
    });
});

but I have not been able to find anything looking at the JQuery API.

Answer 1

Looking at the constructor of that widget extension, it provides a scrollTo function. Unfortunately, that function's not exposed to the user; so you can add a line exposing it:

this.scrollTo = scrollTo;

Then, you can invoke it in the usual manner:

var scrollValue = 200, delay = 0;
// you probably want to calculate a scrollValue from the default tabs'
// width and selection number instead of hardcoding a value
$("#tabs").tabs("scrollTo", scrollValue, delay);

It's worth considering that this function is intentionally not exposed. The original author probably didn't intend for people to do nasty hacks like the one just described. The proper way to do this would be to write your own (possibly based on the original?) scrolling function, and extend the widget with it.

However, if you're not too concerned with future maintenance, you can use this two-line hack and watch closely and carefully any future changes.

Here's your fiddle update: http://jsfiddle.net/xfhzyece/