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

    Question Trying to animate a div to change background using setTimeOut

    My page currently takes input from a text input field and on a button click will change either red green or blue color of a
    div Background. ive been trying to animate it, but doesnt work. The Color changes OK but it pauses and then changes straight to the end color. was hoping the setTimeout would work

    Code:
    var ad=1;                // global var's
    var r =0;
    var g =0;
    var b =0;
    function blend(toChange){
    
    
    	switch (toChange){
    		case 1:
    			if (r>255){r=255;}				
    			if (r<0){r=0;}
    			r = r +ad;
    			break;
    		case 2:
    			if (g>255){g=255;}				
    			if (g<0){g=0;}
    			g = g +ad;
    			break;
    		case 3:
    			if (b>255){b=255;}				
    			if (b<0){b=0;}
    			b = b +ad;
    			break;
    		default:
    			if (r>255){r=255;}				
    			if (r<0){r=0;}
    			r = r +ad;
    			break;
    		
    	}
    	hcol= getHexColor(r,g,b);
    	var Item = document.getElementById("colBox");
    	Item.style.background =hcol;
    	document.getElementById("display").innerHTML =hcol;   // display Curent Hex Color
    
    }
    
    function blendDown(toChange){
    	amount =document.getElementById("inputField").value;
    	ad=-1;
    	for(i=0; i<amount; ++i){
            setTimeout(function(){blend(toChange);},400);
            }
    }
    function blendUp(toChange){
    	amount =document.getElementById("inputField").value;
    	ad=1;
    	for(i=0; i<amount; ++i){
            setTimeout(function(){blend(toChange);},400);
            }
    }
    Snipet of full code my getHexColor(rgb) works a treat
    It seems like the page isnt updating after the " Item.style.background =hcol; "
    im Sure the Problem isnt in the HTML but here is the relavent part.
    The div / id=colbox is defind in external css and has set width and weight of 100
    Code:
    <h1 id="display">Color Displayed on Button Click</h1>
    <br><br>
    <input type = "button"  onclick="blendUp(1)" value ="Red up" />
    <input type = "button"  onclick="blendUp(2)" value ="Green up" />
    <input type = "button"  onclick="blendUp(3)" value ="Blue up" />
    <br>
    <input type = "button"  onclick="blendDown(1)" value="Red down" />
    <input type = "button"  onclick="blendDown(2)" value="Green Down" />
    <input type = "button"  onclick="blendDown(3)" value="Blue Down" />
    <br>
    <input type="text" id ="inputField" size="10" value="30" />
    <br>
    <div id="colBox">
    </div>
    any help would be most appreciated and Thanks in advance
    Last edited by BlakeE; 05-20-2012 at 05:53 PM.

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

    Thumbs up Converted Setimeout to setinterval

    I fixed the Problem.I converted the setTimeout for inverval and page is now animating

    Code:
    function blend(toChange){
    
    	switch (toChange){
    		case 1:
    			r = r +ad;                             
    			if (r>255){r=255;i=amount;}	      //check value is in range of hex color values			
    			if (r<0){r=0;i=amount;}
    			break;
    		default:
    			r = r +ad;
    			if (r>255){r=255;i=amount;}				
    			if (r<0){r=0;i=amount;}
    			break;
    		
    	}
    	hcol= getHexColor(r,g,b);
    	document.getElementById("colBox").style.background =hcol;
    	document.getElementById("headd").innerHTML =hcol;		// display Curent Hex Color
    	if (amount ==i){stopTimer()}
    	i++;
    function blendDown(toChange){
    	amount =document.getElementById("inputField").value;
    	ad=-1;
    	i=0;	
    	if (timer1 ==""){		// check to see if timer is allready active
    		timer1 = setInterval(function(){blend(toChange);},10);	
    	}
    	else{
    		stopTimer();
    		timer1 = setInterval(function(){blend(toChange);},10);
    	}
    }

    Now im gona ad multi color changes and a stop button But If there is a method to do this with settimeout wouldnt mind knowing.I find setTimeout is easier to use

    Oh and How do i cloe this Tread??
    thank you
    Last edited by BlakeE; 05-21-2012 at 02:22 AM.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok this project was good for the learning curve, i will in the end
    remake this whole thing with HVL color settings. what this code is going to do
    is allow me to get color references fast and easy. all the controls are going to
    be in a div that fades out, also a input text box will allow me type an element
    Id in then from a radioselect i can select to change text color or back ground.
    Oh and the div box can be moved around the screen as need be with
    mouseOver Controls :-)). Once finished i can use this tool to help style my web pages by using the js and css files and pasting the objects html into page beeing eddited


  •  

    Posting Permissions

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