SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Look like lightbox's greyed out background while waiting for page to load

    I need to have a page wait till the entire thing is loaded before the user interacts with it. I would like for it to do a lightbox styled grey box over it or even something like plesk does where it fades out the background (same effect really) until the page has loaded.

    Any ideas on a plugin or quick way to code that?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Stick everything in a wrapper DIV and give the body a grey background, like #555555. Then use a fade function to gradually fade the wrapper in by incrementally increasing the opacity.

    Start the fading upon the window.onload event, which waits for everything to load, including images.
    Code javascript:
    window.onload = function() {
      var wra = document.getElementById('wrapper'), opacity = 0;
      setOpacity(wra, 0);
      wra.style.display = 'block';
      var int = window.setInterval(function() {
        opacity += 0.05;
        setOpacity(wra, opacity);
        if (opacity >= 1) window.clearInterval(int);
      }, 50);
    }
    You'll have to write a simple setOpacity function to cover the different ways browsers (read: IE and everyone else) do opacity.

    You will need to consider what's going to happen if JavaScript is turned off. You don't want such visitors seeing a completely blank page!

  3. #3
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's an internal website so it's not a big deal with javascript. Thanks!

  4. #4
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct me if I'm wrong but won't this script load the grey out div after the page has already loaded?

    Is there a way of greying out the page whilst the page is loading and then un-greying it after the page has loaded.

    I have a similar problem where I don't want user's clicking any of the links on the page until the entire page has loaded. I want to grey out the page and display a message telling them that the page is loading.


Bookmarks

Posting Permissions

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