HIDE/SHOW Layer HELP!

Discussion in 'Javascript' started by sirjesster@gmail.com, Dec 1, 2007.

  1. Guest

    Can somebody please help me with this?

    I need some code (html, css, javascript, etc.) that does the exact
    same thing as the "more" link on the top of google's homepage.

    I need a link that shows hidden content on click and hides the hidden
    content when the link is clicked again, or when any other part of the
    page is clicked.

    This would help so much!

    Thanks in advance.
    , Dec 1, 2007
    #1
    1. Advertising

  2. wrote:
    > Can somebody please help me with this?


    Yes.

    > I need some code (html, css, javascript, etc.) that does the exact
    > same thing as the "more" link on the top of google's homepage.


    It might be a good idea to have a look at this exact source code, then.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Dec 1, 2007
    #2
    1. Advertising

  3. Guest

    I have looked at the source code and I have a dilemma. The javascript
    is written in a long string of code. I do believe that it is illegal
    to actually cut and paste the code into my site, so I need it to be
    rewritten, right? Since I am not javascript savvy, I dont know how to
    do any of this. Do you have any suggestions on what I should do?

    Thanks
    , Dec 1, 2007
    #3
  4. wrote:
    > I have looked at the source code and I have a dilemma. The javascript is
    > written in a long string of code. I do believe that it is illegal to
    > actually cut and paste the code into my site, so I need it to be
    > rewritten, right?


    It is very likely that you will need to rewrite it in any case, as Google's
    HTML and client-side script code is usually of poor quality. So that is not
    a good template anyway.

    > Since I am not javascript savvy, I dont know how to do any of this. Do
    > you have any suggestions on what I should do?


    With Firebug it is easy to find out that the relevant HTML fragment in
    Firefox is (pretty-printed):

    <a onclick="this.blur(); gbar.tg(event); return false"
    href="http://www.google.com/intl/en/options/"
    ><u>more</u><span style="font-size: 11px;">â–¼</span>


    this.blur() is irrelevant here. You can retrieve the relevant script code
    in a pretty-printed form with, e.g.:

    window.alert(gbar.tg);

    Any other method that returns the string representation of the corresponding
    Function object would be feasible, too.


    Please quote the minimum of what you are replying to, and reply *below*
    those trimmed quotes, as you can see here.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Dec 1, 2007
    #4
  5. Doug Gunnoe Guest

    On Dec 1, 3:31 pm, wrote:
    > I need a link that shows hidden content on click and hides the hidden
    > content when the link is clicked again, or when any other part of the
    > page is clicked.
    >
    > This would help so much!
    >
    > Thanks in advance.


    This will toggle the visibility attribute of a div

    <html>
    <head>
    <title>Hide layer example</title>
    <script type="text/javascript">
    function toggleLayer(){
    hiddenThings = document.getElementById('hiddenStuff');
    if(hiddenThings.style.visibility == "hidden")
    hiddenThings.style.visibility = "visible";
    else{
    hiddenThings.style.visibility = "hidden";
    }
    }
    </script>

    </head>

    <body>

    <div><p>This stuff is in a layer that is visible</p>
    <p>To toggle the hidden stuff, <a href="javascript:void(0)"
    onclick="toggleLayer()">click here</a>.</div>

    <div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
    is in a hidden layer
    <p>See all the suff now.
    <p>Stuff
    <p>More stuff</div>



    </body>

    </html>

    I hope that helps.
    Doug Gunnoe, Dec 2, 2007
    #5
  6. Stevo Guest

    Randy Webb wrote:
    > function toggleLayer(){
    > var theDiv = document.getElementById('myDiv')
    > theDiv.style.visibility = (theDiv.style.visibility ==
    > "hidden"?"visible":"hidden")
    > }


    Wow, I never thought I'd ever get to improve on some Randy Webb code,
    but here I am doing it :)

    function toggleLayer(targetDiv){
    var theDiv = document.getElementById(targetdiv);
    if(theDiv)
    {
    theDiv.style.visibility = (theDiv.style.visibility ==
    "hidden"?"visible":"hidden");
    }
    }

    I added missing semi-colons, made it a generic func to handle any layer,
    and added defensive coding in case theDiv doesn't exist.
    Stevo, Dec 2, 2007
    #6
  7. Evertjan. Guest

    Randy Webb wrote on 02 dec 2007 in comp.lang.javascript:

    > What it still doesn't do is "hide it when any other part of the page is
    > clicked".
    >


    <body onclick='hideLayer()'>
    <button onclick = 'toggleLayer()'
    onmouseout = 'nobubble = false;'
    >Toggle</button>

    <br><br>
    <div id='myDiv'>my Div/my Layer</div>
    <br><br>
    any other part of the page
    </body>

    <script type='text/javascript'>

    var nobubble = false;

    function toggleLayer(){
    nobubble = true;
    var theDiv = document.getElementById('myDiv');
    theDiv.style.visibility =
    (theDiv.style.visibility == "hidden")
    ?"visible":"hidden";
    };

    function hideLayer(){
    if (nobubble) return true;
    var theDiv = document.getElementById('myDiv');
    theDiv.style.visibility = "hidden";
    };

    </script>

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Dec 2, 2007
    #7
  8. Stevo Guest

    Randy Webb wrote:
    > Are you sure the UA supports .getElementById, .style, and .visibility? :)


    Unless the user is using a 1995 Browser then yes ;-)

    > I won't comment on the semi-colons as I don't want to have the debate
    > again. They aren't required, and can even cause harm if you don't know
    > for sure where to put them.


    Same applies to spaces, commas, parentheses and quotes. Why are
    semi-colons different? If you don't put them on, then you can forget
    about your code ever being minimized. I used to always drop trailing
    semi-colons until the day came when I wanted to minimize some code.
    Stevo, Dec 2, 2007
    #8
  9. Doug Gunnoe Guest

    > I won't comment on the semi-colons as I don't want to have the debate
    > again. They aren't required, and can even cause harm if you don't know
    > for sure where to put them.


    You're right about the semi-colons. I use them because I think it
    looks neater.
    Doug Gunnoe, Dec 2, 2007
    #9
  10. Guest

    On Dec 2, 12:19 am, Doug Gunnoe <> wrote:

    > <html>
    > <head>
    > <title>Hide layer example</title>
    > <script type="text/javascript">
    > function toggleLayer(){
    > hiddenThings = document.getElementById('hiddenStuff');
    > if(hiddenThings.style.visibility == "hidden")
    > hiddenThings.style.visibility = "visible";
    > else{
    > hiddenThings.style.visibility = "hidden";
    > }}
    >
    > </script>
    >
    > </head>
    >
    > <body>
    >
    > <div><p>This stuff is in a layer that is visible</p>
    > <p>To toggle the hidden stuff, <a href="javascript:void(0)"
    > onclick="toggleLayer()">click here</a>.</div>
    >
    > <div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
    > is in a hidden layer
    > <p>See all the suff now.
    > <p>Stuff
    > <p>More stuff</div>
    >
    > </body>
    >
    > </html>



    This is what I am looking for, thanks. But I also need the div to
    "float" over all of the content on the rest of the page. When the link
    is clicked, I don't want the rest of the page to be pushed down due to
    the link expanding, but, instead, the div should hover over the rest
    of the page. Also, is there a way for the div to hide after any other
    part of the page is clicked. (i know this was mentioned but I dont
    know if anyone did it.)

    Thanks everybody who has helped with this.

    Also, I tried your code Randy Webb and Stevo, but when I plug it in,
    it doesn't work. Am I doing something wrong? Thanks a ton.
    , Dec 2, 2007
    #10
  11. Guest

    On Dec 2, 3:13 pm, Randy Webb <> wrote:

    > Yes, you are doing something wrong as the code I posted was tested
    > before posting it.


    I'm very new to javascript, so could you please give me the code
    enclosed in the entire html document? I tried plugging your script
    into Doug Gunnoe's document but it didn't work, so if its anything
    beyond doing that, I dont know how to do it. I am probably doing
    something incorrectly, so if you could point out my flaws, it would be
    very helpful.

    > Floating on top? You use position:absolute, give it coordinates, and use
    > a z-index. All of which is CSS, not JS.


    After I posted my last reply, I realized that it obviously was css.
    Thanks for that.

    All I have left to do now is make the div hide when the rest of the
    document is clicked. You mentioned to see Evertjan's code, but again,
    when I input his script into my document, it still doesn't work. It's
    probably something I am doing wrong, as i said, i am very new to this.
    Any help that you can give me with this issue is very much
    appreciated.

    Thanks again.
    , Dec 2, 2007
    #11
  12. Doug Gunnoe Guest


    > All I have left to do now is make the div hide when the rest of the
    > document is clicked. You mentioned to see Evertjan's code, but again,
    > when I input his script into my document, it still doesn't work. It's
    > probably something I am doing wrong, as i said, i am very new to this.
    > Any help that you can give me with this issue is very much
    > appreciated.
    >
    > Thanks again.


    Evertjan used an onclick event in the body element

    ><body onclick='hideLayer()'>


    Try what I posted but in the body tag put, <body
    onclick='toggleLayer()'>

    I'm sure Evertjan has a good reason for testing the onmouseout event,
    but I'm not sure what it is.
    Doug Gunnoe, Dec 3, 2007
    #12
  13. Guest

    On Dec 2, 4:56 pm, Doug Gunnoe <> wrote:

    > Try what I posted but in the body tag put, <body
    > onclick='toggleLayer()'>


    I tried it, but instead of making the div disappear by clicking on any
    part of the body of the document, it makes the div only appear and
    disappear by clicking on the body of the document. (i.e. when I click
    the link "click here" nothing happens, but when I click any other part
    of the page, the div appears, and when I click again, it disappears.)

    Thanks for the suggestion.
    , Dec 3, 2007
    #13
  14. Doug Gunnoe Guest

    On Dec 2, 7:08 pm, wrote:
    > On Dec 2, 4:56 pm, Doug Gunnoe <> wrote:
    >
    > > Try what I posted but in the body tag put, <body
    > > onclick='toggleLayer()'>

    >
    > I tried it, but instead of making the div disappear by clicking on any
    > part of the body of the document, it makes the div only appear and
    > disappear by clicking on the body of the document. (i.e. when I click
    > the link "click here" nothing happens, but when I click any other part
    > of the page, the div appears, and when I click again, it disappears.)
    >
    > Thanks for the suggestion.


    Of course. I'm sorry that was stupid of me. I'll fix it.
    Doug Gunnoe, Dec 3, 2007
    #14
  15. Guest

    On Dec 2, 7:39 pm, Doug Gunnoe <> wrote:

    > Of course. I'm sorry that was stupid of me. I'll fix it.


    No problem. I appreciate the help.
    , Dec 3, 2007
    #15
  16. Doug Gunnoe Guest

    On Dec 2, 9:42 pm, wrote:
    > On Dec 2, 7:39 pm, Doug Gunnoe <> wrote:
    >
    > > Of course. I'm sorry that was stupid of me. I'll fix it.

    >
    > No problem. I appreciate the help.


    On Dec 2, 7:08 pm, wrote:
    > I tried it, but instead of making the div disappear by clicking on any
    > part of the body of the document, it makes the div only appear and
    > disappear by clicking on the body of the document. (i.e. when I click


    Now I see what Evertjan was doing. The onclcik event bubbles up
    through the dom tree, I suppose being passed on to every containing
    element until it stops at the root. I should have remembered that
    sooner, because I have had that problem a couple of times in the past.
    But some days I don't have walking around sense.

    Anyway, here's my last attempt. Good luck.

    <html>
    <head>
    <title>Hide layer example</title>
    <script type="text/javascript">
    var bodyclick;
    function toggleLayer(){
    bodyclick = false;
    hiddenThings = document.getElementById('hiddenStuff');
    if(hiddenThings.style.visibility == "hidden")
    hiddenThings.style.visibility = "visible";
    else
    hiddenThings.style.visibility = "hidden";
    }
    function hideLayer(){
    hiddenThings = document.getElementById('hiddenStuff');
    if(bodyclick == true)
    hiddenThings.style.visibility = "hidden";
    else bodyclick = true;
    }

    </script>

    </head>


    <body onclick="hideLayer()">


    <div><p>This stuff is in a layer that is visible</p>
    <p>To toggle the hidden stuff, <a href="javascript:void(0)"
    onclick="toggleLayer()">click here</a>.</div>


    <div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
    is in a hidden layer
    <p>See all the suff now.
    <p>Stuff
    <p>More stuff</div>


    </body>
    Doug Gunnoe, Dec 3, 2007
    #16
  17. Guest

    On Dec 2, 9:08 pm, Doug Gunnoe <> wrote:
    > Anyway, here's my last attempt. Good luck.
    >
    > <html>
    > <head>
    > <title>Hide layer example</title>
    > <script type="text/javascript">
    > var bodyclick;
    > function toggleLayer(){
    > bodyclick = false;
    > hiddenThings = document.getElementById('hiddenStuff');
    > if(hiddenThings.style.visibility == "hidden")
    > hiddenThings.style.visibility = "visible";
    > else
    > hiddenThings.style.visibility = "hidden";}
    >
    > function hideLayer(){
    > hiddenThings = document.getElementById('hiddenStuff');
    > if(bodyclick == true)
    > hiddenThings.style.visibility = "hidden";
    > else bodyclick = true;
    >
    > }
    >
    > </script>
    >
    > </head>
    >
    > <body onclick="hideLayer()">
    >
    > <div><p>This stuff is in a layer that is visible</p>
    > <p>To toggle the hidden stuff, <a href="javascript:void(0)"
    > onclick="toggleLayer()">click here</a>.</div>
    >
    > <div id="hiddenStuff" style="top:20;visibility:hidden;"><p>This stuff
    > is in a hidden layer
    > <p>See all the suff now.
    > <p>Stuff
    > <p>More stuff</div>
    >
    > </body>


    It works beautifully.

    Thank you so much for the effort you put into this. I couldn't have
    done it without you, or the others who helped contribute. It is
    greatly appreciated.
    , Dec 3, 2007
    #17
    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. Federico Bari
    Replies:
    2
    Views:
    1,939
    Federico Bari
    Aug 31, 2003
  2. Dhananjay
    Replies:
    1
    Views:
    1,091
    sloan
    Dec 18, 2006
  3. SAL
    Replies:
    9
    Views:
    497
    Steven Cheng[MSFT]
    Jan 14, 2008
  4. Mark
    Replies:
    5
    Views:
    130
  5. Merlin

    show/hide layer

    Merlin, Apr 4, 2006, in forum: Javascript
    Replies:
    3
    Views:
    147
    Dag Sunde
    Apr 4, 2006
Loading...

Share This Page