471,624 Members | 1,778 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,624 software developers and data experts.

show/hide layer

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.visibili ty = "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.visibili ty = "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>
Apr 4 '06 #1
3 6226
"Merlin" <ng*****@fastmail.fm> skrev i melding
news:49************@individual.net...
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.visibili ty = "hidden";

<snipped/>

Use 'display' instead of 'visibility'...

....style.dipplay = "none";
....style.dipplay = "block";

--
Dag.
Apr 4 '06 #2
Dag Sunde wrote:
"Merlin" <ng*****@fastmail.fm> skrev i melding
news:49************@individual.net...
Hi there,

I am trying to create a form with an dynamic field that can be shown or
hidden.
[...]
Use 'display' instead of 'visibility'...

...style.dipplay = "none";
...style.dipplay = "block";


Better to use di*s*play = '' instead of 'block':

...style.display = 'none';
...style.display = '';
Setting the display property allows it to return to the default (or
whatever has been set via CSS or whatever), and is generic for all display
property values. It is also handy where different browsers set different
defaults for some elements.
--
Rob
Apr 4 '06 #3
"RobG" <rg***@iinet.net.au> skrev i melding
news:44**********************@per-qv1-newsreader-01.iinet.net.au...
Dag Sunde wrote:
"Merlin" <ng*****@fastmail.fm> skrev i melding
news:49************@individual.net...
Hi there,

I am trying to create a form with an dynamic field that can be shown or
hidden.

[...]

Use 'display' instead of 'visibility'...

...style.dipplay = "none";
...style.dipplay = "block";


Better to use di*s*play = '' instead of 'block':

...style.display = 'none';
...style.display = '';
Setting the display property allows it to return to the default (or
whatever has been set via CSS or whatever), and is generic for all display
property values. It is also handy where different browsers set different
defaults for some elements.


True, I should have advised that instead...

--
Dag.
Apr 4 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by stasteamb | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.