browser cookie. and other options for achieve the same effect

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.

Site http://www.midnightlisteners.com/

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

but it does not work somehow

My jQuery code:

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'

Are there other ways to do this? php? pure javascript?

Ok, to start with the link you posted [midnightlisteners](http://www.midnightlisteners.com/), it has two different jQuery versions, make up your mind and only use one, secondly, I do not see you adding the `jquery-cookie.js` plugin in the header .. it wans't there a second ago .. anyhow — dbf, Sep 13 '12 at 20:14
I am adding the jquery-cookie.js right after i have added src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js". The jquery-cookie.js should be there I can see it. — Pullapooh, Sep 13 '12 at 20:17

prodigitalson · Accepted Answer · 2012-09-13T23:27:18.720

1

UPDATE:

If you want to make it only last the length of the session then just use the session instead:

<?php 
if(!isset($_SESSION['bgclass'])) {
   // lets make our cookie!
   $classes = array('body-bg1','body-bg2', 'body-bg3', 'body-bg4');

   $classIndex = array_rand($classes);

   $_SESSION['bgclass'] = $classes[$classIndex];

}       

$bgclass = $_SESSION['bgclass'];
?>

This way after the session times out or the browser is closed the user will get a new bgclass value.

If you already have php running i would do it that way. Much better to handle this server side if you can. Its also a bit simpler:

<?php 
if(!isset($_COOKIE['bgclass'])) {
   // lets make our cookie!
   $classes = array('body-bg1','body-bg2', 'body-bg3', 'body-bg4');
   $expire = time()+(60*60*24); // expire 1 day form now
   $classIndex = array_rand($classes);

   $bgclass = $classes[$classIndex]; // had $class here as opposed to $classes

   setcookie('bgclass', $bgclass, $expire);

} else {
  $bgclass = $_COOKIE['bgclass'];
}
?>
<html>
  <head></head>
  <body class="<?php echo $bgclass ?>">
    ...
  </body>
</html>

The key thing to remeber is that a cookie is essentially a response header so you have to do this before headers have been sent (ie. anything from php is output to the browser).

edited Sep 13 '12 at 23:27

answered Sep 13 '12 at 20:17

prodigitalson

60,050
10
100
114

I did add your code but some how it isn't printing the class on to the body. It only adds . and how should i modify the code that it only saves the cookie for one browser session? – Pullapooh Sep 13 '12 at 20:25
Here you can see how i did put your code in to my page [link](http://timobontenbal.net/images2/example.png) – Pullapooh Sep 13 '12 at 20:31
My site is on wordpress. does that change anything with the php that you did give me? – Pullapooh Sep 13 '12 at 21:07
I did turn php-errors on and did not get headers already sent. I tied to change your php code after the headers and then i did get the error: headers already sent – Pullapooh Sep 13 '12 at 22:15
yess i think that it is not working :) is there a way of testing this? :D – Pullapooh Sep 13 '12 at 22:21
sorry to ask but is there a way of making the cookie only live once browsing session? or like 10min. – Pullapooh Sep 13 '12 at 22:23
Well if you want to limit it to the session then dont use a cookie directly yous the session.. will post some code. – prodigitalson Sep 13 '12 at 23:24
I think that the session storage is not working at the moment it changes the background every page reload.(http://www.midnightlisteners.com/) – Pullapooh Sep 14 '12 at 14:17
I deleted the old Cookie code and did paste the session code instead. – Pullapooh Sep 14 '12 at 14:23
it could be that wordpress doesnt call `session_start()` before that code is run though i wold think that odd... But try putting `session_start();` before the `if` statement. If that doesnt work please post a new question. – prodigitalson Sep 14 '12 at 15:27
I did now put `session_start();` before `if` statement. It did change something it could that it is working but i am not sure. the background image doesn't change now but if i close the browser and reopen it the same background image stays. – Pullapooh Sep 14 '12 at 16:16

browser cookie. and other options for achieve the same effect

1 Answers1