referencing an array of <div> elements in firefox

**commercial** · Jul 23 '05, 08:02 PM

Re: referencing an array of <div> elements in firefox

I think you are prematurely forgiving on firefox
for existing implementations undiscovered.

ECMA scripts are basically javascript and that [ECMA] is

available with all latest browsers, let's say top 4.

"'arrays' proprietary to IE?I"

NO, do you homework.

<hibernate@digi verse.net> wrote in message
news:1117004470 .572415.187220@ g14g2000cwa.goo glegroups.com.. .[color=blue]
> I'm somewhat new to javascript/DHTML, and this problem has been
> plaguing me. I have made an 'array' of <div> tags within my html
> document like so:
>
> <div id="menu"> menu1 </div>
> <div id="menu"> menu2 </div>
> <div id="menu"> menu3 </div>
> <div id="menu"> menu4 </div>
>
> <span onclick="showOr Hide('menu[0]')"> show/hide menu1 </span>
> <span onclick="showOr Hide('mennu[1])"> show/hide menu2 </span>
>
>
> I want to be able to show/hide a menu by clicking on the specified
> area...
> in IE6 this is easily done with this javascript:
>
> function showOrHide(id){
> var myObject = eval(id);
> if( myObject.style. display == 'none') myObject.style. display =
> 'block';
> else myObject.style. display = 'none';
> }
>
> this allows me to hide/show the menus as needed (my code is a little
> more complicated, including an 'API' to make my page 'work' on multiple
> browsers, but this is the basic idea in essence)
>
> what is the correct way to reference the <div> array in firefox?? I've
> tried multiple ways such as document.getEle mentById(), etc... but I
> just can't figure it out, is it even possible? are these element
> 'arrays' proprietary to IE? I know I'll feel really lame when I find
> out, but i've searched for hours and haven't found anything close to an
> answer.
>[/color]

**Duncan Booth** · Jul 23 '05, 08:02 PM

Re: referencing an array of <div> elements in firefox

wrote:
[color=blue]
> I'm somewhat new to javascript/DHTML, and this problem has been
> plaguing me. I have made an 'array' of <div> tags within my html
> document like so:
>
> <div id="menu"> menu1 </div>
> <div id="menu"> menu2 </div>
> <div id="menu"> menu3 </div>
> <div id="menu"> menu4 </div>
>
> <span onclick="showOr Hide('menu[0]')"> show/hide menu1 </span>
> <span onclick="showOr Hide('mennu[1])"> show/hide menu2 </span>[/color]

The id attribute must be unique in your document. You are not allowed to
have two tags with the same id. Give your div tags each a separate id:

<div id="menu1"> menu1 </div>
<div id="menu2"> menu2 </div>
<div id="menu3"> menu3 </div>
<div id="menu4"> menu4 </div>

<span onclick="showOr Hide('menu1')"> show/hide menu1 </span>
<span onclick="showOr Hide('menu2')"> show/hide menu2 </span>
[color=blue]
>
> function showOrHide(id){
> var myObject = eval(id);
> if( myObject.style. display == 'none') myObject.style. display =
> 'block';
> else myObject.style. display = 'none';
> }
>[/color]
Don't use eval here, there are very few situations where you should even
consider using eval, and this isn't one of them. Use the methods supplied
for accessing elements: getElementById is what you want.

Don't set the div's style explicitly to block: you are better to clear the
overriding style so that you get the default style back again (then you can
use the same function on inline or table elements), or you could set a
className.

function showOrHide(id){
var myObject = document.getEle mentById(id);
if (myObject) {
myObject.style. display = myObject.style. display ? '' : 'none';
}
}
[color=blue]
> this allows me to hide/show the menus as needed (my code is a little
> more complicated, including an 'API' to make my page 'work' on multiple
> browsers, but this is the basic idea in essence)[/color]

Simply following the standards will get a lot of your code working on
multiple browsers without any special API. The best thing you can do is to
develop first for browsers which are closer to being standards compliant
(e.g. Mozilla/Firefox), and then treat IE as the exception. Apart from
anything else this means the initial development will be much easier as you
will have access to decent debugging tools.

If you wish you can add checking for support for getElementById, but that
depends on how desperate you are to support users of extremely old
browsers.

**hibernate@digiverse.net** · Jul 23 '05, 08:02 PM

Re: referencing an array of <div> elements in firefox

Thank you Rleib, I need to look further into that ECMA, I think your
comment answers the question of why IE6 treats duplicate tag IDs as
arrays while Mozilla does not. I am aware that 'arrays' in general are
not proprietary to IE. ;o)

Thank you Duncan for your comment too. I do appreciate the debuging
tools available to mozilla/firefox, it's not even worth comparing to
the excuse of a debugger that IE6 offers. So I develop on Firefox first
(lesson learned relatively quickly there. lol), however I discovered by
accident that duplicate ID's can produce arrays in IE, and I was trying
to take advantage of that feature (and it's length property). That
example was a quick (dirty) example that I knew would work - to convey
the idea. :o)

Thanks for the help! I guess I'll stop looking for shortcuts and go do
it the right way now...

Barend.

**Duncan Booth** · Jul 23 '05, 08:02 PM

Re: referencing an array of <div> elements in firefox

wrote:
[color=blue]
> Thank you Duncan for your comment too. I do appreciate the debuging
> tools available to mozilla/firefox, it's not even worth comparing to
> the excuse of a debugger that IE6 offers. So I develop on Firefox first
> (lesson learned relatively quickly there. lol), however I discovered by
> accident that duplicate ID's can produce arrays in IE, and I was trying
> to take advantage of that feature (and it's length property). That
> example was a quick (dirty) example that I knew would work - to convey
> the idea. :o)[/color]

If you want to do the equivalent in a standard compliant way then you
can give your div elements a class.

<div class="menu"> menu1 </div>
<div class="menu"> menu2 </div>
<div class="menu"> menu3 </div>
<div class="menu anotherclass"> menu4 </div>

<span onclick="showOr Hide(menus, 0)"> show/hide menu1 </span>
<span onclick="showOr Hide(menus, 1)"> show/hide menu2 </span>

And then in your script:

function getElementsByBa seTagClass(base , tag, className) {
var classPat = new RegExp('\\b'+cl assName+'\\b');
var nodes = base.getElement sByTagName(tag) ;
var matching = [];
for (var i = 0; i < nodes.length; i++) {
if (classPat.test( nodes[i].className)) {
matching.push(n odes[i]);
}
}
return matching;
}
var menus = getElementsByBa seTagClass(docu ment.body, 'div', 'menu');

function showOrHide(tags , index){
if (tags && index < tags.length) {
var style = tags[index].style;
style.display = style.display ? '' : 'none';
}
}

The main disadvantage is this could be slowish if you have a lot of tags to
search which is why it may be best to precalculate the array. Remember also
that you can give a tag several classes, so this doesn't stop you using
class to style your div's as well as using it for lookup.

The other drawback is that the assignment to menus has to be done after the
page has loaded, so either in a window.onload function or in inline
<script> at the end of the page (but if it is inline you can't put the
functions in a separate file, so don't do that).

**Barend** · Jul 23 '05, 08:17 PM

Re: referencing an array of <div> elements in firefox

I have devised a system similar to the way you pointed out. I used
dates instead of a regular expression, since the menu names are roughly
based on dates and everything I need can be calc'd from that.. this
worked for me, and is probably a little less intensive to process (just
a guess). Thanks for the mention of the window.onload function, I ran
into a problem with calling an onload from the <body>, this solved it
perfectly.

Thanks for the help!

Barend

referencing an array of <div> elements in firefox

referencing an array of <div> elements in firefox

Comment

Comment

Comment

Comment

Comment