PDA

View Full Version : Create Flicker Effect with setAttribute loop



sniperman
06-30-2009, 10:03 AM
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.


<!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>

vwphillips
06-30-2009, 10:20 AM
<!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>

sniperman
06-30-2009, 11:19 AM
Thanks, it worked perfectly.

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

humbled.