Forums

Give help. Get help.

  • # January 16, 2012 at 10:19 am

    I have a checkbox and a

    
    

    . I would like if checkbox is checked, the

    
    

    will change and the data will be stored in cookies. I was "WARRGHH!!" with JQuery cookie and totally not understand. Can someone explain how to set cookies properly?
    Thank's for your help.

    Here's my explosive code. Be careful when touching: http://jsfiddle.net/tovic/z59DP/embedded/result/

    # January 16, 2012 at 1:21 pm

    Forget about cookies, use local storage :P

    # January 17, 2012 at 9:19 am

    Oh, I thought I remembered simpler examples and an example on how to check if localStorage exists. Try this (demo):

    $(function() {

    // check if localStorage exists, from Modernizr
    try {
    if (!localStorage.getItem) { return false; }
    } catch(e) {}

    if (localStorage["preew"]) {
    $('pre').addClass('light');
    $('input:checkbox').prop('checked', true);
    }

    $('input:checkbox').change(function() {
    if ($(this).is(':checked')) {
    localStorage["preew"] = true;
    $('pre').addClass('light');
    } else {
    localStorage["preew"] = false;
    $('pre').removeClass('light');
    }
    });

    });

    I didn’t want to confuse you, but the checkbox change function can be shortened into this:

    $('input:checkbox').change(function() {
    var chk = $(this).is(':checked');
    localStorage["preew"] = chk;
    $('pre')[ chk ? "addClass" : "removeClass" ]('light');
    });
    # May 23, 2012 at 7:22 am

    YEAHHH!!! xD

    $("input#togglePre").change(function() {
    if ($(this).is(':checked')) {
    $("body").addClass('prelight');
    createCookie("pre", "prelight", 1000);
    } else {
    $("body").removeClass('prelight');
    eraseCookie("pre", "prelight");
    }
    });

    if (readCookie("pre")) {
    $("body").addClass('prelight');
    $('input#togglePre').attr('checked', 'checked');
    }

    http://jsfiddle.net/tovic/z59DP/5/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag