show/hide layer

Discussion in 'Javascript' started by Merlin, Apr 4, 2006.

  1. Merlin

    Merlin Guest

    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>
     
    Merlin, Apr 4, 2006
    #1
    1. Advertising

  2. Merlin

    Dag Sunde Guest

    "Merlin" <> skrev i melding
    news:...
    > 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";

    <snipped/>

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

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

    --
    Dag.
     
    Dag Sunde, Apr 4, 2006
    #2
    1. Advertising

  3. Merlin

    RobG Guest

    Dag Sunde wrote:
    > "Merlin" <> skrev i melding
    > news:...
    >
    >>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
     
    RobG, Apr 4, 2006
    #3
  4. Merlin

    Dag Sunde Guest

    "RobG" <> skrev i melding
    news:4432824b$0$2108$...
    > Dag Sunde wrote:
    >> "Merlin" <> skrev i melding
    >> news:...
    >>
    >>>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.
     
    Dag Sunde, Apr 4, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?YzY3NjIyOA==?=

    do it in database layer or application layer

    =?Utf-8?B?YzY3NjIyOA==?=, Jan 26, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    456
    Karl Seguin [MVP]
    Jan 27, 2006
  2. Dhananjay
    Replies:
    1
    Views:
    1,203
    sloan
    Dec 18, 2006
  3. Mark
    Replies:
    5
    Views:
    152
  4. HIDE/SHOW Layer HELP!

    , Dec 1, 2007, in forum: Javascript
    Replies:
    16
    Views:
    206
  5. ll
    Replies:
    2
    Views:
    685
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page