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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Save cookie based on user colour selection

    Hi - I'm wanting to create and save a cookie based upon a colour selected by a user to change the background colour of the page - the idea being that the background colour stays as per thier choice until the cookie is deleted.

    I have the farbtastic colour selector working but cannot seem to pass the colour value to the cookie and then load it.

    Any help greatly appreciated...

    Code below:

    Code:
    <head>
    
        
    
         <script src="http://code.jquery.com/jquery-latest.js"></script> 
    
         <script src="js/farbtastic.js" type="text/javascript"></script>
    
         <link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
    
         <style type="text/css">
    
       
    	
    	#container{
    		float:left;
    
    	}
    
    	#swatch{
    
    		width: 180px;
    
    		height: 180px;
    
    		background-image:none;
    
    		float:right;
    
    		margin:6px 20px 0px 0px;
    
    		border:none;
    
    		background-color:black;
    
    	}
    
    	#sliders{
    
    		width:500px;
    
    	}
    
    	#colorpicker{
    
    		float:left;
    
    		margin:0px 0px 0px 20px;
    
    	}
    
    	#red,#green,#blue{
    
    		margin:10px 0px 0px 0px;
    
    	}
    
    	#innerswatch{
    
    		font:bold 24px arial;
    
    		margin:75px 0px 0px 0px;
    
    		text-align:center;
    
    		color:white;
    
    	}
    
    	</style>
    
    
    
    <script>
    	
    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">
    
         	$(document).ready(function(){
    
    			var colorPicker = $.farbtastic("#colorpicker");
    
    			colorPicker.linkTo(pickerUpdate);
    
    			
    					
    
    			function hexFromRGB(r,g,b){
    
    				var hex = [r.toString(16),g.toString(16),b.toString(16)];
    
    				$.each(hex,function(nr,val){
    
    					if(val.length===1){
    
    						hex[nr]="0"+val;
    
    					}
    
    				});
    
    				return hex.join("").toUpperCase();
    
    			}
    
    			function pickerUpdate(color){
    
    				$("#swatch,body").css("background-color",color);
    				
    
    				if(colorPicker.hsl[2]>0.5){
    
                   		$("#innerswatch").css("color","#000000");     
    
              		}
    
              		else{
    
                   		$("#innerswatch").css("color","#ffffff");   
    
              		}
    
    				$("#innerswatch").html(color.toUpperCase())
    
    				
    
    				if(readCookie('bgColor'))
    				 $("body").css("background-color",color);
    
    						
    
    			}
    
    		});
    		
     
    
    
         </script>
         
         
    
    <head>
    
    <body onload="readCookie">
    
    	
    
    		<div id="colorpicker"></div>
    
                <div id="swatch" class="ui-widget-content ui-corner-all">
        
                	<div id="innerswatch">#000000</div>
        
    
                    <a href="#" onclick="createCookie('bgColor','color','1');">Set Me</a>  
                    
                    <a href="#" onclick="eraseCookie('bgColor');">Delete Me</a>  
    
    </body>
    
    </html>

  • #2
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bump!

    anyone!?

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You have an unclosed div tag, and it should be:

    Code:
    <body onload="readCookie()">
    I haven't looked at your code beyond these corrections.
    Last edited by AndrewGSW; 08-29-2012 at 11:49 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    You have an unclosed div tag, and it should be:

    Code:
    <body onload="readCookie()">
    I haven't looked at your code beyond these corrections.
    Thanks for this - only just realised you'd replied.

    Still not happening - The cookie is being created but with no content and I'm not sure it's being loaded?

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    	if(readCookie('bgColor'))
    				 $("body").css("background-color",color);
    You're calling readCookie both here and in the onload handler, but you're not using its return value.


  •  

    Posting Permissions

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