PDA

View Full Version : Z-Index for DIVs



ken_shoti
May 27th, 2007, 03:19 PM
i wonder if there's a way to do this...
imagine that Divs are sets of windows like in windows xp...


<div style=visibility:hidden;position:absolute;top:1;left:1;width:200;height:200;background:red id=win1>Window 1</div>

<div style=visibility:hidden;position:absolute;top:1;left:1;width:200;height:200;background:green id=win2>Window 2</div>

<div style=visibility:hidden;position:absolute;top:1;left:1;width:200;height:200;background:yellow id=win3>Window 3</div>

<br><br><br><br><br><br><br><br><br><br><br><br>
<span onclick=win1.style.visibility='visible'>Show Window 1</span><br>
<span onclick=win2.style.visibility='visible'>Show Window 2</span><br>
<span onclick=win3.style.visibility='visible'>Show Window 3</span><br>

clicking from Show Window 1 to Show Window 3 produces somewhat like showing windows in WinXp...but clicking Show Window 3 going backwards to Show Window 1 doesn't ...it seems i lack the z-index...

my question is...is there a way for the browser to know and automatically set its z-index, based on which link i clicked first...in simple explanation...the window will show once it's clicked, whatever the order in clicking the links

Mr J
May 27th, 2007, 07:04 PM
Try this example


<html>
<head>
<title></title>

<script type="text/javascript">

lastId=""

function change_zIndex(id){

childDivs=document.getElementById("main").getElementsByTagName("DIV")

topLevel=childDivs.length

currentEl=document.getElementById(id)
currentEl.style.zIndex=topLevel

if(lastId!=""&&lastId!=id){
document.getElementById(lastId).style.zIndex=""
}

lastId=id

}

</script>

<style type="text/css">

#main div{position:absolute; left:0px; top:0px; width:100px; height:100px}

</style>

</head>
<body>

<a href="#null" onclick="change_zIndex('d1')">Show Div 1</a><BR>
<a href="#null" onclick="change_zIndex('d2')">Show Div 2</a><BR>
<a href="#null" onclick="change_zIndex('d3')">Show Div 3</a><BR>
<a href="#null" onclick="change_zIndex('d4')">Show Div 4</a><BR>

<div id="main" style="position:relative">
<div id="d1" style="background-color:green">Div 1</div>
<div id="d2" style="background-color:yellow">Div 2</div>
<div id="d3" style="background-color:red">Div 3</div>
<div id="d4" style="background-color:blue">Div 4</div>
</div>

</body>
</html>