SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Function ...

    Hello ...

    I am trying to fade some text from one color to another with a pause ... but it just goes from one color to the end color ...

    How can I slow this down ...

    Code:
    function fader() {
    			setTimeout('document.getElementById("textbox").style.color="#006666";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#008080";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#009999";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#00B3B3";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#00CCCC";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#00E6E6";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#00FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#1AFFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#33FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#4DFFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#66FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#80FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#99FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#B3FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#CCFFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#E5FFFF";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#F8F8F8";', 1000);
    		}
    Thanks

    Mike

  2. #2
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your script will wait one second and then apply a lot of colors to the same textbox at the same time.
    The first line of your function could stay, but the second one should have 2000 as the second argument instead of 1000, the third one 3000, and so on.
    So you would have:
    Code:
    			setTimeout('document.getElementById("textbox").style.color="#006666";', 1000);
    			setTimeout('document.getElementById("textbox").style.color="#008080";', 2000);
    			setTimeout('document.getElementById("textbox").style.color="#009999";', 3000);

  3. #3
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks DXL ...

    I have been playing with the script and made some changes to reduce code ...

    Code:
    function fader() {
    			// Set Color Array
    			var colors = new Array();
    			colors[0] = "#006666"
    			colors[1] = "#008080"
    			colors[2] = "#009999"
    			colors[3] = "#00B3B3"
    			colors[4] = "#00CCCC"
    			colors[5] = "#00E6E6"
    			colors[6] = "#00FFFF"
    			colors[7] = "#1AFFFF"
    			colors[8] = "#33FFFF"
    			colors[9] = "#4DFFFF"
    			colors[10] = "#66FFFF"
    			colors[11] = "#80FFFF"
    			colors[12] = "#99FFFF"
    			colors[13] = "#B3FFFF"
    			colors[14] = "#CCFFFF"
    			colors[15] = "#E5FFFF"
    			colors[16] = "#F8F8F8"
    			// Set Array Index
    			var i
    			for (i in colors) {
    				setTimeout('setColor(colors[i]);', 1000);
    			}
    		}
    		function setColor(hex) {
    			document.getElementById("textbox").style.color = hex;
    		}
    But in this line ...

    Code:
    setTimeout('setColor(colors[i]);', 1000);
    I am getting an error of colors is not defined.

    Am I on the right track?

    Thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that setTimeout is non-blocking meaning that it isn't causing your program to pause and wait for the timeout it will set the timer and then execute the next line of code. Try this:

    Code:
    			// Set Color Array
    			var colors = new Array();
    			colors[0] = "#006666"
    			colors[1] = "#008080"
    			colors[2] = "#009999"
    			colors[3] = "#00B3B3"
    			colors[4] = "#00CCCC"
    			colors[5] = "#00E6E6"
    			colors[6] = "#00FFFF"
    			colors[7] = "#1AFFFF"
    			colors[8] = "#33FFFF"
    			colors[9] = "#4DFFFF"
    			colors[10] = "#66FFFF"
    			colors[11] = "#80FFFF"
    			colors[12] = "#99FFFF"
    			colors[13] = "#B3FFFF"
    			colors[14] = "#CCFFFF"
    			colors[15] = "#E5FFFF"
    			colors[16] = "#F8F8F8"
    		
    		
                   function setColor(ind) 
                   {
    		       document.getElementById("textbox").style.color = colors[ind];
                           if(ind < colors.length)
                          {
                               setTimeout("setColor(" + (ind+1) + ")", 1000);
                          }
    		}
    This should work because it will only reset the timer after the second has passed.

    To begin the fade use: setColor(0);

  5. #5
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi There ... thanks for all of your help.

    I have made some strides but just need a little more help.

    1) I am getting the text to fade ... but it is happening too fast, I want the text to show for like 3 seconds ... then fade, that is not happening now.

    2) I would like to have mouse over and mouse out functions to stop and resume the function of rotating and fading the text ... is this possible?

    Here is my 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=iso-8859-1" />
    	<title>Testing 3</title>
    	<style>
    		body { 
    			font-family:Verdana, Arial, Helvetica, sans-serif;
    			font-size:12px;
    		}
    		#textbox {
    			height:102px; 
    			border:1px solid #CCCCCC; 
    			background-color:#F8F8F8; 
    			margin:5px 10px 10px 10px; 
    			padding:10px 15px 10px 15px;
    			color:#006666;
    		}
    		#textbox a { color:inherit; !important }
    	</style>
    	<script>
    		function fader() {
    			// Set Color Array
    			var colors = new Array();
    			colors[0] = "006666"
    			colors[1] = "1D7777"
    			colors[2] = "408C8C"
    			colors[3] = "63A0A0"
    			colors[4] = "7FB1B1"
    			colors[5] = "9BC1C1"
    			colors[6] = "9BC1C1"
    			colors[7] = "B7D2D2"
    			colors[8] = "D2E2E2"
    			colors[9] = "F8F8F8"
    			
    			// Set Array Index
    			var x;
    			var timer = 100;
    			for (x in colors) {
    				setTimeout("setColor('" + colors[x] + "')", timer);
    				timer = timer + 100;
    			}
    		}
    		function setColor(hex) {
    			document.getElementById("textbox").style.color = '#' + hex;
    		}
    		function pause() {
    			// Empty Code
    		}
    		var content = new Array();
    		var i = 0;
    		content[i++] = '<p class="dc_main_headingtwo" style="padding-bottom:5px;"><a href="#">View Your Investment Contracts Online</a></p><p>If you own a Great-West Life segregated fund contract, select <i>Personal Investments</i> under <i>Client Sign In</i> and register today</a>.</p>';
    		content[i++] = '<p class="dc_main_headingtwo" style="padding-bottom:5px;"><a href="#">This Is Sample Rotating Content</a></p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur est. Vestibulum rhoncus porttitor felis. Donec libero metus, pharetra in, adipiscing eget, eleifend vitae, enim.</p>';
    		content[i++] = '<p class="dc_main_headingtwo" style="padding-bottom:5px;"><a href="#">In The Community</a></p><p>We received the 2006 Philanthropy Award for Outstanding Corporation. To learn more, go to <a href="#">Community News</a>.</p>';
    		
    		var duration = 4000;
    		id = setInterval('rotate()',duration);
    		var c = 0;
    		function rotate() {
    			app = content[c++];
    			if (c == i) c = 0;
    			document.getElementById("textbox").innerHTML = app;
    			setTimeout("pause();", 3000);
    			fader();	
    		}
    	</script>
    </head>
    
    <body onload="javascript:rotate();">
    
    <div id="textbox"></div>
    
    </body>
    </html>
    Thanks

    Mike


Bookmarks

Posting Permissions

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