Preserved Topic: Changing z-index on multiple divs

I want to write my own show/hide or change z-index type of script. I have been reading the tutorial at Dynamic Duo and have a pretty good idea how to write the show/hide script for one layer, or for changing the z-index of a layer to bring it above another one. But, I don't quite get how to do it with multiple layers at once.

Lets say I have a page with five stacked layers, how do I hide four at the same time as I make one visible?

If anyone knows of any good learning opportunities in this area, please let me know.

Thanks

- Resolutions, Of All My Fruitless Searches -

This is an example that I made for Pugzly: http://www.max.co.yu/ozone/multi_divs.html

Mr. Max

If I had any doubts that you were a god, they're gone now.

Give me a little while to figure out the code, and I'll probably be back for a question and answer session.

Thanks lots



- Resolutions, Of All My Fruitless Searches -

Thanks again for the code Mr. Max

The only thing I don't really understand in your code is:

if (document.getElementById) {
return document.getElementById(name).style;

I'm assuming it's browser specific, but I don't know. I believe the other to if statements:

if (document.all) {
return document.all[name].style;
} else
if (document.layers) {
return document.layers[name];
}

refer to IE and NN, but I don't know what the first one is for.

Thanks again for the code, and the education.

- Resolutions, Of All My Fruitless Searches -

butcher,

The "document.getElementById" is for Netscape 6. For instance this is a quick way to distinguish between IE5, NN4, and NN6:

IE5=NN4=NN6=false
if(document.all)IE5=true
else if(document.layers)NN4=true
else if(document.getElementById)NN6=true

mr.maX's code is handling the browser differences in his getObj function. This is a very elegant way to do it because you only have to worry about the differences in one place. No matter how you get there these are the syntaxes for changing a div's visibility for each browser. Also from my testing, Opera will work just like IE5 in this case:

NN4: document.mydiv.visibility="hidden"

NN6: document.getElementById("mydiv").style.visibility="hidden"

IE5,OP5: document.all.mydiv.style.visibility="hidden"

mr.maX,

Speaking of Opera, I took a look at your page in Opera 5 and something wierd happened. The colors of the first two pages didn't show.

page 1 shows the text but a white background.
page 2 shows the text but a white background.
page 3 shows the yellow background like it should.

Any ideas? I don't get it. I know you've used Opera probably more than anyone else around these parts.

Thanks Bugs

I kinda figured that it was browser related, but couldn't find it in my JavaScript reference to make sure exactly what it was for. Now I know why... books to old.

Thanks for taking the time to clarify it for me.

- Resolutions, Of All My Fruitless Searches -

Bugimus,

For some reason, Opera didn't parse simplified "background" CSS property, so I've changed it to "background-color" and it works fine now...

And speaking of document.getElementById() function, that's not only Shitscape 6 way for working with layers. It's the W3C DOM way, and as that it works in all new browsers (i.e. it works in IE5.5+, Opera5+, Mozilla, etc.) One more thing, document.all will work in Opera only if it is set to emulate IE, otherwise document.getElementById() is used...

Good point, it is the W3C DOM way and that is really how we should all be tailoring our code for.

It's an interesting feature that Opera allows you to identify as Mozilla, IE, and itself. I checked out that option as soon as I read your reply.

I want to support Opera but I'm still a little concerned about it's compatibility with the standards. Have you been coding for it in most of your scripts?

Opera has a *decent* support for standards. There's only one thing that it still doesn't support and that is dynamic content changing (i.e. innerHTML). Also, it has one very annouying behavior when you resize MDI window, and that is that it will reset layers to their initial state (i.e. it will hide layers that were not originally visible). Apart from this, you can do some cool stuff with it, of course you can't do everything that you can do in IE, but it's a good for start (and it can only get better in the future)...

Well, I noticed that *some* of my scripts work in Opera but my main page is a complete bust.

I will definitely start trying to accomodate Opera from now on but only on a "back-burner" basis. IOW, I'm not going to go out of my way to make up for any Opera deficiencies with respect to W3C but I will code to the standard and where Opera fails I'll try to redirect to an alternate page if possible.