JQuery UI Tabs Causes Jump Screen

Question

I am using the latest tab . I have tabs located at the bottom of the page.

Every time I click a tab, the screen jumps up.

How can I prevent this?

See this example:

http://5bosses.com/examples/tabs/sample_tabs.html

Answer 1

If you activate transitions in a tab (i.e. .tabs({ fx: { opacity: 'toggle' } }); ), then this is what happens:

In most cases, the jump is not triggered by the browser using the "#" link. The page skips due to the fact that in the middle of the animation between the two tab areas, both tab panels are completely transparent and hidden (as shown on the display: none), so the effective height of the entire tab area becomes momentarily zero.

And if the zero-height tab causes the page to be shorter, then the page seems to bounce to compensate when in fact it just resizes to fit (for a moment) the shorter content. Has the meaning?

The best way to fix this is to set a fixed height for the tabbed section. If this is undesirable (because the contents of your tab vary in height), use instead:

 jQuery('#tabs').tabs({ fx: { opacity: 'toggle' }, select: function(event, ui) { jQuery(this).css('height', jQuery(this).height()); jQuery(this).css('overflow', 'hidden'); }, show: function(event, ui) { jQuery(this).css('height', 'auto'); jQuery(this).css('overflow', 'visible'); } }); 

It will set the calculated panel height before going to the tab. As soon as a new tab appears, the height will return to "auto". The overflow is set to "hidden" to prevent the penetration of content from the panel when switching from a short tab to a higher one.

This is what worked for me. Hope this helps.

Answer 2

If you have something like that:

 <a href="#" onclick="activateTab('tab1');">Tab 1</a> 

Try adding return false; after the tab activation command:

 <a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a> 

Answer 3

I was given a solution for this ...

How to stop viewing the screen when you click on the tab:

Wrap a div containing tabs in a fixed height div.

See an example here: http://5bosses.com/examples/tabs/sample_tabs.html

Answer 4

I assume you are animating your tabbed transitions? I have the same problem when a page scroll jumps up with each click.

I found this in jquery source:

  // Show a tab, animation prevents browser scrolling to fragment, 

Of course, if I have this:

 $('.tab_container > ul').tabs(); $('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } }); 

my code jumps up and annoys (but there is animation). If I changed this to the following:

 $('.tab_container > ul').tabs(); //$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } }); 

There is no tab animation, but switching between tabs is smooth.

I found a way to do this by scrolling backwards, but this is not a correct fix, as the browser still jumps at the top after clicking on the tab. Scrolling occurs between the tabsselect and tabsshow events, so the following code returns to your tab:

 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); }); 

I will do everything that I have done.

Answer 5

Mike’s solution demonstrated the principle significantly, but he has a big drawback - if the resulting page is short, the screen will still jump up! The only solution is to remember scrollTop and restore it after switching tabs. But before restoring, enlarge the page (html tag) accordingly:

(change - changed for the new jQuery API + small improvement for large pages)

 $(...).tabs({ beforeActivate: function(event, ui) { $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop }, activate: function(event, ui) { if (!$(this).data('scrollTop')) { // there was no scrolltop before jQuery('html').css('height', 'auto'); // reset back to auto... // this may not work on page where originally // the html tag was of a fixed height... return; } //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop()); if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved return; // nothing to be done // scrolltop moved - we need to fix it var min_height = $(this).data('scrollTop') + $(window).height(); // minimum height the document must have to have that scrollTop if ($('html').outerHeight() < min_height) { // just a test to be sure // but this test should be always true /* be sure to use $('html').height() instead of $(document).height() because the document height is always >= window height! Not what you want. And to handle potential html padding, be sure to use outerHeight instead! Now enlarge the html tag (unfortunatelly cannot set $(document).height()) - we want to set min_height as html outerHeight: */ $('html').height(min_height - ($('html').outerHeight() - $('html').height())); } $(window).scrollTop($(this).data('scrollTop')); // finally, set it back } }); 

Works with fx effect.

Answer 6

I had the same problem with the jquery ui menu - warning Default (on an anchor click event stops the page scrolling at the top of the page:

  $("ul.ui-menu li a").click(function(e) { e.preventDefault(); }); 

Answer 7

Try using event.preventDefault(); . In a click event that switches tabs. My function looks like this:

  $(function() { var $tabs = $('#measureTabs').tabs(); $(".btn-contiue").click(function (event) { event.preventDefault(); $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs ('option', 'active')+1 ); }); }); 

Answer 8

Thanks for your help. Good suggestion, but I tried before, no luck. I think the jQuery user interface can exceed my efforts.

Here is the code per tab:

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

I already tried this without success:

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

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

Any other suggestions?

Answer 9

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

Answer 10

 > 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 (the screen does not move constantly) ... but the screen is very shaky by clicking.

Here is a simple example showing how clicking on the tabs moves the screen up (without the code above): http://5bosses.com/examples/tabs/sample_tabs.html

Please note that animation is not used.

Answer 11

There is a much simpler way that I found from the comments on this page to simply remove href = "#" and it will no longer jump to the top! I checked and works for me. Greetings

Answer 12

I prefer to have href = "#" in my links that don't accept the user anywhere, but you can do this while you add onclick = "return false;". The key, I think, does not send the user to "#", which, depending on the browser, is by default considered the top of the current page.

Answer 13

I had the same problem, plus mine rotated on their own, so if you were at the bottom of the page, the browser window would scroll up. I had a fixed height for the tab container. The kind of strange thing still is that if you leave the window or tab and return, it will still scroll. But not the end of the world.

Answer 14

replace href = "#" with href = "javascript: void (0);" in element 'a'

works 100%

Answer 15

I had such a problem. My code is:

 $("#tabs").tabs({ hide: { effect: "fade", duration: "500" }, show: { effect: "fade", duration: "500" } }); 

I just deleted show and it worked like a charm!

  $("#tabs").tabs({ hide: { effect: "fade", duration: "500" } }); 

Answer 16

In my case, I found that the href=#example1 tab made the page go to id position. Adding a fixed height to the tabs didn't matter, so I added:

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

Answer 17

You tried:

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