jQuery Cookie Help

Question

Hi there..

So I have never attempted to use a cookie and was wondering if someone could possibly help me with some functionality I am trying to achieve..

Essentially I have a jQuery function that is fired when a user visits a webpage. What I would like to do is make it to where that animation only plays once.. Possibly leveraging some cookie that would tell it not to play again for x amount of days.

I noticed that alot of people having questions about cookies and jQuery have been mentioned the following cookie plugin, but I dont even really know how to leverage it.

Any ideas?

Right now the animation is:

$('#header, #footer, #secondary-column').fadeTo(600, 1);

I would assume that if I could set a cookie to tell it the following:

$('#header, #footer, #secondary-column').fadeTo(0, 1);

Answer 1

This will create a cookie after the animation with the value '0' or whatever you need in your fadeTo() method.

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

var cookie = readCookie('someName');
if(cookie){
        $('#header, #footer, #secondary-column').fadeTo(parseInt(cookie), 1);
} else{
        $('#header, #footer, #secondary-column').fadeTo(600, 1);
        createCookie('someName','0','7');
}

Answer 2

Take a look at the cookies primer on Quirksmode. It contains three JavaScript functions that can be used for reading, writing and erasing cookies easily :)

Answer 3

You can try the jQuery Cookie Plugin

Checkout a couple demos