JQuery UI Tabs Causing Screen to “Jump”

by

If you’re animating your tab transitions (ie. .tabs({ fx: { opacity: 'toggle' } });), then here’s what’s happening:

In most cases, the jumping isn’t caused by the browser following the ‘#’ link. The page jumps because at the midpoint of the animation between the two tab panes, both tab panes are fully transparent and hidden (as in display: none), so the effective height of the whole tabbed section becomes momentarily zero.

And if a zero-height tabbed section causes the page to be shorter, then the page will appear to jump up to compensate, when in reality it’s simply resizing to fit the (momentarily) shorter content. Makes sense?

The best way to fix this is to set a fixed height for the tabbed section. If this is undesirable (because your tab content varies in height), then use this 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 computed height of the pane before the tab transition. Once the new tab has appeared, the height is set back to ‘auto’. Overflow is set to ‘hidden’ to prevent content from breaking out of the pane when going from a short tab to a taller one.

This is what worked for me. Hope this helps.

More Related Contents:

  1. jQuery UI Tabs – How to Get Currently Selected Tab Index
  2. How to change tabs programmatically in jquery-ui 1.9?
  3. How to add class to div based on radio button selected in it?
  4. jQuery UI DatePicker to show month year only
  5. Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?
  6. putting datepicker() on dynamically created elements – JQuery/JQueryUI
  7. How to disable text selection using jQuery?
  8. How do I pre-populate a jQuery Datepicker textbox with today’s date?
  9. Prevent jQuery UI dialog from setting focus to first textbox
  10. Is it possible to save HTML page as PDF using JavaScript or jquery?
  11. Javascript Array Concat not working. Why?
  12. Passing data to a jQuery UI Dialog
  13. How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker
  14. jQuery Drag/Resize with CSS Transform Scale
  15. Apply jQuery datepicker to multiple instances
  16. How do I drag multiple elements at once with JavaScript or jQuery?
  17. Is there a full working example for a jqGrid ColumnChooser? [closed]
  18. How to make Jquery UI Tabs scroll horizontally if there are too many tabs
  19. Vertical Tabs with JQuery?
  20. jQuery UI AutoComplete: Only allow selected valued from suggested list
  21. Change CSS properties on click
  22. How to get the date from jQuery UI datepicker
  23. Check if date is in the past Javascript
  24. Disable future dates after today in Jquery Ui Datepicker
  25. JQuery – animate moving DOM element to new parent?
  26. Autocomplete requires you to click twice in iOS after update to 1.11.0
  27. jQuery UI autocomplete with objects
  28. jQuery Datepicker “After Update” Event or equivalent
  29. Automatically resize jQuery UI dialog to the width of the content loaded by ajax
  30. jQuery UI DatePicker to show year only

Leave a Comment