Forums

Hompimpa

I have a checkbox and a <pre>. I would like if checkbox is checked, the <pre> 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/

Mottie

Forget about cookies, use local storage :P

Hompimpa

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[i].row;
	localStorage["halma.piece." + i + ".column"] = gPieces[i].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 <a> 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

Mottie

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

Hompimpa

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 <pre> 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

Hompimpa

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!!!

Hompimpa

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/

treehouse : what would you like to learn today?

Forums

[Solved] Set/Delete Cookie with Checkbox??

With Button

With Checkbox