Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post

    Show a hidden div by clicking anywhere on the page

    I got this script of the internet that toggles a hidden div on/off. I have converted this script into a drop down menu so the hidden div is the second level of the menu and is floating above the rest of the content. Can anyone please show me how to go about modifying the script so that the hidden div is hidden again when i click anywhere on the page other than the div itself instead of having to toggle it. Thanks. ps. hope this wasn't too confusing.

    HTML
    Code:
    <div id="mydiv"><a href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>
    <div id="mydiv2" class="hidden"> this hidden text will show when the link is pressed
    </div>
    CSS
    Code:
    .hidden { display: none; }
    .unhidden { display: block; }
    JAVASCRIPT
    Code:
    <script type="text/javascript">
    function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
    }
    </script>
    Thanks

  2. #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Add the onblur event of the div itself:
    <div id="mydiv" onblur='unhide("mydiv")'><a href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>

  3. #3
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by ckeyrouz View Post
    Add the onblur event of the div itself:
    <div id="mydiv" onblur='unhide("mydiv")'><a href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>
    Hey,
    This didn't seem to work... Any other suggestions.
    Thanks.

  4. #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Sorry for that put the blur event on the anchor like this:
    <div id="mydiv"><a onblur='unhide("mydiv")' href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>

  5. #5
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thanks. Solved it now.

  6. #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    If what I said helped solved your problem please thank me using the thank button.
    I apologize if I appear rude but I am trying to increase my credit in this forum.

    Thank you.

  7. Users who have thanked ckeyrouz for this post:

    FeralUK (07-03-2009)

  8. #7
    New to the CF scene
    Join Date
    Nov 2015
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ckeyrouz View Post
    Sorry for that put the blur event on the anchor like this:
    <div id="mydiv"><a onblur='unhide("mydiv")' href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>
    So I've done this in some of my code and it works as it is but I have two questions;

    1. The menu item I've applied this to to reveal page content is sitting over a cover image. I have to use 'position: absolute;' in order for it to sit over the image as required, but that directive prevents the javascript from running (when I remove 'position: absolute;' the menu elements all drop down underneath the cover img but the javascript works perfectly. Goddamnit.) is there any other way of positioning the menu elements over the image so that I can remove the css that's impeding the javascript?

    2. I've tried to reverse engineer the coding to have something that starts of unhidden, become hidden and then reappear again.

    <div id="dNHome"><a onblur='unhide("dPCHome")' href="javascript:unhide('dPCHome');" onblur='hide("dImgIndex")' href="javascript:hide('dImgIndex');">HOME</a></div>

    So that's what the div looks like now. It's not working, and I wanted to know if that's because the div simply can't handle having both directives in there at once, or if it's (more likely) a problem with my poor javascripting. Here's the javascript to match;

    function unhide(divID) {
    var item = document.getElementById("dPCHome");
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    function hide(divID) {
    var item = document.getElementById("dImgIndex");
    if (item) {
    item.className=(item.className=='unhidden')?'hidden':'unhidden';
    }
    }

    (So the top one is what I took from this post (thank you heaps btw), and the bottom one is the one I tried to reverse engineer. I'm brand new to javascript so it's probably very wrong haha. And as for css, I haven't added anything new. I'm just using the classes you guys showed earlier.)

    Thanks in advance!

  9. #8
    New to the CF scene
    Join Date
    Nov 2015
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aaaaaand I've just spotted that this is from 2009. Dangit.

  10. #9
    New Coder
    Join Date
    Sep 2014
    Posts
    87
    Thanks
    0
    Thanked 11 Times in 11 Posts
    is there any other way of positioning the menu elements over the image so that I can remove the css that's impeding the javascript?
    Yes, check z-index (style) attribute. The elements on top should have a higher z-index than the elements underneath.

  11. #10
    New to the CF scene
    Join Date
    Nov 2015
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But to use z-index (which is what I'm using right now) I have to set the position as absolute (or else the z-index is ineffective) and setting the position as absolute is what stops the function from working


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •