Need cross-browser code for layers

0 views
Skip to first unread message

Pete

unread,
Aug 13, 1999, 3:00:00 AM8/13/99
to
What is the cross-browser equivalent of:

for (i=0; i< document.layers.length; i++) {

document.layers[i].visibility= "hidden";
}

Can't seem to get it right for IE.

Thanks in advance,

Pete

David Flint

unread,
Aug 13, 1999, 3:00:00 AM8/13/99
to
IE doesn't support layers.... use positioned Cascading Style Sheets instead

--
David Flint
antispa...@springnet1.com
(remove "antispam-" to reply directly to me)
Reply to Group please

Pete <pdem...@tribweb.com> wrote in message
news:pF2t3.992$CR1.1...@news.sgi.net...

Pete

unread,
Aug 13, 1999, 3:00:00 AM8/13/99
to
I haven't been using the LAYER tag, I have been using syntax like this:

obj= eval("document." + coll + LayerName + styleObj);
obj.visibility = "visible";

but what I want to do is make a function that hides all of the "layers" that
I have on the page at the same time, without specifying each div id
individually.

I figured out how to do it using the layers array in Nav, but I would gladly
get rid of that line of code if I could figure out the cross-platform
coding. Is there a document.all... array for div tags in IE?

Thanks,
Pete

David Flint wrote in message ...

Norman Bates

unread,
Aug 13, 1999, 3:00:00 AM8/13/99
to
Well, if all your layers are DIVs, and you want to make the same change to
the same property in all of them, you can try this:

arrDIV = document.all.tags("DIV");
for (i=0; i<arrDIV.length; i++) {
eval('document.all.' + arrDIV[i] + '.style.visibility = "hidden"');
}

Of course, any layers that are not DIVs will not be included in the array.
You can also modify it to work only with layers within the same class, etc.

Norman

..

unread,
Aug 13, 1999, 3:00:00 AM8/13/99
to
Pete wrote:

> What is the cross-browser equivalent of:
>
> for (i=0; i< document.layers.length; i++) {
> document.layers[i].visibility= "hidden";}
>
> Can't seem to get it right for IE.

Nothing like crap responces in the NG that solve nothing.

Your basic example envolves the manipulation of he visivility attribute
, so although
the solution I mention addresses more, it does not address all the
variances.

In NS the path to a layer is document.layers['yourLayer']
In IE the path to a layer is document.all['yourLayer']

You can "normalize" these differences with the folling code , with more
code below to normalize yet more differences , yet in this paragraph we
simply make NS's layer array and IE's all array mean the same thing


var isNS =(document.layers)?true:false;

systemLayers =(doument.layers)?eval(document.layers):document.all

Now you have at least achieved a normalization between where NS and IE
store that elusive
layer

systemLayers['yourLayer'] now points to the same flavored object , be it
NS or MSIE

But now in relation to that layer you want to play with the visibility
attribute.
The problem is that in NS , such variables are at
systemLayers['yourLayer'] , while in the MSIE enviroment that path would
be systemLayers['yourLayer'].style

To make them the same , somewher early in your code you say

systemLayers['yourLayer'].CSS =
(isNS)?systemLayers['yourLayer']:systemLayers['yourLayer'].style;


Now you can say something like

systemLayers['yourLayer'].CSS.visibility='hidden';

This will now work for both major browsers , and you can use similar
logic to avoid testing each of
your functions to see which browseer syntax is invoved


--
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=--
--=<[]>=- http://www.drclue.net
--=<[]>=-
--=<[]>=- C++ HTML JavaScript JAVA VRML DHTML
--=<[]>=- CGI NSAPI TCP/IP SQL Sybase Informix (Interest In Oracle)
--=<[]>=- Dr. Clue's famous HTML/CGI guide.
--=<[]>=- http://www.drclue.net/F1.cgi/HTML/HTML.html

Bart Van Hemelen

unread,
Aug 14, 1999, 3:00:00 AM8/14/99
to
On Fri, 13 Aug 1999 20:24:32 -0400, "Pete" <pdem...@tribweb.com> said
in comp.lang.javascript about "Need cross-browser code for layers":

>What is the cross-browser equivalent of:
>
>for (i=0; i< document.layers.length; i++) {
>
> document.layers[i].visibility= "hidden";
>}
>
>Can't seem to get it right for IE.

look for the SuperFly demo from MacroMedia... can't remember the
url...

Bart Van Hemelen


--
http://www.e-business-developer.com
b...@e-business-developer.com

David Flint

unread,
Aug 14, 1999, 3:00:00 AM8/14/99
to
Hmmm..... I think I know something that might work.....
1st. Use object/browser detection to determine what the browser is capable
of

// BROWSER DETECTION
var bn = navigator.appName;
var bv = parseFloat(navigator.appVersion);
var IE = (bn == "Microsoft Internet Explorer"); var IE3 = (IE && bv >= 3);
var IE4 = (IE && bv >= 4);
var IE41 = (IE && bv >= 4 && navigator.appVersion.indexOf('MSIE 4.0;') < 0
&& navigator.appVersion.indexOf('MSIE 4.01;') < 0);
var NS = (bn == "Netscape"); var NS3 = (NS && bv >= 3);
var NS4 = (NS && bv >= 4); var NS41 = (NS && bv >= 4.04);
var lr = "";
var sr = "";

// BROWSER FLAGS
var check_layers = (IE41 || NS41) ? 1 : 0;

if (check_layers) {
if (NS) {lr="document.layers"; sr="";}
else {lr="document.all"; sr=".style";}
}

function swap_layer(l,s) {
if (check_layers) {
eval(lr+'['+l+']'+sr+'.visibility="' + s + '"'); // var s = hidden |
visible
}
}

suppose you have a <div id=example> and you want to hide it.... you do this:

swap_layer(example,hide)

now in terms of doing it without specifing all the <div>'s,
use some sort of for loop? - this is the part I'm not sure about
with a loop, you'll need to use some sort of standard naming convention....

<style type="text/css">
#aboutMenu {position: absolute; visibility: hidden;}
#academicsMenu {position: absolute; visibility: hidden;}
#aboutMenu {position: absolute; visibility: hidden;}
#academicsMenu {position: absolute; visibility: hidden;}
#aboutMenu {position: absolute; visibility: hidden;}
#academicsMenu {position: absolute; visibility: hidden;}
</style>

function showAll() {
for (i = 0; i < #ofdivsinpage; i++)

}

--
David Flint
antispa...@springnet1.com
(remove "antispam-" to reply directly to me)
Reply to Group please

Pete <pdem...@tribweb.com> wrote in message
news:Rk3t3.998$CR1.1...@news.sgi.net...


> I haven't been using the LAYER tag, I have been using syntax like this:
>
> obj= eval("document." + coll + LayerName + styleObj);
> obj.visibility = "visible";
>
> but what I want to do is make a function that hides all of the "layers"
that
> I have on the page at the same time, without specifying each div id
> individually.
>
> I figured out how to do it using the layers array in Nav, but I would
gladly
> get rid of that line of code if I could figure out the cross-platform
> coding. Is there a document.all... array for div tags in IE?
>
> Thanks,
> Pete
>
> David Flint wrote in message ...
> >IE doesn't support layers.... use positioned Cascading Style Sheets
instead
> >
> >--
> >David Flint
> >antispa...@springnet1.com
> >(remove "antispam-" to reply directly to me)
> >Reply to Group please
> >

> >Pete <pdem...@tribweb.com> wrote in message
> >news:pF2t3.992$CR1.1...@news.sgi.net...

> >> What is the cross-browser equivalent of:
> >>
> >> for (i=0; i< document.layers.length; i++) {
> >>
> >> document.layers[i].visibility= "hidden";
> >> }
> >>
> >> Can't seem to get it right for IE.
> >>

> >> Thanks in advance,
> >>
> >> Pete
> >>
> >>
> >
> >
>
>

David Flint

unread,
Aug 14, 1999, 3:00:00 AM8/14/99
to
forgot to change some code at the bottom

suppose you have a <div id=example> and you want to hide it.... you do this:

swap_layer('example','hide')

now in terms of doing it without specifing all the <div>'s,
use some sort of for loop? - this is the part I'm not sure about
with a loop, you'll need to use some sort of standard naming convention....
<style type="text/css">

#_0 {position: absolute; visibility: hidden;}
#_1 {position: absolute; visibility: hidden;}
#_2 {position: absolute; visibility: hidden;}
#_3 {position: absolute; visibility: hidden;}
#_4 {position: absolute; visibility: hidden;}
#_5 {position: absolute; visibility: hidden;}
</style>

function showAll() {
for (i = 0; i < 6; i++) {
eval("swap_layer('_"+i+"','visible')")
}
}

Norman Bates

unread,
Aug 15, 1999, 3:00:00 AM8/15/99
to
Nothing like self-appointed experts who don't even bother to read the
question.

The script I posted before will create an array of all divs in your document
(without having to reference each ID explicitly) and allow you to access
their properties. It's IE-only, but since you already know how to do this
in Netscape, creating a cross-browser solution to your problem should be an
easy task

Norman

Norman Bates <NOSPAMcr...@hotmail.com> wrote in message
news:7p2t4q$mmr$1...@bgtnsc02.worldnet.att.net...


> Well, if all your layers are DIVs, and you want to make the same change to
> the same property in all of them, you can try this:
>
> arrDIV = document.all.tags("DIV");
> for (i=0; i<arrDIV.length; i++) {
> eval('document.all.' + arrDIV[i] + '.style.visibility =
"hidden"');
> }
>
> Of course, any layers that are not DIVs will not be included in the array.
> You can also modify it to work only with layers within the same class,
etc.
>
> Norman
>

Steve van Dongen

unread,
Aug 17, 1999, 3:00:00 AM8/17/99
to
".." wrote:
>
[cut]
> systemLayers =(doument.layers)?eval(document.layers):document.all

Is there a reason you use eval() here that I just can't see?

Regards,
Steve

Steve van Dongen

unread,
Aug 17, 1999, 3:00:00 AM8/17/99
to
Pete wrote:
>
> What is the cross-browser equivalent of:
>
> for (i=0; i< document.layers.length; i++) {
>
> document.layers[i].visibility= "hidden";
> }
>
> Can't seem to get it right for IE.
>
> Thanks in advance,
>
> Pete

There's no one-to-one equivalent of the layer collection in IE so you'll
have to use a naming scheme like L1, L2, L3, ... for your layer names.
Also, you can't use the LAYER tag -- use a DIV or SPAN with a STYLE
attribute of position:absolute or position:relative.

var isNav = document.layers ? true : false;
var isIE = document.all ? true : false;

function show(layerName) {
if ( isNav )
document.layers[layerName].visibility = "show";
else if ( isIE )
document.all[layerName].style.visibility = "visible";
}

...

for ( var i=0; i<3; i++ )
show("L"+i);

...

<DIV ID="L1" STYLE="position:absolute">...</DIV>
<DIV ID="L2" STYLE="position:absolute">...</DIV>
<DIV ID="L3" STYLE="position:absolute">...</DIV>


Regards,
Steve

Reply all
Reply to author
Forward
0 new messages