...

View Full Version : Javascript cookie to save background



lallare90
05-25-2012, 04:34 PM
Hi!

So.... I have this function that lets users change the background image of a website, the problem is that when the user goes to another page it doesn't save the background image that the user previously selected.
I figured this could be fixed by a cookie. I have looked at some guides about cookies but the whole thing befuddles me to no end.

This is the function to change the background:


function changeBG1() {
var imgPath = new String();
imgPath = document.body.style.backgroundImage;
document.body.style.backgroundImage = "url(images/image1.jpg)";
}

function changeBG2() {
var imgPath = new String();
imgPath = document.body.style.backgroundImage;
document.body.style.backgroundImage = "url(images/image2.jpg)";
}

There's probably a cleaner way to do this too, using arrays or something, but I'm very new to this.

If anyone can help me to create a cookie that saves the background I'd really appreciate it!
Thank you for your time!

Philip M
05-25-2012, 06:32 PM
If anyone can help me to create a cookie that saves the background I'd really appreciate it!


Cookies have been covered very many times in this forum. Have you tried using the search feature?

Example:- http://www.codingforums.com/showthread.php?t=248808

or Google:-
Example:- http://www.webdeveloper.com/forum/showthread.php?p=828804

If you are stiil really stuck, please come back, but it is a bit tedious posting the same cookie code over and over again.

It is your responsibility to die() if necessary….. - PHP Manual

lallare90
05-30-2012, 01:22 PM
Thank you Philip!
I thought I had done a thorough search but I guess I hadn't..

Anyway, I managed to clean up my change background function quite a lot.
I pretty much copied the cookie code from one the forums and modified it so it would suit my background changer function, but now I'm seriously stuck at the cookie part since I have no idea what I'm doing
It's making my head spin!

Any help would be greatly appreciated


<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}


</script>

<script type="text/JavaScript" language="JavaScript">
var imgElm;
function checkCookie(val) {
imgElm = document.body;
cookieVal = readCookie(val);
if(cookieVal != '') {
imgElm.style.backgroundImage = cookieVal;
}
}
</script>

<script type="text/javascript">
function changeBG(image) {
createCookie( 'img', image, 30);
document.body.style.backgroundImage = "url(" + image + ")";
}
</script>

I think the only wrong part is the checkCookie function. If that's the case then I hope it shouldn't be too much of a problem to help me out, but if the whole thing is f'd up then don't bother, I'll just keep on trying.
Thanks!

Philip M
05-30-2012, 01:34 PM
Here you are, and thank you for making an effort. You should change the background image before creating the cookie, not afterwards. That value (an url) is recovered on the next page access.


<body onload ="readCookie('mycookie'); eraseCookie('mycookie'); createCookie('mycookie','anyvalue', 365)">

<script type = "text/javascript">

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires = "+ date.toGMTString();
}
else {var expires = ""}
document.cookie = name + "="+ value + expires + "; path=/"; // available throughout the directory
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {;
retval = c.substring(nameEQ.length,c.length);
alert (retval); // for testing
return retval;
}
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1); // set cookie to expire on previous day
}

</script>

name = "mycookiename" or whatever name you wish to give the cookie
value = "anything" - in this case the url of the image
days = number of days cookie to remain active (say 365)

lallare90
05-31-2012, 02:14 PM
Thank you very much!
I got it working :)

Philip M
05-31-2012, 03:41 PM
Thank you very much!
I got it working :)

Great! Well done! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum