Use jquery cookie to keep CSS height

Question

I have a button which sets a CSS height which I need to keep the same even after page refreshes. Here is the code:

<script>
   function changeHeight(){
       $('#totalInfo').css('marginTop', '172px'); 
       $('.single #secondary-two #cart').css('maxHeight', '290px');
   }
</script>

<button onClick="changeHeight()">Change Height</button>

The problem is, I've never dealt with cookies before and have no idea how to set one and then read it when a page is loaded. Anyone able to help me out on how to use jquery cookies to ensure the CSS height stays the same even after refreshes?

Thanks

See: http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie and http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — Telmo Marques, Jun 19 '13 at 12:28
Those are for javascript and HTML5 methods, I need help on using the jquery cookies plugin. — user2028856, Jun 19 '13 at 12:29
The plugin must have some kind of documentation. For example: https://github.com/carhartl/jquery-cookie/blob/master/README.md — Telmo Marques, Jun 19 '13 at 12:31
Please don't take this the negative way, but I don't think you're making an effort to understand how to make it work... Don't rely on stackoverflow to "outsource" your code. Come to us when you already tried. **Really** tried. — Telmo Marques, Jun 19 '13 at 12:38

score 2 · Answer 1 · answered Jun 19 '13 at 12:30

2

Use jQuery.cookie plugin. Once you include it, you need to call it this way:

if (!$.cookie("height"))
    $.cookie("height", "297px");

And when you give a changeHeight() function, add this too:

function changeHeight(){
    $('#totalInfo').css('marginTop', '172px'); 
    $('.single #secondary-two #cart').css('maxHeight', '290px');
    $.cookie("height", "297px");
}

answered Jun 19 '13 at 12:30

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks for the answer Kumar, could you please explain what does the ! mean in the first part of the answer? Also do I include this before or after the changeHeight function? – user2028856 Jun 19 '13 at 12:33
If the cookie is not set, initially, set the cookie. :) ps: Call me Praveen. – Praveen Kumar Purushothaman Jun 19 '13 at 12:41
1

@user2028856 , `!` it's the logical not operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators). Basically, turns `false` into `true`, and `true` into `false`. Because `$.cookie()` returns false when the cookie is not set, using `!` will make the result `true` thus executing the `if` condition body. It's equivalent to `if ($.cookie("height") != false)`. – Telmo Marques Jun 19 '13 at 12:46
1

Thanks for the beautiful explanation @TelmoMarques! – Praveen Kumar Purushothaman Jun 19 '13 at 12:52

score 1 · Answer 2 · answered Jun 19 '13 at 12:32

1

To create a cookie use :

$.cookie('height', heightValue);

To read it, use :

var height = $.cookie('height');

And to delete it, use :

$.cookie('height', null);

answered Jun 19 '13 at 12:32

user2501130

11
1

Consider adding a reference to the plugin used in your example. – Telmo Marques Jun 19 '13 at 12:50

Kees Sonnema · Answer 3 · 2013-06-19T12:39:53.953

1

You can use the jquery_cookie()

$("#myid").on("click") {
function changeHeight(){
       $('#totalInfo').css('marginTop', '172px'); 
       $('.single #secondary-two #cart').css('maxHeight', '290px');
    $.cookie('the_cookie', 'the_value', { expires: 7 });
});

<button id="myid">Change height</button>

the_value means in this case:

you set the cookie like this:

$.cookie("foo", "somevalue");

Now you call the cookie like this:

alert($.cookie("foo"));

the output will be:

somevalue

edited Jun 19 '13 at 12:39

answered Jun 19 '13 at 12:34

Kees Sonnema

5,759
6
51
106

Where does `the_value` come from in this case? – user2028856 Jun 19 '13 at 12:36
See my simple example. about the value – Kees Sonnema Jun 19 '13 at 12:42

score 0 · Answer 4 · answered Jun 19 '13 at 12:30

0

If you're using standard JavaScript, the following article should help: http://www.w3schools.com/js/js_cookies.asp

If you're using jQuery, it's even easier, using this plugin: http://www.electrictoolbox.com/jquery-cookies/

answered Jun 19 '13 at 12:30

gamma

61
7

I do want to use it, but the problem is I have no idea how to use it in my case and how to read it back – user2028856 Jun 19 '13 at 12:31

Use jquery cookie to keep CSS height

4 Answers4