www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: [RESOLVED] Cookie enabled bg image??

Hybrid View

  1. #1
    Join Date
    Feb 2009
    Posts
    10

    resolved [RESOLVED] Cookie enabled bg image??

    I am working on a site that has a few user-selected background images. I am able to get them to change when the image is clicked, but when browsing to a different page on the site, the background image goes back to the default image. I am not an expert in javascript at all, so I might be totally off on what I'm trying to do. I have tried a few different ways to put a cookie on the users computer telling it that the selected image is the user's preference for the bg image. Then when they click on a different link, an onload function getting the cookie just placed on the computer will load the image they selected on the previous page.

    link to the site: http://www.nvmber9.com/new%20site
    cookie javascript: http://www.nvmber9.com/new%20site/js/cookies.js
    page code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>NVM|9</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
    <script src="../js/cookies.js" type="text/javascript"></script>
    </head>
    
    <body background="colors/black.jpg" bgproperties="repeat-x" onload="getCookie">
    <div id="container">
    <script language="JavaScript">
    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.
    var backImage = new Array();
    backImage[0] = "colors/blue.jpg";
    backImage[1] = "colors/black.jpg";
    backImage[2] = "colors/red.jpg";
    backImage[3] = "colors/magenta.jpg";
    backImage[4] = "colors/purple.jpg";
    backImage[5] = "colors/green.jpg";
    function changeBGImage(whichImage){
    	if (document.body){
    		document.body.background = backImage[whichImage];
    		}
    	}
    </script>
    <div id="sideline"></div>
    <div id="navigation">
    	<a href=""><div id="logo"></div></a>
    	<a href="collection"><div id="collection"></div></a>
    	<a href="campaign"><div id="campaign"></div></a>
    	<a href="celebrity"><div id="celebrity"></div></a>
    	<a href="about"><div id="about"></div></a>
    	<a href="store"><div id="store"></div></a>
    	<a href="blog"><div id="blog"></div></a>
    	<a href="media"><div id="media"></div></a>
    	<a href="international"><div id="international"></div></a>
    	<a href="wholesale"><div id="wholesale"></div></a>
    	<a href="press"><div id="press"></div></a>
    	<a href="contact"><div id="contact"></div></a>
    </div>
    <div id="content">
    	<table width="826" height="auto" cellpadding="0" cellspacing="0">
        	<tr>
    			<td height="50" background="images/content-top.png">		  </td>
            </tr>
            <tr>
    		  <td height="auto" background="images/content-bg.png" class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
              </td>
            </tr>
            <tr>
       		  <td height="50" background="images/content-bottom.png">		  </td>
            </tr>
    	</table>
    </div>
    </div>
    <div id="footer">
    <a href="javascript:changeBGImage(1)"><img src="colors/black.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(0)"><img src="colors/blue.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(2)"><img src="colors/red.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(3)"><img src="colors/magenta.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(4)"><img src="colors/purple.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(5)"><img src="colors/green.png" title="select a background color" class="footer"/></a>
    <span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span> <span class="cookie">(MUST ENABLE COOKIES)</span></div>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    To set the date to the next month, simply do this:
    Code:
    var expDate = new Date();
    expDate.setMonth(expDate.getMonth()+1);
    Otherwise, what does the content of your cookie function look like? I prefer these cookie functions:
    Code:
    function getCookie(name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
          return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }
    function getCookieVal(offset) {
      var endstr = document.cookie.indexOf (";", offset);
      if (endstr == -1)
        endstr = document.cookie.length;
      return unescape(document.cookie.substring(offset, endstr)).replace(/\+/g, " ");
    }
    function setCookie(name, value) {
      var argv = setCookie.arguments;
      var argc = setCookie.arguments.length;
      var expires = (argc > 2) ? argv[2] : null;
      var path = (argc > 3) ? argv[3] : null;
      var domain = (argc > 4) ? argv[4] : null;
      var secure = (argc > 5) ? argv[5] : false;
      document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
         ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
         ((path == null) ? "" : ("; path=" + path)) +  
         ((domain == null) ? "" : ("; domain=" + domain)) +    
         ((secure == true) ? "; secure" : "");
    }
    function delCookie(name) {
      exp = new Date();
      exp.setTime(exp.getTime() - (24*60*60*1000));
      var cval = getCookie(name);
      cval = (cval == null) ? "" : cval;
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }

  3. #3
    Join Date
    Feb 2009
    Posts
    10
    This is what I have. I'm probably not even remotely close...

    Code:
       var today = new Date();
       var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
       setCookieBlue("selectedBgImage", "../colors/blue.jpg", nextMonth);
    
       var today = new Date();
       var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
       setCookieBlack("selectedBgImage", "../colors/black.jpg", nextMonth);
    
       var today = new Date();
       var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
       setCookieRed("selectedBgImage", "../colors/red.jpg", nextMonth);
    
       var today = new Date();
       var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
       setCookieMagenta("selectedBgImage", "../colors/magenta.jpg", nextMonth);
    
       var today = new Date();
       var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
       setCookieGreen("selectedBgImage", "../colors/green.jpg", nextMonth);
    
       var today = new Date();
       var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
       setCookiePurple("selectedBgImage", "../colors/purple.jpg", nextMonth);
    
    	var szName = getCookie("selectedBgImage");

    How would I put the javascript you included into the site?

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    Do you have a function defined for these? setCookieBlue()

  5. #5
    Join Date
    Feb 2009
    Posts
    10
    What you see is what I have. So, I'm assuming I am missing those functions. Will I have to have a separate function for each cookie?

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    You only need a separate cookie for different purposes -- so the answer is no.
    Code:
    function changeBGImage(whichImage)
    {
    	if (document.body)
    	{
    		document.body.background = backImage[whichImage];
    		var expDate = new Date();
    		expDate.setMonth(expDate.getMonth()+1);
    		setCookie("selectedBgImage", backImage[whichImage], expDate);
    	}
    	return true;
    }

  7. #7
    Join Date
    Feb 2009
    Posts
    10
    Where do I put that? Do I replace something? Sorry, still learning..

    I did notice something though. It places the cookie when I view the site from my files, but when I upload to the server, it doesn't. And I can't get the readCookie function to work.

    this is what I have now:

    code.js:
    Code:
    var backImage ="colors/blue.jpg,colors/black.jpg,colors/red.jpg,colors/magenta.jpg,colors/purple.jpg,colors/green.jpg".split(',');
    
    //Using the following functions are from quirksmode. - START
    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);
    }
    //function from quirksmode. - END
    
    function selectBg(whichImage) {
        eraseCookie('selectedBgImage'); //if a cookie exists remove it, not necessary but I prefer this.
        createCookie('selectedBgImage', backImage[parseInt(whichImage)], 7);
        changeBGImage(whichImage);
    }
    
    function changeBGImage(whichImage){
    	if (document.body){
    		document.body.style.backgroundImage = "url('" + backImage[whichImage] + "')";
    	}
    }
    
    (function(){
    	var backImage = readCookie('selectedBgImage');
    	if(backImage !== "") {
    		changeBGImage(whichImage);
    	}
    	
    })();
    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>NVM|9</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body background="colors/black.jpg" bgproperties="repeat-x">
    <div id="container">
    <div id="sideline"></div>
    <div id="navigation">
    	<a href="index.html"><div id="logo"></div></a>
    	<a href="collection.html"><div id="collection"></div></a>
    	<a href="campaign"><div id="campaign"></div></a>
    	<a href="celebrity"><div id="celebrity"></div></a>
    	<a href="about"><div id="about"></div></a>
    	<a href="store"><div id="store"></div></a>
    	<a href="blog"><div id="blog"></div></a>
    	<a href="media"><div id="media"></div></a>
    	<a href="international"><div id="international"></div></a>
    	<a href="wholesale"><div id="wholesale"></div></a>
    	<a href="press"><div id="press"></div></a>
    	<a href="contact"><div id="contact"></div></a>
    </div>
    <div id="content">
        	<div id="contenttop"></div>
            <div id="contentmiddle">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
            </div>
            <div id="contentbottom"></div>
    </div>
    </div>
    <div id="footer">
    <a href="" onclick="selectBg('1');return false;"><img src="colors/black.png" title="MUST ENABLE COOKIESr" class="footer"/></a>
    <a href="" onclick="selectBg('0');return false;"><img src="colors/blue.png" title="MUST ENABLE COOKIES" class="footer"/></a>
    <a href="" onclick="selectBg('2');return false;"><img src="colors/red.png" title="MUST ENABLE COOKIES" class="footer"/></a>
    <a href="" onclick="selectBg('3');return false;"><img src="colors/magenta.png" title="MUST ENABLE COOKIES" class="footer"/></a>
    <a href="" onclick="selectBg('4');return false;"><img src="colors/purple.png" title="MUST ENABLE COOKIES" class="footer"/></a>
    <a href="" onclick="selectBg('5');return false;"><img src="colors/green.png" title="MUST ENABLE COOKIES" class="footer"/></a>
    <span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span></div>
    <script type="text/javascript" src="js/code.js"></script>
    </body>
    </html>

  8. #8
    Join Date
    Feb 2008
    Posts
    1,666
    Quote Originally Posted by wedelias View Post
    Where do I put that? Do I replace something?
    I used your function name -- so that should clue you in to replace your function with that function. I also wrote it to use my cookie functions (which I posted earlier).

  9. #9
    Join Date
    Feb 2009
    Posts
    10
    Ok i think I fixed those issues, however it still isn't working. It sets the cookie when viewing locally, but not on the server. Also, I don't think the getCookie function works here.

    current files:
    code.js
    Code:
    var backImage ="colors/blue.jpg,colors/black.jpg,colors/red.jpg,colors/magenta.jpg,colors/purple.jpg,colors/green.jpg".split(',');
    
    //Using the following functions are from quirksmode. - START
    function setCookie(name, value) {
      var argv = setCookie.arguments;
      var argc = setCookie.arguments.length;
      var expires = (argc > 2) ? argv[2] : null;
      var path = (argc > 3) ? argv[3] : null;
      var domain = (argc > 4) ? argv[4] : null;
      var secure = (argc > 5) ? argv[5] : false;
      document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
         ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
         ((path == null) ? "" : ("; path=" + path)) +  
         ((domain == null) ? "" : ("; domain=" + domain)) +    
         ((secure == true) ? "; secure" : "");
    }
    
    function getCookie(name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
          return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }
    function getCookieVal(offset) {
      var endstr = document.cookie.indexOf (";", offset);
      if (endstr == -1)
        endstr = document.cookie.length;
      return unescape(document.cookie.substring(offset, endstr)).replace(/\+/g, " ");
    }
    
    function delCookie(name) {
      exp = new Date();
      exp.setTime(exp.getTime() - (24*60*60*1000));
      var cval = getCookie(name);
      cval = (cval == null) ? "" : cval;
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }
    //function from quirksmode. - END
    
    function changeBGImage(whichImage)
    {
    	delCookie('selectedBgImage'); //if a cookie exists remove it, not necessary but I prefer this.
    	if (document.body)
    	{
    		document.body.background = backImage[whichImage];
    		var expDate = new Date();
    		expDate.setMonth(expDate.getMonth()+1);
    		setCookie("selectedBgImage", backImage[whichImage], expDate);
    	}
    	return true;
    }
    
    (function(){
    	var backImage = getCookie('selectedBgImage');
    	if(backImage !== "") {
    		changeBGImage(whichImage);
    	}
    	
    })();
    
      var expDate = new Date();
      	expDate.setMonth(expDate.getMonth()+1);
    html:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>NVM|9</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body background="colors/black.jpg" bgproperties="repeat-x">
    <div id="container">
    <div id="sideline"></div>
    <div id="navigation">
    	<a href="index.html"><div id="logo"></div></a>
    	<a href="collection.html"><div id="collection"></div></a>
    	<a href="campaign.html"><div id="campaign"></div></a>
    	<a href="celebrity.html"><div id="celebrity"></div></a>
    	<a href="about.html"><div id="about"></div></a>
    	<a href="store.html"><div id="store"></div></a>
    	<a href="blog.html"><div id="blog"></div></a>
    	<a href="media.html"><div id="media"></div></a>
    	<a href="international.html"><div id="international"></div></a>
    	<a href="wholesale.html"><div id="wholesale"></div></a>
    	<a href="press.html"><div id="press"></div></a>
    	<a href="contact.html"><div id="contact"></div></a>
    </div>
    <div id="content">
        	<div id="contenttop"></div>
            <div id="contentmiddle">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
            </div>
            <div id="contentbottom"></div>
    </div>
    </div>
    <div id="footer">
    <a href="javascript:changeBGImage(1)"><img src="colors/black.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(0)"><img src="colors/blue.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(2)"><img src="colors/red.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(3)"><img src="colors/magenta.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(4)"><img src="colors/purple.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(5)"><img src="colors/green.png" title="select a background color" class="footer"/></a>
    <span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span></div>
    <script type="text/javascript" src="js/code.js"></script>
    </body>
    </html>

  10. #10
    Join Date
    Feb 2008
    Posts
    1,666
    Don't worry about the server. Replace all of this:
    Code:
    function changeBGImage(whichImage)
    {
    	delCookie('selectedBgImage'); //if a cookie exists remove it, not necessary but I prefer this.
    	if (document.body)
    	{
    		document.body.background = backImage[whichImage];
    		var expDate = new Date();
    		expDate.setMonth(expDate.getMonth()+1);
    		setCookie("selectedBgImage", backImage[whichImage], expDate);
    	}
    	return true;
    }
    
    (function(){
    	var backImage = getCookie('selectedBgImage');
    	if(backImage !== "") {
    		changeBGImage(whichImage);
    	}
    	
    })();
    
      var expDate = new Date();
      	expDate.setMonth(expDate.getMonth()+1);
    with this:
    Code:
    var selectedBgImage, BgImageCookie = "selectedBgImage";
    function changeBGImage(selectedBgImage)
    {
    	delCookie(BgImageCookie); //if a cookie exists remove it, not necessary but I prefer this.
    	if (document.body)
    	{
    		document.body.background = backImage[selectedBgImage];
    		var expDate = new Date();
    		expDate.setMonth(expDate.getMonth()+1);
    		setCookie(BgImageCookie, selectedBgImage, expDate);
    	}
    	return true;
    }
    // following should be single equal-sign -- not double...
    if(selectedBgImage = getCookie(BgImageCookie))
    {
    	changeBGImage(selectedBgImage);
    }
    Last edited by MrNobody; 02-03-2009 at 05:57 PM.

  11. #11
    Join Date
    Feb 2009
    Posts
    10
    Now it doesn't show a bg image at all until you select one. And still doesn't set the cookie.

    Code:
    var backImage ="colors/blue.jpg,colors/black.jpg,colors/red.jpg,colors/magenta.jpg,colors/purple.jpg,colors/green.jpg".split(',');
    
    //Using the following functions are from quirksmode. - START
    function setCookie(name, value) {
      var argv = setCookie.arguments;
      var argc = setCookie.arguments.length;
      var expires = (argc > 2) ? argv[2] : null;
      var path = (argc > 3) ? argv[3] : null;
      var domain = (argc > 4) ? argv[4] : null;
      var secure = (argc > 5) ? argv[5] : false;
      document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
         ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
         ((path == null) ? "" : ("; path=" + path)) +  
         ((domain == null) ? "" : ("; domain=" + domain)) +    
         ((secure == true) ? "; secure" : "");
    }
    
    function getCookie(name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
          return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }
    function getCookieVal(offset) {
      var endstr = document.cookie.indexOf (";", offset);
      if (endstr == -1)
        endstr = document.cookie.length;
      return unescape(document.cookie.substring(offset, endstr)).replace(/\+/g, " ");
    }
    
    function delCookie(name) {
      exp = new Date();
      exp.setTime(exp.getTime() - (24*60*60*1000));
      var cval = getCookie(name);
      cval = (cval == null) ? "" : cval;
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }
    //function from quirksmode. - END
    
    var selectedBgImage, BgImageCookie = "selectedBgImage";
    function changeBGImage(selectedBgImage)
    {
    	delCookie(BgImageCookie); //if a cookie exists remove it, not necessary but I prefer this.
    	if (document.body)
    	{
    		document.body.background = backImage[selectedBgImage];
    		var expDate = new Date();
    		expDate.setMonth(expDate.getMonth()+1);
    		setCookie(BgImageCookie, selectedBgImage, expDate);
    	}
    	return true;
    }
    if(selectedBgImage = getCookie(BgImageCookie))
    {
    	changeBGImage(selectedBgImage);
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>NVM|9 Campaign</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body background="colors/black.jpg" bgproperties="repeat-x">
    <div id="container">
    <div id="sideline"></div>
    <div id="navigation">
    	<a href="index.html"><div id="logo"></div></a>
    	<a href="collection.html"><div id="collection"></div></a>
    	<a href="campaign.html"><div id="campaign"></div></a>
    	<a href="celebrity.html"><div id="celebrity"></div></a>
    	<a href="about.html"><div id="about"></div></a>
    	<a href="store.html"><div id="store"></div></a>
    	<a href="blog.html"><div id="blog"></div></a>
    	<a href="media.html"><div id="media"></div></a>
    	<a href="international.html"><div id="international"></div></a>
    	<a href="wholesale.html"><div id="wholesale"></div></a>
    	<a href="press.html"><div id="press"></div></a>
    	<a href="contact.html"><div id="contact"></div></a>
    </div>
    <div id="content">
        	<div id="contenttop"></div>
            <div id="contentmiddle">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
            </div>
            <div id="contentbottom"></div>
    </div>
    </div>
    <div id="footer">
    <a href="javascript:changeBGImage(1)"><img src="colors/black.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(0)"><img src="colors/blue.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(2)"><img src="colors/red.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(3)"><img src="colors/magenta.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(4)"><img src="colors/purple.png" title="select a background color" class="footer"/></a>
    <a href="javascript:changeBGImage(5)"><img src="colors/green.png" title="select a background color" class="footer"/></a>
    <span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span></div>
    <script type="text/javascript" src="code.js"></script>
    </body>
    </html>

  12. #12
    Join Date
    Feb 2008
    Posts
    1,666
    Run it through a script debugger and figure it out. Or, since you aren't telling me anything helpful, provide a live link to the page so I can stop guessing what your problems are.

  13. #13
    Join Date
    Feb 2009
    Posts
    10
    Oh, sorry, I thought you were seeing the website. The link is at the top of the page.

    http://www.nvmber9.com/new&#37;20site

  14. #14
    Join Date
    Feb 2008
    Posts
    1,666
    You weren't checking for error messages in your browser. Insert the following line into the beginning of your setCookie function:
    Code:
      value = value.toString();

  15. #15
    Join Date
    Feb 2009
    Posts
    10
    I don't know what that did. A few changes ago the bg image was black (and still is in the body tag) but now no bg image shows up until you select one. Should I be adding some sort of onload function to getCookie?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles