Document All question

@sriderAug 02.2005

I get an odd reaction when the for loop(s) runs in selected(). The goal is to access previously selected items and change their className to child. With the for loop taken out, everything works as expected. Padding and other (fascinating) issues can be seen in IE, Netscape, Firefox and Opera.

<html>
<body>
<script language=”javascript”>
<!–
function navagation(pValue){
if(document.getElementById(pValue).style.display==”none”){
document.getElementById(pValue).style.display=””
}else{
document.getElementById(pValue).style.display=”none”;
}
}

function selected(pValue){

// — problem area — //
if(document.layers){
for(var i=0; i<document.layers.length-1; ++i){
if(document.layers~~[i]~~.className=”selected_child”){
document.layers~~[i]~~.className=”child”;
//alert(i);
}
}
}else{
for(var i=0; i<document.all.length-1; ++i){
if(document.all~~[i]~~.className=”selected_child”){
document.all~~[i]~~.className=”child”;
//alert(i);
}
}
}
// — problem area — //

<td width=”100%” id=”main0″ onClick=’navagation(“main0_sub”);’ style=”color: #EF3E34; padding-left: 12px;”>Parent0</td>

</tr><tr>
<td width=”100%” id=”main0_sub” style=”display: none;”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr><td width=”100%”><a id=”Parent0_Child0″ class=”child” onclick=’selected(“Parent0_Child0″);’ href=”#”>Parent0_Child0</a></td></tr> <tr><td width=”100%”><a id=”Parent0_Child1″ class=”child” onclick=’selected(“Parent0_Child1″);’ href=”#”>Parent0_Child1</a></td></tr> <tr><td width=”100%”><a id=”Parent0_Child2″ class=”child” onclick=’selected(“Parent0_Child2″);’ href=”#”>Parent0_Child2</a></td></tr> <tr><td width=”100%”><a id=”Parent0_Child3″ class=”child” onclick=’selected(“Parent0_Child3″);’ href=”#”>Parent0_Child3</a></td></tr>

</table> </td>

</tr><tr>

<td id=”main1″ style=”color: #EF3E34; padding-left: 12px;”>Parent1</td>

</tr>
</table>

</body>
</html>

to post a comment

JavaScript

13 Comments(s) _↴

@KorAug 03.2005 — #the problem is that [b]document.all[/b] is an IE only reference and [b]document.layers[/b] is an NS4-NS6 only reference, so that neither Opera nor Mozilla or NS7+ will run the code

If you need a generic reference for all the tag elements on the document (similar with document.all or document.layers), you may use

document.getElementsByTagName('*')

it works in IE5.5+, Mozilla, Opera... in all the modern browsers

@sriderauthorAug 03.2005 — #Thanks! That was just the peice I needed.

function selected(pValue){

var a=document.getElementsByTagName("a");

for(var i=0; i<a.length; ++i){

a[i].className="child";

}

document.getElementById(pValue).className="selected_child";

}

@KorAug 03.2005 — #for(var i=0; i<a.length; i[color=red]++[/color]){

@KorAug 03.2005 — #and, in your case, as you have probably a lot of [b]a[/b] elements on the document, you may use the inverse loop, to speed the circle:

for(var i=a.length-1; i>=0; i--){

@sriderauthorAug 03.2005 — #What should I use to access elements with the same name?

<td width="100%" id="main" onClick='navagation("main0_sub");' style="color: #EF3E34; padding-left: 12px;">Parent0</td>

<td width="100%" id="main" onClick='navagation("main1_sub");' style="color: #EF3E34; padding-left: 12px;">Parent1</td>

@KorAug 03.2005 — #elements must [b]not[/b] have the same id. ID is unique. Why do you need to give them the same id? (take care, name and id are different things). You may give them an arbitrary attribute (foo="blah") and circle to check which element has that funny attribute, if you want... But... why to do that?

@sriderauthorAug 03.2005 — #Sorry... I have name element set the same. I found getElementsByName and it works in Netscape and Firefox but IE and Opera is returning zero length from document.getElementsByName("main").length.

@KorAug 03.2005 — #document.getElementsByName(name) should work, but it is a collection (same as an array) You need the index to get each element

@sriderauthorAug 03.2005 — #I was able to work around it by modifying it a little.

var td=document.getElementsByTagName("td");

for(var i=0; i<td.length; i++){

if(td[i].className=="main"){

td[i].style.display="none";

}

}

@KorAug 03.2005 — #you may use compounded reference as well. Give your table an id, let's say id="mytab", and the cells collection will be

var allTD = document.getElementById('mytab').getElementsByTagName('td')

@uraniumdeerAug 14.2005 — #is it possible to give a "<tr>" or a "<td>" element a name?

@JPnycAug 14.2005 — #Opera used to support doc.all. when did it cease to? I mean how many versions back?

@felgallAug 14.2005 — #Version 7.6 definitely supported it. I am not sure about version 8.

Since document.all is only required to support IE4 and less than 1 person in 10000 runs that browser any more there is no reason why any modern browser would need to support it.

Also in #JavaScript _↴

hands-free web page slide show (help)[RESOLVED] help with AJAX list and saving results help with password

Success!

Help @srider spread the word by sharing this article on Twitter...

Tweet This

Document All question

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴