Question

I’m making a small site with some jQuery-experiments (kinda’ gamish). In each game there is a goal, and when the goal is found, and clicked, I want to make a permanent change to the heart symbols in the footer. I’m trying to use the cookie-plugin for this.

A link to one of the subpages: http://www.carlpapworth.com/htmlove/arrows.html

here’s the footer CSS:

footer{
position: fixed;
bottom: 0px;
padding: 10px; 
width: 100%;
height: 100px;
background: /*url(../images/bgFooter.png)*/ #dddddd;
z-index: 2000;
}

.heartCollection{
width: 940px;
margin: 0 auto;
text-align: justify;
}

.heartCollection p{
font-size: 13px;
float: none;
width: 100%;
padding: 0;
margin: 0 0 -20px 0;
text-align: center;
position: relative;
}

.heartCollection ul li{
width: auto;
display: inline;
list-style: none;
float: left;
margin: 10px 0 -10px 0;
padding: 0 0 0 98px;
font-size: 70px;
}

.heartCollection ul li a{
font-family: menlo;
color: #cccccc;
}

.found{
color: #ff63ff;
}

.credits{
width: 100%;
height: auto;
margin: 80px auto;
bottom: 0px;
left: -40px;
position: relative;
text-align: right;
}

Here’s the Javascript:

$(document).ready(function() {
    //help
    $('#helpInfo').hide();
    $('#help h2').click(function(){
        $('#helpInfo').show(300);
    });
    $('#helpInfo').click(function() {
        $(this).hide(300);
    });
    //reward  
    $('#reward').hide();
    $('#goal a').click(function(){
        $('#reward').fadeIn(1000);
    });
    //Collection
    $.cookie('class','found',{
    });
    var foundHeart = $.cookie('found');
    $('.exit').click(function(){
        $('#collection1').addClass(foundHeart);
    });

});

Well nothing happens, so what am I doing wrong?
Edit: And more importantly, what should I do to fix it?

Answer 1

There are two things wrong:

First,

var foundHeart = $.cookie('found');

You’re trying to retrieve the cookie by name with the above function. Instead you’re passing in the value.

The cookie params are set as follows:

$.cookie('name', 'value', { options });

So the name of your cookie is ‘class’ and the value is ‘found’.

In other words

var foundHeart = $.cookie('found');

should be

var foundHeart = $.cookie('class');

Second, even if you correct that your code won’t function as you intended. Why? Because you’re setting the cookie on load.

This line sets the cookie:

$.cookie('name', 'value');

But you’re running it within the document ready function.

You should move that line into this function:

$('#goal a').click(function(){
    $('#reward').fadeIn(1000);
    // moved set cookie function here
    $.cookie('class', 'found');
});

So that it only sets when you get to the goal.