Skip to content

Instantly share code, notes, and snippets.

@gavinblair
Created June 3, 2011 15:37
Show Gist options
  • Save gavinblair/1006545 to your computer and use it in GitHub Desktop.
Save gavinblair/1006545 to your computer and use it in GitHub Desktop.
Make back/forward buttons work on jQuery UI tabs.
//change the # in the url when switching tabs
//makes refresh work!
$("#tabsMenu li a").click(function(){
window.location.hash = $(this).attr("href");
});
//make back/forward buttons work on tabs
if($("#tabsMenu").length > 0) {
//prevent scrolling when clicking on a tab
var doit = true;
$("#tabsMenu a").click(function(){
doit = false;
});
$(window).bind('popstate', function() {
//must be asynchronous, because usually popstate happens before the a click event.
setTimeout(function(){
if(doit) {
//only happens if back/forward buttons are used
if(window.location.hash.length > 0) {
$("a[href="+window.location.hash+"]").click();
} else {
$("#tabsMenu li:first a").click();
}
}
doit = true;
}, 0);
});
}
@SeanJA
Copy link

SeanJA commented Jun 4, 2011

That is what the github blog said... or are you doing something different than them?

Wait... never mind, this is something else... I think there is a jQuery plugin that might work with IE

@SeanJA
Copy link

SeanJA commented Jun 4, 2011

Found one that says it works (and it is on github http://balupton.com/projects/jquery-ajaxy )

@SeanJA
Copy link

SeanJA commented Jun 4, 2011

You don't need to watch for the popstate command I don't think, you just do a looping check of the hash to see if it has changed and then change the page contents accordingly

@gavinblair
Copy link
Author

I was adding back/forward functionality to a site that already had UI tabs. A looping check for the hash would be slower, but you're right, it would work in all browsers.

@star-szr
Copy link

star-szr commented Jun 7, 2011

@gavinblair
Copy link
Author

cool, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment