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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide Element Before DOM Loads ?

    Greetings,

    The following code hides some DIV elements which can later be displayed depending on user action.

    The problem is, the DIV elements are displayed on the web page for a brief moment and then hidden. This is NOT the effect I want. The DIV elements should be hidden, not displayed for a brief moment and then hidden.

    window.onload approach:

    Code:
    /*window.onload = function() {
    hideElementsOnLoad();
    }
    Code:
    function hideElementsOnLoad () {
    // When the page loads, hide the form type help list and each form type.
    var formTypeHelpList = document.getElementById("formtypehelp");
    var uniGroupForm = document.getElementById("unigroupform");
    var uniAffilForm = document.getElementById("uniaffilform");
    
    formTypeHelpList.style.display="none";
    uniGroupForm.style.display="none";
    uniAffilForm.style.display="none";
    }
    So, I looked into using Prototype.js to solve the issue of the DIV elements being displayed for a brief moment then hidden. Using Prototype.js, the code above can be replaced with this. The benefit being, the elements are hidden right after the DOM loads but before images are loaded.

    Code:
    document.observe("dom:loaded", function() {
    // When the page loads, hide the form type help list and each form type.
    $('formtypehelp', 'unigroupform', 'uniaffilform').invoke('hide');
    });
    Unfortunately, Prototype's way still results in the elements being displayed on the page for a brief moment and then hidden. It's the same result the window.onload approach produced. :-(

    Another approach would be to hide the DIV elements by default, by using CSS (display:none. The DIV elements could then be displayed by using JavaScript (display:block. But I would prefer not to use this approach since the DIV elements would not be visible to a JavaScript disabled device.

    Perhaps it is possible to hide the DIV elements as the DOM is loading?

    I am seeking suggestions on how to solve this problem. Thank you in advance.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Try using CSS
    Code:
    #hiddenElement{ display:none;}
    If that's not what you want make sure that your function goes right as that div loads. If you use the body tag's onload event handler it will wait for the entire body to load before hiding the element.

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    727
    Thanks
    35
    Thanked 132 Times in 123 Posts
    You can load a stylesheet with javascript, before the body renders, either with a document.write or document.createElement script in the head of the document.

  • #4
    New Coder
    Join Date
    Nov 2005
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ninnypants and mrhoo, thank you both for your suggestions. I'm going to play around with them and report back when I have a solution.

    @ninnypants:
    If that's not what you want make sure that your function goes right as that div loads.
    Correct, I do NOT want the DIV elements to be hidden by default by way of CSS. If I did this, JavaScript disabled devices would not be able to view the DIV elements since there would be no way to remove the {display:none;} code.

    make sure that your function goes right as that div loads.
    Yes ! But how ?? How to hide an element as the DOM is loading - not after it has loaded?

  • #5
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Run your function in the head of your document. The only problem with this solution is that your script will probably throw an error because the elements are not defined. So you will want to test it in the head, and just below your divs.
    Code:
    <script type="text/javascript">
    function yourFunction(){
         your code....
    }
    // Your function will run as soon as the browser loads your code.
    yourFunction();
    </script>

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Firstly, DOM ≠ window.

    You don't need to hide anything as the DOM is loading. You need to hide it before the window starts rendering, which occurs after the DOM has loaded.

    You have a couple of options…

    • Use a js script in your doc head to add a second stylesheet (to the head) which contains the hide rules for the object being targeted.

    Alternatively, you could use js to add the hide rule to the existing style element.

    Due to browser inconsistencies, I'd advise adding the js stylesheet, rather than the rule, if taking this route.

    • Use a DOMReady function, such as those available in the popular js frameworks, such as jQuery, YUI or lighter, less well known ones such as DLite.

    www.jquery.com
    http://developer.yahoo.com/yui
    www.robertnyman.com/dlite

    The DOMready function could be used to either add a hide class to the object(s) being targeted, or you could add the class in the markup itself, but set rules in the stylesheet which rely on a body className of 'js' to hide them.

    e.g.
    Code:
    body.js .hidden {
    	display: none;
    }
    
    …
    
    <div class="hidden">…</div>
    Then you only need to use DOMReady to add a class of js to the body element.
    This hides the object(s) using CSS, but makes the process dependent on the presence of js.


  •  

    Posting Permissions

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