jquery cookie set css to display: none

Question

I'm using the jquery cookie plugin and I'm trying to have the browser remember the state of a CSS after a refresh, here's my code when a button is clicked:

    $('#cartHolder').attr('style','display: none !important');
    $.cookie("cartDisplay", 'none !important');

Then in my header I have:

   if ($.cookie("cartDisplay")){
       $('#cartHolder').attr('style', $.cookie("cartDisplay"));
   }

The problem is, after each refresh the displayproperty is still reset back to it's default property. However in the console window I see that jquery cookie has successfully stored the necessary value, it's just not being written into the DOM after each refresh.

Any one able to help me out?

Thanks

Your cookie value only contains none !important, you need to add display: — Clive
– Clive, Commented Jul 7, 2013 at 10:39

Khanh TO · Accepted Answer · 2013-07-07 11:11:29Z

3

Should not use attr('style') as it will override all your styles. Use .css instead. An also try avoiding !important. Try

$('#cartHolder').css('display','none');
$.cookie("cartDisplay", 'none');

In your header.

$(document).ready(function(){
    if ($.cookie("cartDisplay")){
           $('#cartHolder').css('display', $.cookie("cartDisplay"));
       }
});

Or you could use .toggle

$('#cartHolder').hide();
$.cookie("cartDisplay", 'false');

In your header.

$(document).ready(function(){
    if ($.cookie("cartDisplay")){
           $('#cartHolder').toggle($.cookie("cartDisplay"));
       }
});

Remember to wrap the code inside $(document).ready(function(){ to ensure the DOM elements have been loaded

edited Jul 7, 2013 at 11:11

answered Jul 7, 2013 at 11:04

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sina R. Over a year ago

correct but its duplicate I think and could be a comment under an answer.

Sina R. Over a year ago

OK nice +1 to your description. please check mine too.

user2028856 Over a year ago

@KhanhTO yep that's it, sorry for this elementary mistake. Forgot to include document.ready :D cheers

Homam · Accepted Answer · 2013-07-07 10:53:39Z

3

The String You get back from your cookie is this:

none !important

and the thing you give to your element is this:

 <div style="none !important"></div>

make it complete in your coockie, like:

display:none !important

EDIT
its better to use it like this:

 $('#cartHolder').css('display', $.cookie("cartDisplay"))

and there is no need to change the cookie code of yours.(it should work)

edited Jul 7, 2013 at 10:53

answered Jul 7, 2013 at 10:42

Homam

7062 gold badges9 silver badges20 bronze badges

2 Comments

user2028856 Over a year ago

I've tried your suggestion and it still returns undefined in the final CSS in the DOM

Homam Over a year ago

sorry i didnot get it do you need description? and plus thanks for your +1

Collectives™ on Stack Overflow

jquery cookie set css to display: none

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related