Results 1 to 3 of 3

Thread: Create Flicker Effect with setAttribute loop

  1. #1
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default Create Flicker Effect with setAttribute loop

    Hi everyone.

    I have begun work on a small script that will make the background and text colors flicker within a DIV container, like a soccer scoreboard.

    I want the flicker effect to pass 10 times and stop - with the use of setInterval() and clearInterval()

    So far I have been able to have DOM change the style once, but I am unable to pass back to the original colors or create an effective flicker effect. Does anyone have any suggestions?

    Thanks in advance.

    Code:
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>CHAOS SOCCER MANAGER v1.0</title>
    
    <style type="text/css">
    
    #scoreboard	{
    width:600px;background-color:blue;color:white;margin:0 auto;text-align:center;
    font-size:300%;vertical-align:baseline;padding:50px 0;
    }
    </style>
    
    <script type="text/javascript">
    function flicker(timer)	{
    
    if (timer="true")
    	{
    	countdown=10;
    document.getElementById("scoreboard").setAttribute('style','background-color:blue;color:white;'); // sets flicker colors
    var flick = setInterval(styles(),.100); // begins the flicker and sends to styles function
    	}
    
    						}
    function styles()	{
    	
    	document.getElementById("scoreboard").setAttribute('style','background-color:white;color:blue;');
    	countdown--;
    	var flick2 = setInterval(flicker(),.100); // alternative flicker color and invoke function loop
    	
    	
    					}
    </script>
    
    </head><body>
    
    <div id="scoreboard" onmouseover="flicker('true')">
    <p>GOAL</p>
    </div>
    
    </body></html>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>CHAOS SOCCER MANAGER v1.0</title>
    
    <style type="text/css">
    
    #scoreboard	{
    width:600px;background-color:blue;color:white;margin:0 auto;text-align:center;
    font-size:300%;vertical-align:baseline;padding:50px 0;
    }
    </style>
    
    <script type="text/javascript">
    var flick,countdown=10;
    
    function flicker(timer)	{
     clearTimeout(flick);
     document.getElementById("scoreboard").setAttribute('style','background-color:blue;color:white;'); // sets flicker colors
     flick = setTimeout(function(){ styles(); },100); // begins the flicker and sends to styles function
    
    						}
    function styles()	{
    
    	document.getElementById("scoreboard").setAttribute('style','background-color:white;color:blue;');
    	countdown--;
    	if (countdown>-1) flick = setTimeout(function(){ flicker(); },100); // alternative flicker color and invoke function loop
    
    
    					}
    </script>
    
    </head><body>
    
    <div id="scoreboard" onmouseover="flicker('true')">
    <p>GOAL</p>
    </div>
    
    </body></html>

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    sniperman (06-30-2009)

  4. #3
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    Thanks, it worked perfectly.

    it just goes to show how far i have to go to learn good fluid code.

    humbled.

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
  •