Ok. Never mind. I've answered my own question lol. Instead of using this code:
//On history back, display the last hash id url, fadeIn overlay and hide body scroller
if (("onhashchange" in window) && !($.browser.msie)) {
window.onhashchange = function () {
$(".overlay1").fadeIn(500);
$('body')
.css('overflow', 'hidden');
}
}
//If a hash id is present in url, when refresh or bookmark link, allow the Overlay to fadeIn and hide body scroller
if(window.location.hash) {
$(".overlay1").fadeIn(500);
$('body')
.css('overflow', 'hidden');
}
I used the jQuery history plugin found here: http://tkyk.github.io/jquery-history-plugin Although it's discontinued, it still works, and is a great piece of code.
This is my new code to make the plugin work:
jQuery(document).ready(function($){
//If no hash, start the page as normal. You would think you wouldn't need this, but you do.
$.history.init(function(hash){
if(hash == "") {
//If hash = Hidden_Alphabet, then fadeIn .overlay1 and hide the body scroll.
} else if (hash == "Hidden_Alphabet") {
$(".overlay1").fadeIn(500);
$('body').css('overflow', 'hidden');
}
//If hash = Type_as_Image, then fadeIn .overlay2 and hide the body scroll.
else { window.location.hash == "Type_as_Image";
$(".overlay2").fadeIn(500);
$('body').css('overflow', 'hidden');
}
},
//This for some reason is also needed, and breaks the code if it's not there.
{ unescape: ",/" });
});
This code, will make the overlays fadeIn when the back button is clicked, and also with a direct bookmark link too. At the moment, it's working with only 2 overlays. I don't know about more than that though.
Update:
To allow more than 2 overlays, instead of using else if()
and else
, you need to use if()
. This will make multiple overlays work, not matter how many there are.