Browser Detects - Layers, GetElement, All

[leemundie]

Hi, Thanks for any help in advance

I'm using the following JS to drop/show content that is hidden:

function expandDiv(tahw) {

what = tahw + "_menu"

if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "";
} else {
document.getElementById(what).style.display = "none";
}

}

where:

<div class="LftNavDrop" id="LeftNav"><a href="javascript:
expandDiv('leftnav1')" onClick="javascript:
expandDiv('leftnav1')">Etiam Accumsan<br />&amp; Curabitur
Viverra</a></div>
<div class="LftNavDropped" style="display: none" id="leftnav1_menu">
Content...
</div>

(Which works in IE only)

But would really like for the JS to test conditions for ALL browsers
based on/or something similar to:
if (document.layers)
{ document.layers['DIV'];

else if (document.all)
{ document.all.tags("DIV"); alert('Works in IE');}

else if (document.all || document.layers)
{ document.all.tags("DIV");}

else if (document.getElementByTag && document.all)
{ document.getElementById("DIV");}

else if (document.getElementByTag && !document.all)
{ document.getElementById("DIV");}

else if (document.getElementByTag)
{ document.getElementById("DIV");}
else
{ alert('Sorry, One of our main navigation systems does not support
your browser.'); }

}
Please, can anyone help me fix this above script so that it will work?

Regards

Lee

[RobG]

le*******@gmail.com wrote:

Hi, Thanks for any help in advance

I'm using the following JS to drop/show content that is hidden:

function expandDiv(tahw) {

what = tahw + "_menu"

if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "";
} else {
document.getElementById(what).style.display = "none";
}

}

where:

<div class="LftNavDrop" id="LeftNav"><a href="javascript:
expandDiv('leftnav1')" onClick="javascript:
expandDiv('leftnav1')">Etiam Accumsan<br />&amp; Curabitur
Viverra</a></div>
<div class="LftNavDropped" style="display: none" id="leftnav1_menu">
Content...
</div>

(Which works in IE only)

But would really like for the JS to test conditions for ALL browsers
based on/or something similar to:
if (document.layers)
{ document.layers['DIV'];

else if (document.all)
{ document.all.tags("DIV"); alert('Works in IE');}

else if (document.all || document.layers)
{ document.all.tags("DIV");}

else if (document.getElementByTag && document.all)
{ document.getElementById("DIV");}

else if (document.getElementByTag && !document.all)
{ document.getElementById("DIV");}

else if (document.getElementByTag)
{ document.getElementById("DIV");}
else
{ alert('Sorry, One of our main navigation systems does not support
your browser.'); }

}
Please, can anyone help me fix this above script so that it will work?

Have a browse of the group FAQ, particularly:

<URL:http://www.jibbering.com/faq/#FAQ4_15>

Check out the DynWrite stuff a very simple version is place the
following at the start of a script element outside any function:

if( !document.getElementById ){
if ( document.all ){
document.getElementById = function(id){return document.all[id];};
} else if ( document.layers ) {
document.getElementById = function(id){return document.layers[id];};
} else {
return null;
}
}

But that may not provide all the functionality you require. Also,
names and IDs must not clash and ID's must be unique in the page. The
above link warns:

"...document.all collection does not have exactly analogous behaviour
with the document.getElementById method. If multiple elements have
the same ID (or share an ID with the NAME of other elements) then
document.all returns a collection instead of an individual element,
while document.getElementById only ever returns an individual
element or null. However, ID attributes are supposed to be unique to
an HTML page if that page is valid HTML 4 so multiple identical IDs
should not be a problem. The issue with IDs coinciding with NAMEs
remains, though it would not be good HTML design to provoke that
problem."
The idea is to test only for browsers that don't support getElementById
(which by now must be a very small proportion of those in use) so that
those that do support it are left alone.
--
Rob

[Richard Cornford]

RobG wrote:
<snip>

if( !document.getElementById ){
if ( document.all ){
document.getElementById = function(id){
return document.all[id];
};
} else if ( document.layers ) {
document.getElementById = function(id){return
document.layers[id];}; } else {
return null;
}
}

<snip>

Part of the reason for creating an emulation of -
document.getElementById - is to avoid having to repeatedly feature
detect it prior to its use. You have created it so you know that it will
be in the environment from then on.

This has the advantage of providing an efficiency gain because you do
the feature detection only once, at the point of creating the emulation,
rather than at each call to the method.

However, in the above example, no document.getElementById - method is
created in the final - else - branch, so code that is not going to error
in calling the emulation is still going to have to feature detect the
method in order not to error-out when calling it. This is best avoided
by including a default:-

document.getElementById = function(){return null;};

- statement in the final branch for when - getElementById - is not
native, but no viable alternative is available. The values returned
from - getElementById - would need to be tested on a per-call bases, but
that should be true anyway as the original method may return null when
it cannot find the element in the DOM.

Richard.