CODEWITHSUNDEEP
javascripthtmlcss
David Melkuev
David Melkuev

Reputation: 126

Remember div hover state after page refresh

I have a navigation bar that grows in width when it is hovered over.

Here's an example:

http://jsfiddle.net/Gsj27/822/

Now, if for example I have a home button in the area that the hover effect applies to, when it is clicked and the home page is loaded the result is as follows:

The page is loaded with the navigation area in default size (small width), and after an instance it increases in width, as per the hover effect, when the hover effect "kicks in".

The Question

How to make the page load with the hover effect keeping its state right before a hyperlink is clicked? So in my example, if the home button is clicked then load home page with the hover effect already active (since home button is on navbar area so hover effect will necessarily be on). But if a hyperlink elsewhere (e.g. gray area in my example) is clicked then load page with hover effect off.

I think this can be achieved using js toggleClass? Something like 

        $(document).ready(function(){
            if(/* hover effect was on */) {
                $('nav').toggleClass('hovered');
            }
        })

Upvotes: 1

Views: 1203

Answers (1)

Fancyoung
Fancyoung

Reputation: 2423

You can save status in url: 

<a href="?active=true">

if(window.location.href.indexOf('active=true') > 0) {
  $('.nav').addClass('hovered');
}

Code: http://jsfiddle.net/Gsj27/824/
Demo: http://fiddle.jshell.net/Gsj27/824/show/

You can also use hash(#) to save status.

Upvotes: 1

Related Questions