www.webdeveloper.com
Results 1 to 9 of 9

Thread: Show/Hide <DIV> or <IFRAME>

  1. #1
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257

    Question Show/Hide <DIV> or <IFRAME>

    Hello and Good Day

    is it possible to hide a <DIV> or <IFRAME>?
    I mean, when I click on a button, I want that my <DIV> hides himself and is not visible on the page. When I click again (or on another button) the <DIV> must appear again.

    Is that possible?

    It doesn't work with style.height = 0px, because if the <DIV> contains text or something, it automatically fits to that size. When you say style.overflow = 'hidden' it doesn't work.

    Can somebody help me?

    Thanks!!!

    JayDie

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Code:
    function hide(el_id){
    
    var temp=document.getElementById(el_id).visibility;
    
    temp=(temp=='visible')?'hidden':'visible';
    
    }
    
    function remove(el_id){
    
    var temp=document.getElementById(el_id).display;
    
    temp=(temp=='block')?'none':'block';
    
    }
    
    <a href="#" onclick="hide('the_div');return false;">Hide the div until this link is click again.</a>
    
    <a href="#" onclick="remove('the_div');return false;">Remove the div until this link is click again.</a>
    There are two functions, hide and remove.

    Hide simply makes the div invisible but it will still occupy the same amout of space on the page.
    Remove basically does just that, it removes the div from the page by not displaying it, until the link is clicked again.

    For the remove function I have used display:none; and display:inline; If you want to use this for an iframe then you will need to change all instances of block to inline.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    hmmzzz... Are you sure?

    When I implement this, nothing happens... no error... no hiding...

    weird...

    JayDie

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Do you have an element with something in it and an id="the_div" because if you don't then that could explain it. Try also adding this to you code:

    Code:
    <div id="the_div">Click a link to hide me!</div>
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    OK, after taking another look at my script I noticed a couple of errors. I've decided to uploaded a working modified version of the script.

    This one DOES work, the last one was not tested as I just wrote it on-the-fly.
    Attached Files Attached Files
    Every fight is a food fight when you’re a cannibal.

  6. #6
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    Yes, thank you. The 'remove' one was the one I needed. I allready got the 'hide' one, but that wasn't what I wanted!

    Thank you!

    JayDie

  7. #7
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Happy to help.
    Every fight is a food fight when you’re a cannibal.

  8. #8
    Join Date
    Jul 2004
    Posts
    3
    using the example the previous user posted:

    Is there a way to have the I frame hidden on load, and then visible after clicking a link? if so, can you show me how?

  9. #9
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Sure, just put this right after the iframe:
    Code:
    <script type="text/javascript"><!--
    document.getElementById("the_iframe").style.visibility="hidden";
    //--></script>
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles