CODEWITHSUNDEEP
jqueryjquery-cookie
Cole
Cole

Reputation: 459

How to use the jQuery Cookie Plugin to make jQuery remember the animations after page reload

I'm trying to make sidebar like on Facebook. Well, not entirely. I just want to remember the state of jQuery after reload or after going to a different page. I don't understand how to use the cookie plugin. Where do I put it on this script? And how is it written? I downloaded the plugin and it is inside the html file but I don't know how to execute it through jQuery.

$(document).ready(function(){
    $("#arrow").bind('click', function(){
        $('#wrappernav').fadeOut("fast");
        $('#sidebar').fadeOut("fast");
        $('#wrappernavbg').fadeOut("fast");
        $('#naviclosed').fadeIn("fast");
        $(window).unbind('resize');
     //I want jQuery to remember this state after refresh.

    });
    $('#naviclosed').bind('click', function () {
        $('#wrappernav').fadeIn("fast");
        $('#sidebar').fadeIn("fast");
        $('#wrappernavbg').fadeIn("fast");
        $('#naviclosed').fadeOut("fast");
        $(window).bind('resize', ScreenSize);
    });
});

Upvotes: 1

Views: 949

Answers (1)

Jirilmon
Jirilmon

Reputation: 1944

Made slight modifications to your code:

<script>
function clickArrow()
{
    $('#wrappernav').fadeOut("fast");
    $('#sidebar').fadeOut("fast");
    $('#wrappernavbg').fadeOut("fast");
    $('#naviclosed').fadeIn("fast");
    $(window).unbind('resize');
}

$(document).ready(function(){

    //Do the animations automatically IF the cookie value was SET.
    var arrowClicked = parseInt($.cookies.get('arrowClicked')); 
    if (arrowClicked > 0) {
        clickArrow(); 
    }

    $("#arrow").bind('click', function(){

     //Perform actions
     clickArrow();

     //I want jQuery to remember this state after refresh.
     $.cookies.set('arrowClicked', 1);
    });

    $('#naviclosed').bind('click', function () {
        $('#wrappernav').fadeIn("fast");
        $('#sidebar').fadeIn("fast");
        $('#wrappernavbg').fadeIn("fast");
        $('#naviclosed').fadeOut("fast");
        $(window).bind('resize', ScreenSize);
    });
});

Visit this link for more details of Cookie plugin: http://code.google.com/p/cookies/

Also please include jquery.cookie.js only after jquery.js

Upvotes: 1

Related Questions