Skip to content

Instantly share code, notes, and snippets.

@henrik

henrik/jquery.ui.tabs.fix.js

Created September 10, 2009 14:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save henrik/184591 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save henrik/184591 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. henrik created this gist Sep 10, 2009.
    27 changes: 27 additions & 0 deletions jquery.ui.tabs.fix.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    // Make jQuery UI tabs pick the selected tab from the URL hash,
    // and set the selected tab id as the hash.
    //
    // By Henrik Nyh <http://henrik.nyh.se> 2009-09-10 under the MIT License.
    // Based on code by Mark Yoon: http://articles.rootsmith.ca/mod_python/how-to-make-jquery-ui-tabs-linkable-or-bookmarkable#comment-10188

    $('#foo').tabs();

    $('.tabs').each(function() {

    // Pick selected tab from hash
    var $tabset = $(this);
    var index = $tabset.find('.ui-tabs-panel').index($(location.hash));
    if (index != -1) {
    $tabset.tabs('select', index);
    $(document).scrollTop(0); // $tabset.offset().top
    }

    // Change hash when selecting
    // TODO: Scrolls down and immediately back.
    $tabset.bind('tabsshow', function(event, ui) {
    var oldScroll = $(document).scrollTop();
    location.hash = '#' + ui.panel.id;
    $(document).scrollTop(oldScroll); // Since changing hash changes scroll.
    });

    });