473,238 Members | 1,968 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,238 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 6346
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: David | last post by:
Hi everyone, Hoping there are some .js/browser experts out there that can help with this weird problem. I have made a swap div routine and applied the events to menu buttons with a closer...
3
by: Ryh | last post by:
I have the following scritpt. It hides div layer when mouse is out of the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not work in Mozilla or IE 5.5. It hides div when cursor is...
3
by: a1000car | last post by:
I have almost 2 weeks tying to find a solution for this. Please help -How can you SHOW/HIDE an thml-dreamweaver layer from a flash movie button. My html layer name is LAYER1, and my FlashMC...
2
by: stasteamb | last post by:
Can anyone help with this please? This is a copy of my code. <td width="20%"><div id="Layer1"> <p onclick="MM_showHideLayers('Layer2','','show')">Raymond</p> <p...
1
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. ...
6
elamberdor
by: elamberdor | last post by:
Hi All! Trying to get a drop down hide/show div on a html page triggered by a button in flash. (Intro: Very very Little experience in dynamic flash) setup: html page, flash map on page, button...
1
by: liesther2003 | last post by:
Hi i want to show mutli layer by each click, and when i click next layer the first layer should be still display, until maybe 3rd or 4th or 5th layer all are displayed, and at the end when i click...
2
by: dusk | last post by:
Hi, I have a page with lots of hidden divs which are revealed based on choices made at each 'layer'. So I've used naming convention which represents the order in which each div becomes...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.