2

I'm changing the background of some Links using JavaScript:

$(document).ready(function(){ 
     $("#home").click( function(){ 
        $("body").removeClass("bg2 bg3").addClass("bg1");
});

     $("#link1").click( function(){ 
        $("body").removeClass("bg1 bg3").addClass("bg2");
});

     $("#link2").click( function(){ 
        $("body").removeClass("bg1 bg2").addClass("bg3");
}); 
});

Bg1,2,3 are css classes of background (bg images). I prevent refresh button (to save BG) with hash:

   var x = location.hash;
      if (x==="#link1")
      {
         $ ("body").removeClass("bg1 bg3").addClass("bg2");
      }
      else if (x==="#link2")
      {
         $ ("body").removeClass("bg1 bg2").addClass("bg3");
      }
      });

It work but if i click on back button it doesn't change the background to previous link background. Is it possible to fix it except web storage/session storage? With hash or somethink like this?

Claudio Santos
  • 1,307
  • 13
  • 22
Fakt7
  • 187
  • 4
  • 15

1 Answers1

1

When you hit the back button of your browser, the page will not reload because you are using the hash, this means to the browser that you want to move to a different anchor.

To proper manipulate the history stack you need to use the freaking awesome History API

To fix your problem you need to intercept the event triggered when your history stack change. 

<html>
<head>
    <script type="text/javascript"  src="../lib/jquery.1.9.2.js"></script>
</head>
<body onload="checkHash();">
    testing hash stuff
    <a href="#white">click to change</a>
    <script type="text/javascript">
        console.log('loaded');
        var checkHash = function(){
            if(location.hash==="#black"){
                $('body').css("background-color","black");
            }else if(location.hash==="#white"){
                $('body').css("background-color","white");
            }
        }
            //the event below will be trigger when you hit backbutton or the link
        window.addEventListener("popstate", function(e) {
            console.log('trigger when hit the back button')
            checkHash();
        });

    </script>
</body>
</html>

IE9 FIX

If you need to implement the same behavior on IE9 you must listen the onhashchange, so you can trigger the code to change the background when backbutton was clicked.

<body onhashchange="alert('trigger the background change function')">
Claudio Santos
  • 1,307
  • 13
  • 22
  • it is not working in IE 9 and less. And i do not understand why link1- link3 does not show content. I upload it here http://skusobnastranka1.php5.sk/ . And css file here: https://www.dropbox.com/s/n36i4ikul11vi1d/main1.css – Fakt7 Apr 05 '14 at 16:31
  • as you can see [here](http://stackoverflow.com/questions/3722815/does-internet-explorer-support-pushstate-and-replacestate) and [here](http://caniuse.com/#search=pushstate) IE9 does not support. – Claudio Santos Apr 05 '14 at 21:42