www.webdeveloper.com
Results 1 to 7 of 7

Thread: Script to delay loading container div

  1. #1
    Join Date
    Feb 2010
    Posts
    7

    Script to delay loading container div

    Hello everyone, can someone help me with a javascript timer to delay the loading of the main container div on a website.

    The reason is that I would like the background image (560k) to load first and then the site to load after. I found the opposite of what I need;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function hideit(){
    var o = document.getElemenById('hidethisone');
    o.style.display = 'none';
    }
    window.onload = function(){
    setTimeout("hideit()",5000); // 5 seconds after user (re)load the page
    };
    </script>

    </head>

    <body>
    <div id="hidethisone">
    THIS SHOULD VANISH
    </div>
    </body>
    </html>

    Any help is much appreciated.

    Thank you!

  2. #2
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    if you still need it, try this:
    this goes to the head:
    HTML Code:
    <style>
    #theIdOfYourObject {display:none;}
    </style>
    and the script:
    Code:
    function show() {
        AB = document.getElementById('theIdOfYourObject');
        AB.style.display = 'inline';
    }
    setTimeout("show()", 5000);

  3. #3
    Join Date
    Feb 2010
    Posts
    7
    That works perfect, thank you so much but I just realized that as that person is browsing the site and then comes back to the Home, they will have to wait again for the timeout to see the content.

    Is there a way to have the timer operate only the first time the visitor enters the Home page? Thank you again and have a great day.

  4. #4
    Join Date
    Mar 2011
    Posts
    1
    Hi Moritana, I just signed up to thank you for decided to answer that! It just fixed a problem I have been working on for 2 hours!

  5. #5
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    lol, okay, you welcome ^_^

  6. #6
    Join Date
    May 2012
    Posts
    1

    Multiple items?

    hiya,

    Thanks for this, really useful.

    I am trying to hide / load 3 items at once though, and only one of them only ever end up showing up - do you know how that would be?

    the code I've stuck in the header is below

    <script type="text/javascript">
    function show() {
    AB = document.getElementById('nav1', 'social', 'footer');
    AB.style.display = 'inline';
    }
    setTimeout("show()", 3000);
    </script>
    <style>
    ul#nav1 {display:none;}
    #footer {display:none;}
    #social {display:none;}
    </style>

    thanks... isabelle

  7. #7
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    getting an object by ID only fetches one object at a time, you can't use it like an array, if we could life would be way much easier.

    you can fetch each element separately, and change them individually.
    what you have now is that the get element by id only fetches the element written first, and the other two are a mystery to it.
    my blog.

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