Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript cookie to save background

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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by lallare90 View Post
    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:- Check cookie value then display image

    or Google:-
    Example:- http://www.webdeveloper.com/forum/sh...d.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
    Last edited by Philip M; 05-25-2012 at 06:51 PM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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.

    Code:
    <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)
    Last edited by Philip M; 05-30-2012 at 01:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    lallare90 (05-31-2012)

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much!
    I got it working

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by lallare90 View Post
    Thank you very much!
    I got it working
    Great! Well done!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •