Div overlays fadeIn on history back and bookmarkable with a hash url

Question

I've created a portfolio page with all my projects on. These projects are just images with on hover descriptions and buttons. I'm intending to fadeIn a whole page overlay on click of one of these buttons, with a unique id to identify which button is pressed so the overlay JavaScript knows which overlay to fadeIn for the specific project. I have already done the first 2 project overlays.

When a specific overlay fades in, I add the unique id to the url, something like this: test.com/projects#Unique_Id. When I close the overlay, I remove the id from the url. I've found some JavaScript so that when I click the browser history back button, the hash url is re added, and the overlay fades in again. I've also used a script to make the hash url be able to be a bookmark/direct link. So if the page reloads, or the hash url is accessed directly then the overlay will fade in. All this works up to press.

But I'm struggling to do the history back fadeIn and bookmark fadeIn with multiple overlays without anything interfering.

Here's the page I'm working on: http://www.stuartnorman.co.nf/projects as I say only the first 2 project images have overlays.

The first overlay works fine with the back and bookmark too. But when I try the 2nd overlay, both clicking back and bookmark direct link will fadeIn the 1st overlay and not the 2nd. I know why this is, but I can't get a work around for it.

I've tried searching for this problem but I can't find it. I've also tried several work arounds, but they don't work. I've also tried using several history plugins but they don't work for my needs.

So, please could someone provide me with some code that will let me have multiple unique overlays fadeIn on history back and bookmark direct link assigning the correct overlays to the unique hash id URL. Thanks.

Here's my JavaScript for the overlays and the hash id stuff:

//Overlay1 fadeIn on click with url hash id
$("#overlay1").click(function(event) {
    event.preventDefault();
    window.location.hash = this.hash;
    $(".overlay1").fadeIn(500);
    return false;
});
//Doesn't allow invisible clicks through to the parent div (stops overlay fadeOut with invisible clicking)
$('.innerContainer').click(function(e) {
  e.stopImmediatePropagation();
});
//Overlays fadeOut on click of the overlay div or the close button and completely removes the hash id from url
$(".close, .overlay1, .overlay2").click(function(event) {
    event.preventDefault();
    var isMSIE = /*@cc_on!@*/0;

if (isMSIE) { // IE-specific
  window.location.hash = ''; // for older browsers, leaves a # behind
} else { // non-IE
  history.pushState('', document.title, window.location.pathname); // deletes the #
}
    event.preventDefault();
    $(".overlay1, .overlay2").fadeOut(500);
});
//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');
}
//Hides body scroller on click of overlay buttons
$(function() {
    $('#overlay1, #overlay2').click(function() {
        $('body')
            .css('overflow', 'hidden');
    });
//Shows body scroller on click of overlay close button or the body.
    $('body, .close').click(function() {
        $('body')
            .css('overflow', 'visible');
    });
});
//Overlay1 fadeIn on click with url hash id
$("#overlay2").click(function(event) {
    event.preventDefault();
    window.location.hash = this.hash;
    $(".overlay2").fadeIn(500);
    return false;
});

Studocwho · Accepted Answer · 2013-09-28T11:24:26.560

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.

Div overlays fadeIn on history back and bookmarkable with a hash url

1 Answers1