how to do this? need help

Discussion in 'HTML & Website Design' started by hyperpower, Aug 21, 2007.

  1. #1
    Guys,

    Need help on this. Please see attached screenshot. I need a preloading script that does that. Basically it loads a message at the centre of the page, makes the entire background translucent, and message disappear after the page is loaded. I think it's javascript but after googling for 3 hours, I still can't find one that suit my needs.

    Any idea how to do it anyone?

    Christopher
     

    Attached Files:

    hyperpower, Aug 21, 2007 IP
  2. detz

    detz Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Css with some Javascript(ajax). When you need is a dix that covers the screen and another div(the loading box) on top of that. When the user clicks the link show both and use ajax to wait until the page is loaded and then hide them. Wish I had an example for you...
     
    detz, Aug 21, 2007 IP
  3. hyperpower

    hyperpower Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    any other guys can help me with this? need some help here...
     
    hyperpower, Aug 21, 2007 IP
  4. NoamBarz

    NoamBarz Active Member

    Messages:
    242
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #4
    In order to load a message in the background, you need to use Ajax. Google for Ajax tutorials. Then you need to figure out how to make the background translucent. You can do this by covering the BG with another layer - a <div> element. If you have an image (gif) with a low alpha level, that will make it be partly transparent. You assign the new layer, the image as a background and then display the layer over the background.

    I hope this helps. Giving you code examples is a little too time consuming. These a lot of work to be done here. Not simply one or two scripts.
     
    NoamBarz, Aug 22, 2007 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Noam, doesn't this also involve z (depth) as well?

    As far as I know, gifs are either alpha 0 or 1 (completely transparent or completely opaque). Maybe a png is needed here? You can have a "low" or "high" alpha level then... (with exceptions made for Internet Explorer).
     
    Stomme poes, Aug 22, 2007 IP
  6. detz

    detz Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You don't use an image, you make a div, say white background and then apply opactiy to the div.

    opacity: .5;
    filter: alpha(opacity=50);
     
    detz, Aug 22, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Do filters work on non-IE browsers?
     
    Stomme poes, Aug 22, 2007 IP