How to interate over DIVs?

B

brett

Only the first <div> executes in the following code. I'd like the
second to execute as well. This code is dynamically generated so I
won't know exactly how many <div> tags will be needed. If they can all
use the same ID/Name that shouldn't be a problem. Also, instead of
using a button, I'll execute fadetext() on page load.

I've posted a suggestion below the code from the sytelsheets group,
which involves arrays and looping that I'd like help with.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<title>Untitled</title>
</head>

<body>
<script type="text/javascript">
/* grays
RGB(184,184,184) #B8B8B8
RGB(192,192,192) #C0C0C0
RGB(200,200,200) #C8C8C8
RGB(208,208,208) #D0D0D0
RGB(216,216,216) #D8D8D8
RGB(224,224,224) #E0E0E0
RGB(232,232,232) #E8E8E8
RGB(240,240,240) #F0F0F0
RGB(248,248,248) #F8F8F8
RGB(255,255,255) #FFFFFF
*/
hex=224 // Initial color value.

function fadetext(){
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById("sample").style.color=
"rgb("+hex+","+hex+","+hex+")";
//setTimeout("fadetext()",20);
}
}

</script>

<div id="sample" style="width:100%"><h3>John slowly faded into
view</h3></div>
This area will not fade out.<br>
<div id="sample" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<button onClick="fadetext()">Fade Text</button>

</body>
</html>


This suggestion came from the sytelsheets group. This is what I'm
wondering how to do - the array and looping part. Any suggestions?

Thanks,
Brett

---------------

Well they can't.
IDs must be unique and NAME is not a valid attribute for DIVs.


Give them all the same CLASS. You can then use
getElementsByTagName('DIV') to create an array of all the DIVs in the
page and then go through that array checking that the .className
property matches the class you want to apply the fade to. Further
questions on the DOM/JavaScript aspects would be better asked in
comp.lang.javascript
 
M

Martin Honnen

brett said:
Only the first <div> executes in the following code. I'd like the
second to execute as well. This code is dynamically generated so I
won't know exactly how many <div> tags will be needed. If they can all
use the same ID/Name that shouldn't be a problem.
<div id="sample" style="width:100%"><h3>John slowly faded into
view</h3></div>
This area will not fade out.<br>
<div id="sample" style="width:100%"><h3>Another fade occurs
here.</h3></div>

The id attribute value of an element should be unique in the HTML
document so what you have is not a good idea.

As for iterating over div elements, you can find elements by their tag
name as follows:
var divs;
if (document.getElementsByTagName &&
(divs = document.getElementsByTagName('div'))) {
for (var i = 0; i < divs.length; i++) {
// access divs here
}
}
 
B

brett

I have this working now in IE6, Firefox, and NS7. I'm not checking for
browser version. I'm just doing this:
document.getElementById(nodeObjectImg).style.MozOpacity=.20;
document.getElementById(nodeObjectImg).filters.alpha.opacity=15;

No errors are being thrown. Is the browser checking necessary? What
would that look like?

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script type="text/javascript">
hex=224 // Initial color value.

function fadetext(){
var nodeObjectTag
var nodeObjectImg
for (var i = 1; i < 3; i++)
{
nodeObjectTag = "sample"+i;
document.getElementById(nodeObjectTag).style.color=
"rgb("+hex+","+hex+","+hex+")";
}
i=1
for (var i = 1; i < 2; i++)
{
nodeObjectImg = "imgsample"+i;

document.getElementById(nodeObjectImg).style.MozOpacity=.20;
document.getElementById(nodeObjectImg).filters.alpha.opacity=15;

}
}
</script>

<div id="sample1" style="width:100%"><h3>John slowly faded into
view</h3></div>
<a href="x">Here is a problem link</a><br>
<!--style="filter:alpha(opacity=100)"
crossobj.style.MozOpacity-->
<img src="http://www.google.com/images/logo.gif" alt=""
name="imgsample1" id="imgsample1" border="0"
style="filter:alpha(opacity=100);-moz-opacity:1"><br>
<div id="sample2" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<br>
<a href="x">Here is another problem link</a>
<br><br>
<button onClick="fadetext()">Fade Text</button>

</body>
</html>


Thanks,
Brett
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top