Question

I am trying to create a user interface, but when I refresh the page, it’s removing the class current from navigation link.

I am following this tutorial http://www.ssdtutorials.com/tutorials/series/list-grid-view-jquery-cookies.html

Below is my code:

$(function() {
    var cc = $.cookie('list_grid');
    if (cc == 'g') {
        $('#products').addClass('grid');
    } else {
        $('#products').removeClass('grid');
    }
});

$(document).ready(function() {

    $('#grid').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#products').fadeOut(500, function() {
            $(this).addClass('grid').fadeIn(500);
            $.cookie('list_grid', 'g');
        });
        return false;
    });

    $('#list').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#products').fadeOut(500, function() {
            $(this).removeClass('grid').fadeIn(500);
            $.cookie('list_grid', null);
        });
        return false;
    });

});

In case anyone need this is the HTML code

<div id="wrapper">

        <div id="navigation">
            <a href="#" id="list">List view</a>
            <a href="#" id="grid">Grid view</a>
        </div>

        <div id="products">

            <?php for($i = 1; $i <= 4; $i++) { ?>

                <div class="product">

                    <div class="wrapper">

                        <div class="image">
                            <img src="images/0<?php echo $i; ?>.jpg" alt="image <?php echo $i; ?>" width="160" height="160" />
                        </div>

                        <div class="description">

                            <h1><a href="#">Article title</a></h1>

                            <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

                        </div><!-- end description -->

                    </div><!-- end wrapper -->

                </div><!-- end product -->

            <?php } ?>

        </div><!-- end products -->

    </div><!-- end wrapper -->

Answer 1

When you refresh the page, it will be reloaded in its original state. It doesn’t remember which item had the current class. You need to use something like the cookie you’re already employing if you want the page to be able to remember which element had which class added to it dynamically.

Something like this:

$(function() {
    var cc = $.cookie('list_grid');
    if (cc == 'g') {
        $('#products').addClass('grid');
        $('#grid').addClass('current');            
    } else {
        $('#products').removeClass('grid');
        $('#list').addClass('current');
    }
});

BTW, $(function() { ... } is a short-hand way of writing $(document).ready(function() { ... }, so you can actually combine your two functions above.