Changing z-index of overlapping layers

[waxy_dan]

Hi,
Sorry if this is a simple question; I've been trawling Google and various forums to no avail.

I've a website designed that uses layers. The layers are initially hidden but appear as the appropriate button is clicked on the navigation bar.

These layers are draggable and, thus, may overlap. I've downloaded and used the code from http://www.walterzorn.com/dragdrop/dragdrop_e.htm to do this.

The code makes sure that the layer the user has clicked on remains on top (so there is a way to do this; I just don't have the JS skills to work it out).

The problem being that the user may end up stacking the layers and everyone I've had test it so far has assumed that clicking on the navigation button again will bring this layer to the front.

So.. Is there any way to build a 'bring to front' option into a webpage using layers?

Let me know if I should include any more information (I could place the pages online)?

Thanks in advance for any help you might be able to give,
-Eoin

[waxy_dan]

I dunno if anybody would be interested but I worked out a solution to this. I'll post an example page if anybody would like to use it?

-Eoin

[holyhttp]

There are 2 ways I know how to bring a layer in the front:
- set its visibility to "visible" if it was hidden and make sure othe layers in the stack are hidden.
- you can change its z-index to give it a higher value of the stack

Option 1
Here is the javascript line of code to make a layer (yourlayerid) visible;
document.getElementById('yourlayerid').style.visibility="visible";

To hide the layer:
document.getElementById('yourlayerid').style.visibility="hidden";

Option 2
You can change the stacking order by giving the selected layer (yourlayerid) a higher z-index say 100 and setting other layer to a lower z-index value.


document.getElementById('yourlayerid').style.zIndex=100;

Hope this helps