Grow your CSS skills. Land your dream job.

Set/Delete Cookie with Checkbox??

  • # 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 16, 2012 at 10:38 pm

    What was Mr. Dive Into HTML5 saying? And how do I implement this handsome code on my problem?

    function saveGameState() {
    if (!supportsLocalStorage()) { return false; }
    localStorage["halma.game.in.progress"] = gGameInProgress;
    for (var i = 0; i < kNumPieces; i++) {
    localStorage["halma.piece." + i + ".row"] = gPieces.row;
    localStorage["halma.piece." + i + ".column"] = gPieces
    .column;
    }
    localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
    localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
    localStorage["halma.movecount"] = gMoveCount;
    return true;
    }

    And I think there is a shorter code that match with my sKILL level. This works for elements, and I’ve successfully to do it, But with checkbox, it failed miserably!

    http://stackoverflow.com/questions/804584/how-to-remove-existing-class-name-and-add-a-new-one-with-jquery-and-cookies/804593#804593

    # 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');
    });
    # January 17, 2012 at 10:19 am

    Don’t worry, I have a lot of time to learn. Thank’s Mr. Rob Garrison :)

    Umm.. but why when I apply this code on my blog after that I’ve got a big conflict? Cookies on the

    
    

    color is succeeded, but at the same time, all the animation effects on my blog stopped.

    Huh.. I think I've applied the cookie at the wrong template :p

    # January 19, 2012 at 12:03 am

    No problem. I think it’s hard for now. And again, when cookies are stored, even if I uncheck the checkbox, cookies are still not removed.

    This may not be able to delete cookies with just uncheck the checkbox on the website page. Except, if we push it with another cookies.
    consider this:

    With Button

    Pink Button: Hi, Mr. Browsers. I’ve clicked my self. Would you receive my cookies?
    Browser: Of course, why not.
    Red Button: Hi, Mr. Browsers. I’ve clicked my self. Would you receive my cookies?
    Browser: Of course, why not.
    Violet Button: Hi, Mr. Browsers. I’ve clicked my self. Would you receive my cookies?
    Browser: Of course, why not.

    With Checkbox

    Checkbox: Hi, Mr. Browsers. I’ve checked myself. Would you receive my cookies?
    Browser: Of course, why not.
    Checkbox: Hi, Mr. Browsers. I’ve uncheck myself. Could I take back my cookies?
    Browser: NO!!! THIS IS MY COOKIES!!!

    # 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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".