M
Merlin
Hi there,
I am trying to create a form with an dynamic field that can be shown or hidden.
As I saw for example on google it is possible with JS to show a layer and move
the content underneath that layer further down uppon showing this layer. When a
person closes that layer the content underneath the layer moves up again and
closes the empty space. How is this possible?
I am playing around with some code I am posting with this thread. Could somebody
give me a small push to get closer to my goal?
Thank you in advance,
Merlin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Show and Hide a Layer</title>
<style type="text/css">
#boxthing { position:relative; top:0px; left:0px; width:250px; height:150px;
border:1px #000000 solid; background-color:#FF9999; padding:0.5em; }
</style>
<script type="text/javascript">
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}
function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
function handleClick(whichClick) {
if (whichClick == "hide it") {
// then the user wants to hide the layer
hideLayer("boxthing");
}
else if (whichClick == "show it") {
// then the user wants to show the layer
showLayer("boxthing");
}
}
</script>
</head>
<body>
<a href="#" onclick="handleClick('show it'); return false">Show Layer</a><br>
<div id="boxthing" style="visibility:hidden;">
<a href="#" onclick="handleClick('hide it'); return false">Hide Layer</a><br>
<p>Use the links above to show and hide this layer.<p></div>
tese
</body>
I am trying to create a form with an dynamic field that can be shown or hidden.
As I saw for example on google it is possible with JS to show a layer and move
the content underneath that layer further down uppon showing this layer. When a
person closes that layer the content underneath the layer moves up again and
closes the empty space. How is this possible?
I am playing around with some code I am posting with this thread. Could somebody
give me a small push to get closer to my goal?
Thank you in advance,
Merlin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Show and Hide a Layer</title>
<style type="text/css">
#boxthing { position:relative; top:0px; left:0px; width:250px; height:150px;
border:1px #000000 solid; background-color:#FF9999; padding:0.5em; }
</style>
<script type="text/javascript">
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}
function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
function handleClick(whichClick) {
if (whichClick == "hide it") {
// then the user wants to hide the layer
hideLayer("boxthing");
}
else if (whichClick == "show it") {
// then the user wants to show the layer
showLayer("boxthing");
}
}
</script>
</head>
<body>
<a href="#" onclick="handleClick('show it'); return false">Show Layer</a><br>
<div id="boxthing" style="visibility:hidden;">
<a href="#" onclick="handleClick('hide it'); return false">Hide Layer</a><br>
<p>Use the links above to show and hide this layer.<p></div>
tese
</body>