Set a browser cookie for element

Question

How would I create a cookie that would store the randomly added body class for one browser session or for one day. My intention would be to randomly give every user a body background image and then store that image so that it won't change every pagereload or when they go to page 2.

i am using this jQuery plugIn: https://github.com/carhartl/jquery-cookie

My jQuery code:

var classes = ['body-bg1', '', 'body-bg2', 'body-bg3', 'body-bg4',];
 var randomnumber = Math.floor(Math.random()*classes.length);     
 $('body').addClass(classes[randomnumber]);

EDIT:

the code that I use:

if($.cookie('userBackground') === null) {
    var classes = ['body-bg1','body-bg2', 'body-bg3', 'body-bg4'];
    var randomnumber = Math.floor(Math.random()*classes.length);
    var chosenClass = classes[randomnumber];
    $('body').addClass(chosenClass );
    $.cookie('userBackground', chosenClass, { expires: 7, path: '/' });
} else {
   //todo verify cookie value is valid
   $('body').addClass($.cookie('userBackground'));
}

Errors i am getting:

Uncaught ReferenceError: require is not defined
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'cookie'

score 0 · Answer 1 · answered Sep 13 '12 at 15:09

0

if($.cookie('userBackground') === null) {
    var classes = ['body-bg1','body-bg2', 'body-bg3', 'body-bg4'];
    var randomnumber = Math.floor(Math.random()*classes.length);
    var chosenClass = classes[randomnumber];
    $('body').addClass(chosenClass );
    $.cookie('userBackground', chosenClass, { expires: 7, path: '/' });
} else {
   //todo verify cookie value is valid
   $('body').addClass($.cookie('userBackground'));
}

answered Sep 13 '12 at 15:09

OnResolve

4,016
3
28
50

hi OnResolve, at the moment there comes an error `code` Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'cookie' `code` – Pullapooh Sep 13 '12 at 15:16
That would tell me that you're not loading the plugin. Do you have a script tag that's importing the plugin in the same page? – OnResolve Sep 13 '12 at 15:18
Do i need to add the server.js along with the jquery.cookie.js with this plugin to the header? – Pullapooh Sep 13 '12 at 15:19
@Pullapooh, You do need to include the jquery.cookie.js in the head of the file. As far as server.js, I'm not sure what that is in terms of your question--but if you're using functions from the plugin, it needs to be loaded of course. – OnResolve Sep 13 '12 at 15:22
now i am importing both in the head of the document and now i get a new error with the old one Uncaught ReferenceError: require is not defined. The server.js comes with the plugin but in the instructions there is no mention that you should put it in the head of the document. – Pullapooh Sep 13 '12 at 15:26
@Pullapooh, It looks like you're loading it right when I view your site; however you're getting a node.js error in server.js (which I can't help you with) but since the plugin is loaded I'd be curious to see if the cookie one goes away after you solve the first server issue. – OnResolve Sep 13 '12 at 15:32
Thanks for your help : ) have you any suggestions on another plugin or some other way of creating and solving my problem? – Pullapooh Sep 13 '12 at 15:48

Set a browser cookie for element

1 Answers1