|
-
Mar 5th, 2002, 05:57 AM
#1
Thread Starter
Frenzied Member
Hide a layer
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.
-
Mar 5th, 2002, 09:17 AM
#2
Fanatic Member
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
-
Mar 5th, 2002, 09:54 AM
#3
Thread Starter
Frenzied Member
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
-
Mar 5th, 2002, 10:01 AM
#4
Thread Starter
Frenzied Member
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?
-
Mar 5th, 2002, 11:22 AM
#5
Thread Starter
Frenzied Member
fixed it now!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote