Jump to content

make several divs flash on and off


driz
 Share

Recommended Posts

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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";  }}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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".

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...