How to hide and show a div?

Discussion in 'Web Design and Development' started by puffnstuff, Mar 18, 2010.

  1. puffnstuff macrumors 65816

    Joined:
    Jan 2, 2008
    #1
    So I have divs with images in them. The main page displays one div w/ image and I have buttons each displaying a different div w/ an image.

    In order to keep all the divs w/ images from showing up on the homepage I did this
    HTML:
    <body onload="HideDIV('name')"
    problem is if the page doesn't load fast enough you will see a quick flash w/ all the images. Any other way to do this?
     
  2. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
  3. puffnstuff thread starter macrumors 65816

    Joined:
    Jan 2, 2008
    #3
    tried that and when I clicked on the button to display it is still hidden :confused:
     
  4. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #4
    Firstly, if you're using CSS you may want to use visibility:hidden instead of display:none.

    Secondly, your onclick event handler will have to set the visibility property to visible. Something like this:

    Code:
    function ShowImage(e) {
        document.getElementById(e).style.visibility="visible";
    }
    
    Where e is the id of the element you want to make visible.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    The DOMContentLoaded event will trigger sooner than onLoad, though not all browsers support it. Below is code that will attach your function that you want to run when the page's DOM is loaded. This will likely keep the flash from being visible in browsers that support this event. This will also keep you from needing to add anything to your body tag.

    PHP:
    function appendOnLoad(fx){
        try { 
    // For browsers that know DOMContentLoaded (FF, Safari, Opera)
            
    document.addEventListener("DOMContentLoaded"fxfalse);
        } 
        catch (
    e) { // IE
            
    window.attachEvent('onload'fx);
        }
    }
    appendOnLoad(HideDIV('name'));
     
  6. puffnstuff thread starter macrumors 65816

    Joined:
    Jan 2, 2008
    #6
    thanks this worked

    alright I will keep this in mind too
     
  7. Macman1993 macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #7
    I actually just did something like this, granted it was for a chat engine but the principal is the same, when visible I set the display to block and when invisible it is set to none. Initially the display is set to none so it never shows up. Heres the code that I used, its a bit different but should help.

    Code:
    
    var slider = document.getElementById('Slider');
    
    function Rise() {
        slider.style.display = 'block';
    }
    
    function Fall() {
        slider.style.display = 'none';
       
    }
    
    
     

Share This Page