Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > show/hide layer

Reply
Thread Tools

show/hide layer

 
 
Merlin
Guest
Posts: n/a
 
      04-04-2006
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>
 
Reply With Quote
 
 
 
 
Dag Sunde
Guest
Posts: n/a
 
      04-04-2006
"Merlin" <(E-Mail Removed)> skrev i melding
news:(E-Mail Removed)...
> 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.


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      04-04-2006
Dag Sunde wrote:
> "Merlin" <(E-Mail Removed)> skrev i melding
> news:(E-Mail Removed)...
>
>>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
 
Reply With Quote
 
Dag Sunde
Guest
Posts: n/a
 
      04-04-2006
"RobG" <(E-Mail Removed)> skrev i melding
news:4432824b$0$2108$(E-Mail Removed)...
> Dag Sunde wrote:
>> "Merlin" <(E-Mail Removed)> skrev i melding
>> news:(E-Mail Removed)...
>>
>>>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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
business layer, data access layer , presentation layer for asp.net using C#.net Dhananjay ASP .Net 1 12-18-2006 11:35 PM
how to get layer 2 trough layer 3 ? C Cant Cisco 11 04-19-2005 05:07 PM
Layer 4 device on a Layer 3 switch Warrick FitzGerald Cisco 5 02-24-2004 03:45 PM
bridge / layer 2 switch / layer 3 switch Joel M. Baldwin Cisco 2 11-06-2003 11:19 PM
difference b/w layer 2 switch and layer 3 switch praveen Cisco 1 10-22-2003 07:19 AM



Advertisments