I need to be able to hide/show a layer on the click of a button
I can do that easily enough but I need the next layer below it to move to where the hidden one was.
Printable View
I need to be able to hide/show a layer on the click of a button
I can do that easily enough but I need the next layer below it to move to where the hidden one was.
Try something like this. It'd only work if the browser is complient with getElementById, try changing it all eg. document.all() for version 4 browsers.
<html>
<head>
<title>Change Layers</title>
<script language="JavaScript" type="text/javascript">
<!--
function changeLayer(){
if (document.getElementById('layer1').left){ // find out left position
var lef = document.getElementById('layer1').left;
}else if (document.getElementById('layer1').pixelLeft){
var lef = document.getElementById('layer1').pixelLeft;
}else if (document.getElementById('layer1').offsetLeft){
var lef = document.getElementById('layer1').offsetLeft;
}
if (document.getElementById('layer1').top){ // find out top position
var to = document.getElementById('layer1').top;
}else if (document.getElementById('layer1').pixelTop){
var to = document.getElementById('layer1').pixelTop;
}else if (document.getElementById('layer1').offsetTop){
var to = document.getElementById('layer1').offsetTop;
}
document.getElementById('layer1').style.visibility = 'hidden'; // make layer1 hidden
document.getElementById('layer2').style.left = lef; // set layer2 position to where layer1 used to be
document.getElementById('layer2').style.top = to;
}
//-->
</script>
</head>
<body>
<div id="layer1" style="position:absolute; top:10px; left:10px; width:200px; height:200px">This is layer one</div><br>
<div id="layer2" style="position:absolute; top:300px; left:10px; width:200px; height:200px">This is layer two</div><br>
<input type="button" onclick="javascript:changeLayer()" value="Click Me!">
</body>
</html>
Hope this helps. If you have anymore questions dont hesitate to ask:)
Thanks for the code
I had to modify it so I could toggle visibility and push layer2 back down the page but yeah, it does the job! :)
Thanks
Woah!
I've just noticed that I need to have absolute positions specified
I'd rather not do that because the contents of layer1 will be dynamic (it's going to be part of a JSP)
Is there any way around that?
fixed it now! :)