make several divs flash on and off

[driz]

Please look at this page: http://www.simplecandy.com/codex/The mushroom is created using a series of DIV's, I want to add some JS to the page that will make the DIVS that make up the eyes flash white and then back to grey, I want this to happen infinitely.Thanks. x

[jeffman]

To do what you want, you could toggle this visibility attribute of various divs, and have the sequence triggered by setTimeout().Don't forget that animated gifs are always an option.

[Kingy]

Yeah why not make a quick animated gif? :)You'll save yourself so much trouble.If there ain't no fire why try to extinguish something?

[driz]

To do what you want, you could toggle this visibility attribute of various divs, and have the sequence triggered by setTimeout().Don't forget that animated gifs are always an option.

Right If i set the DIVS i want to change to ALL have a class of .eyesI would need them to change from one color to another in a timed interval that loops.Visibility wouldn't work because the float next to each other and so would show the BG of the page, I need them to change color.Can you show code for how to do this? Thanks. x

[justsomeguy]

You'll need a piece of Javascript that runs every second or however long you want that would loop through all of the eye pixels and change the background color of each one. You can use document.getElementsByTagName to get all of your divs or whatever and check the class on each one to see if it's an eye, check what the current background color is, and change it to the other one. You can use setTimeout or setInterval to get it to run every second or however long you want it.

[driz]

Could I have code snippet for an example that I can work from to develop into what I need for my mushroom. x

[justsomeguy]

getElementsByTagName:http://developer.mozilla.org/en/docs/DOM:e...ementsByTagNameTo get the class of an element:var elClass = el.getattribute("class"); elClass = elClass? elClass : el.getattribute("className");setInterval:http://developer.mozilla.org/en/docs/DOM:window.setIntervalAnd the background color for an element is el.style.backgroundColor.

[driz]

I'm really not grabbing this :)Can you give an example? Like create a snippet in which you make a div class change between two colors. x

[justsomeguy]

var divs = document.getElementsByTagName("div");for (var i = 0; i < divs.length; i++){  elClass = divs[i].getattribute("class");   elClass = elClass ? elClass : divs[i].getattribute("className");  if (elClass == "theclass")  {	if (divs[i].style.backgroundColor == "#FFFFFF")	  divs[i].style.backgroundColor = "#000000;"	else	  divs[i].style.backgroundColor = "#FFFFFF";  }}

[driz]

Please check http://www.simplecandy.com/codex/ it's not working?What's the problem? Thanks. x

[jeffman]

justsomeguy gave you exactly what you asked for, which was a way to make a bunch of divs change color. I'm certain he didn't mean for you to paste it right into your script and be done. 1. the color change must take place in a function that can be called over and over.2. the way to call it over and over is with a setInterval() or setTimeout() method. setInterval() is probably the best, since you want it to run forever.

[justsomeguy]

There's a link to setInterval examples in my other post. You also need to run this after the page loads, if you just stick it in the head it's not going to find any divs because they haven't been loaded yet.

[driz]

Please visit http://www.simplecandy.com/codex/ againI've added the setInterval and onload, as well as wrapped the original code in a function, but still no flicking? x

[justsomeguy]

According to Firebug, it looks like getAttribute needs to be capitalized.elClass = divs.getAttribute("class"); elClass = elClass ? elClass : divs.getAttribute("className");

[driz]

Yup done that, still not working :S

[justsomeguy]

Add some debugging alert statements to figure out what is going on. Have alerts that show each time the function gets executed, how many divs were found, each time through the loop have it show what the class is, etc. It might be better to install Firebug and then use console.log instead of alert, but as long as you can see what the script is doing.

[driz]

WHAT? :)What is console.log?

[jeffman]

Look at the source, guys. elClass will never = "eyes". It can only match "eyes", since the class is a compound. So replace this:if (elClass == "eyes")with this:if (elClass.match ("eyes") )

[jeffman]

And while we're there, maybe replace this:elClass = divs.getAttribute("class"); elClass = elClass ? elClass : divs.getAttribute("className");with this:elClass = divs.getAttribute("class") || divs.getAttribute("className");I'm in a persnickety mood.

[justsomeguy]

WHAT? What is console.log?

When you're developing Javascript you should be using a Javascript debugger. Firebug is a Javascript debugger for Firefox. Firebug makes an object available called console to interact with Firebug. console.log will write whatever you want to the Firebug console so that you can inspect it, it's more useful than using alert because alert requires interaction and because the console will keep a record of everything that was sent to the log. console.log will also give more information about an object, if you send an object to alert it will just say something like "object", with the console you can look at that object in the DOM, all of the properties and methods that are on it. It's just a useful way to debug. If you had written what the class was that the loop was finding then you would have found what DD is talking about.

[driz]

I tried using Firebug, man that thing is complicated.I'm not sure what the problem is, I have all the relevant code right?

[justsomeguy]

Yeah, minus the changes from DD. Firebug isn't all that complicated, or at least you don't need to use all of it. Add console.log statements to the code like this:

function flashText() {  var divs = document.getElementsByTagName("div");    console.log(divs.length + " divs found");  for (var i = 0; i < divs.length; i++)  {	elClass = divs[i].getAttribute("class");	elClass = elClass ? elClass : divs[i].getAttribute("className");		console.log("class: " + elClass);	if (elClass == "eyes")	{		  console.log("match found");	  	  if (divs[i].style.backgroundColor == "transparent")		divs[i].style.backgroundColor = "#FFFFFF;"	  else		divs[i].style.backgroundColor = "transparent";	}  }}

To see the output, open Firebug and click on the Console tab, you'll see the output messages there. DD is probably right with needing to match the class name, if you run that you'll probably see it printing the classes out but none of them will match "eyes".