PDA

View Full Version : Move a layer to the top using z-index and onClick



rolfjb
Sep 16th, 2009, 06:20 PM
Hello friends,

I was glad to find this forum and especially the post about newbies like me being welcome and not flamed and laughed at. Thanks!

I want to use z-index to place several layers on top of each other.

Then I want the layer that a visitor clicks on to move to the top.

This is to avoid having to scroll at all. There will of course be text and information in the layers just like pages or posts on a blog.

I thought it would be possible to achieve this by changing the value of the z-index of the clicked layer.

I found this example in a book but it seems not to work.

Here is the code:

[CODE]

<HTML>
<HEAD>
<STYLE type="Text/css">
#layer1 {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 100px;
z-index: 0;
background-color:red}
#layer2 {
position: absolute;
top: 75px;
left: 90px;
width: 150px;
height: 100px;
z-index: 10;
background-color:yellow}
</STYLE>
</HEAD>
<BODY>
<div id="layer1" onClick="document.getElementById('layer1').style.zindex='20'"></DIV>
<div id="layer2" onClick="document.getElementById('layer1').style.zindex='0'"></DIV>
</BODY>
</HTML>

[CODE]

This displays the yellow layer on top of the red but nothing happens when I click on the red. I expected it to move to the top.

I would like to use more than two layers - at least five but it would be good if there is a general solution.

I would really appreciate some help on this. It would solve a big issue for me.

Of course I don't mind if there is another way to do it than by using z-index but I thought it was a pretty clever idea ...:)

For convenineance I attached the code in a text file.

Best wishes

zip_000
Sep 16th, 2009, 07:52 PM
Try capitalizing the "i" in "zindex".


<div id="layer1" onClick="document.getElementById('layer1').style.zIndex='20'"></DIV>
<div id="layer2" onClick="document.getElementById('layer1').style.zIndex='0'"></DIV>

I never thought of navigation that way, could be neat.

rolfjb
Sep 16th, 2009, 09:40 PM
That was it!

Thank you very much!

Man, I am embarrassed! I should really have seen that!

I think it is a very good way to avoid scrolling which makes me a little "dizzy".

Now that this issue is resolved I will test my idea and see if it really works. I will then post about it again.

Best wishes!

Rolf