What's wrong with this jQuery? It isn't working as intended

Posted by Doug Smith on Stack Overflow See other posts from Stack Overflow or by Doug Smith
Published on 2011-11-14T01:41:51Z Indexed on 2011/11/14 1:50 UTC
Read the original article Hit count: 223

Filed under:

Using cookies, I want it to remember the colour layout of the page. (So, if they set the gallery one color and the body background another color, it will save that on refresh. But it doesn't seem to be working.

jQuery:

$(document).ready(function() {

    if (verifier == 1) {
        $('body').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 2) {
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 3) {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    $('#set_cookie').click(function() {

        var color = $('#set_cookie').val();

        $.cookie('test_cookie', color);
    });

    $('#set_page').click(function() {
        $('body').css('background',  $.cookie('test_cookie'));
        var verifier = 1;
    });

    $('#set_gallery').click(function() {
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 2;
    });

    $('#set_both').click(function() {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 3;
    });
});

HTML:

            <p>Please select a background color for either the page's background, the gallery's background, or both.</p>

            <select id="set_cookie">
                <option value="#1d375a" selected="selected">Default</option>
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="brown">Brown</option>
                <option value="darkblue">Dark Blue</option>
                <option value="darkgreen">Dark Green</option>
                <option value="darkred">Dark Red</option>
                <option value="fuchsia">Fuchsia</option>
                <option value="green">Green</option>
                <option value="grey">Grey</option>
                <option value="#d3d3d3">Light Grey</option>
                <option value="#32cd32">Lime Green</option>
                <option value="#f8b040">Macaroni</option>
                <option value="#ff7300">Orange</option>
                <option value="pink">Pink</option>
                <option value="purple">Purple</option>
                <option value="red">Red</option>
                <option value="#0fcce0">Turquoise</option>
                <option value="white">White</option>
                <option value="yellow">Yellow</option>
            </select>

            <input type="button" id="set_page" value="Page's Background" /><input type="button" id="set_gallery" value="Gallery's Background" /><input type="button" id="set_both" value="Both" />


            </div>
        </div>
    </body>

</html>

Thanks so much for the help, I appreciate it. jsFiddle: http://jsfiddle.net/hL6Ye/

© Stack Overflow or respective owner

Related posts about jQuery