Javascript problem

Discussion in 'Web Design and Development' started by Soulstorm, Oct 10, 2008.

  1. Soulstorm macrumors 68000

    Soulstorm

    Joined:
    Feb 1, 2005
    #1
    I have the following code:

    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>Untitled Document</title>
    
    <style type="text/css">
    
    .style1{
    	background:#000000;
    }
    
    </style>
    
    
    
    <script type="text/javascript">
    	var originalColor = 0;
    	
    	function RGBtoHex(R,G,B) {
    		return toHex(R)+toHex(G)+toHex(B)
    	}
    	
    	function toHex(N) {
    		if (N==null) 
    			return "00";
    		N=parseInt(N); 
    		if (N==0 || isNaN(N)) 
    			return "00";
    		N=Math.max(0,N); 
    		N=Math.min(N,255); 
    		N=Math.round(N);
    		return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
    	}
    	
    	
    	function doLighten(obj){
    		originalColor = originalColor - 20;
    		txt.value = originalColor;
    		obj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
    		
    		if(originalColor < 255){
    			setTimeout("doLighten(obj)", 30);
    		}
    		else
    			originalColor = 0;
    	}
    	
    	function lighten(obj){
    		originalColor = 255;
    		obj.style.background = RGBtoHex(originalColor,originalColor,originalColor);
    		doLighten(obj);
    	}
    	
    
    </script>
    
    </head>
    
    <body>
    
    
    <div class="style1" onmouseover="lighten(this)" >what the...!</div>
    <p></p>
    <div class="style1" onmouseover="lighten(this)" >what the...!</div>
    
    <textarea id="txt"> </textarea>
    </body>
    </html>
    
    
    The purpose is: What I mouse over on any of the two <div> , I want the background to fade out. The way it is now, it stucks after the first call to "doLighten()". It is only being executed once. Can anyone tell me why?
     
  2. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #2
    As posted it doesn't work for me at all in Firefox. Changing the line in lighten to
    Code:
    obj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
    
    get's it working once for each div. Now I just get an error "txt is not defined". This is because having a node with id="txt" does not mean you have a variable with that name that points to that node in JS.

    Edit: commenting out the line with txt.value gets us an obj not defined error. This is because of the way you are setting the timeout: obj will be not exist when the timeout next fires...

    Edit again: This works, is repeatable and actuals lightens instead of instantly starting light and darkening (as 255,255,255 is white, not black

    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>Untitled Document</title>
    
    <style type="text/css">
    
    .style1{
    	background:#000000;
    }
    
    </style>
    
    
    
    <script type="text/javascript">
    	var originalColor = 0;
    	
    	function RGBtoHex(R,G,B) {
    		return toHex(R)+toHex(G)+toHex(B)
    	}
    	
    	function toHex(N) {
    		if (N==null) 
    			return "00";
    		N=parseInt(N); 
    		if (N==0 || isNaN(N)) 
    			return "00";
    		N=Math.max(0,N); 
    		N=Math.min(N,255); 
    		N=Math.round(N);
    		return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
    	}
    	
    	
    	function doLighten(divID){
    		originalColor = originalColor + 20;
    		//txt.value = originalColor;
    		document.getElementById(divID).style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
    		
    		if(originalColor <255 ){
    			setTimeout("doLighten('"+divID+"')", 50);
    		}
    		else
    			originalColor = 255;
    	}
    	
    	function lighten(divID){
    		originalColor = 0;
    		document.getElementById(divID).style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
    		doLighten(divID);
    	}
    	
    
    </script>
    
    </head>
    
    <body>
    
    
    <div class="style1" onmouseover="lighten('div1')" id="div1">what the...!</div>
    <p></p>
    <div class="style1" onmouseover="lighten('div2')" id="div2">what the...!</div>
    
    <textarea id="txt"> </textarea>
    </body>
    </html>
    
     
  3. Soulstorm thread starter macrumors 68000

    Soulstorm

    Joined:
    Feb 1, 2005
    #3
    I think I get it. So the problem was that the 'obj' variable was released each time the doLighten() was called?

    I have another take on your code. This doesn't require setting a different id into each object every time.
    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>Untitled Document</title>
    
    <style type="text/css">
    
    .style1{
    	background:#000000;
    }
    
    </style>
    
    
    
    <script type="text/javascript">
    	var originalColor = 0;
    	var currObj = null;
    	function RGBtoHex(R,G,B) {
    		return toHex(R)+toHex(G)+toHex(B)
    	}
    	
    	function toHex(N) {
    		if (N==null) 
    			return "00";
    		N=parseInt(N); 
    		if (N==0 || isNaN(N)) 
    			return "00";
    		N=Math.max(0,N); 
    		N=Math.min(N,255); 
    		N=Math.round(N);
    		return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
    	}
    	
    	
    	function doLighten(){
    		originalColor = originalColor + 20;
    		//txt.value = originalColor;
    		currObj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
    		
    		if(originalColor <255 ){
    			setTimeout("doLighten()", 50);
    		}
    		else
    			originalColor = 255;
    	}
    	
    	function lighten(divID){
    		currObj = divID;
    		originalColor = 0;
    		currObj.style.background = '#' + RGBtoHex(originalColor,originalColor,originalColor);
    		doLighten();
    	}
    	
    
    </script>
    
    </head>
    
    <body>
    
    
    <div class="style1" onmouseover="lighten(this)">what the...!</div>
    <p></p>
    <div class="style1" onmouseover="lighten(this)">what the...!</div>
    
    <textarea id="txt"> </textarea>
    </body>
    </html>
     
  4. lazydog macrumors 6502a

    Joined:
    Sep 3, 2005
    Location:
    Cramlington, UK
    #4
    I don't know if you specifically want to use hex, but you can specify colour using rgb( r,g,b ) which is a bit simpler, eg

    Code:
    currObj.style.background = "rgb(" + red +"," + green + "," + blue ")"
    

    or at least I think you can!

    b en
     
  5. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #5
    Not so much released (this is not Cocoa :p) but simply not existing any more. If we view obj as a memory address (C style) then it has a valid address when we call lighten and the first time doLighten but then in the setTimeout call we are simply setting the timeout with a string. So the next call to setTimeout is called with a variable obj that no longer exists.

    Personally I light giving things IDs: it allows easy access to them by name and uses less global variables...
     
  6. lazydog macrumors 6502a

    Joined:
    Sep 3, 2005
    Location:
    Cramlington, UK
    #6
    Hi

    Hope you don't mind but I've been tinkering around with your code a bit.

    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>Untitled Document</title>
    
    <style type="text/css">
    
    .style1{
    	background:#000000;
    }
    
    </style>
    
    
    
    <script type="text/javascript">
    	
    	function lighten( id )
    	{
    		var doLighten = function()
    		{
    			object.style.background = "rgb(" + originalColor +"," + originalColor + "," + originalColor + ")" ;
    			
    			if( originalColor < 255 )
    			{
    				originalColor = Math.min( originalColor + 20, 255 ) ;
    				setTimeout( doLighten, 30 ) ;
    			}
    		}
    		
    		var object = document.getElementById( id ) ;
    		var originalColor = 0 ;
    		
    		doLighten();
    	}
    	
    </script>
    
    </head>
    
    <body>
    
    
    <div class="style1" onmouseover="lighten('div1')" id="div1">what the...!</div>
    <p></p>
    <div class="style1" onmouseover="lighten('div2')" id="div2">what the...!</div>
    
    <textarea id="txt"> </textarea>
    </body>
    </html>
    
    Two things I really like about JavaScript is that it has closures and also functions are objects. So in the above doLighten() has access to the variables object and originalColor.

    b e n
     

Share This Page