Search code examples
jqueryjquery-cookie

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);
    });
});

Solution

  • 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