JQuery UI Tabs Causing Screen to “Jump”

Question

I\'m using the latest version of the jQuery UI tabs. I have tabs positioned toward the bottom of the page.

Every time I click a tab, the screen jumps toward the top

Answer 1

Try just adding a min-height using css to each of the tab content areas ( not the tabs themselves ). That fixed it for me. :)

Answer 2

> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
>     scroll_to_x = window.pageXOffset;
>     scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
>     window.scroll(scroll_to_x, scroll_to_y); });

Thanks for your help! Please let me know what else you find.

The above function works (screen doesn't move permanently)... but, the screen is very wobbly on click.

Here is a simple example showing how clicking a tabs causes the screen to jump toward the top (without the above code): http://5bosses.com/examples/tabs/sample_tabs.html

Note that there's no animation being used.

Answer 3

Thanks for your help. Good suggestion, but I tried before with no luck. I think JQuery UI may be overriding my efforts.

Here is the code per tab:

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

I already tried this with no success:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

Here is a simple example (without return false): http://5bosses.com/examples/tabs/sample_tabs.html

Any other suggestions?

Answer 4

I found in my case the tab href=#example1 was causing the page to jump to the position of the id. Adding a fixed height to the tabs made no difference so I just added:

$('.nav-tabs li a').click( function(e) { e.preventDefault(); });

Answer 5

Did you tryed:

fx: {opacity:'toggle', duration:100}

Answer 6

I had the same problem, plus mine were rotating on their own so if you were at the bottom of the page, the browser window would be scrolled up tot he top. Having a fixed height for the tab container worked for me. Kind of a weird thing still is that if you leave the window or tab and go back, it will still scroll. Not the end of the world, though.