Shoutbox

Okay so I know its possible to get a javascript script that when you open a page it displays Page Loading... whiles the page loads and then opens the page when its fully loaded.

But I was wondering how you make something like this:

CLICK HERE

I want the script so that it covers the page in a translucent black cover with an image and some text saying loading. Any help? PLEASE

The link doesn't work.

Works now

I know that is also used on habbo.co.uk because HabboRemix is a fansite of it. If you cant see the image it is displayed on Habbo.co.uk but only on certain pages.

Habbo.. haha. I remember that. Hmm, wonder if I can still log in..

Yay I can lol

Code from habboremix.net

code:

---

<div id=loading style="
position:absolute;
cursor:hand;
    top: 0;
    left: 0;
    width: 110%;
    height: 2000;
    z-index: 9000;
    background-color: black;
    -moz-opacity: .5;
    opacity: .50;
    filter: alpha(opacity=50);"><table width=100% height=600><tr valign=middle center=top><td valign=middle center=top><center><img src=http://www.habboremix.net/img/MFITV3LEIGS1CYU.gif><br/>
<font style="text-align: center;
    font-weight: bold;
    font-size: 12px;" color="#ffffff"><b>Please wait!</b></font></center></td></tr></table></div>

---

Obviously don't use that exact code. Change the image, etc. I'd also reccomend contacting them first before using the code.

People are always quick to push for Javascript when there is usually an easier CSS solution. The great thing about CSS is, it works on more browsers, and doesn't require that evil of web 2.0, client-side scripting!

quote:

---

Originally posted by Verte
People are always quick to push for Javascript when there is usually an easier CSS solution. The great thing about CSS is, it works on more browsers, and doesn't require that evil of web 2.0, client-side scripting!

---

But client-side is very good as it requires very little for the server to do and as such makes it more accessible to everyone, although it shouldn't be used to replace something static like CSS.  Javascript can be incredibly useful, but as you said, everything has a time and a place and the best overall method should be the one used and not just what the common trend is or just running with an idea without thinking about it.

quote:

---

Originally posted by Verte
People are always quick to push for Javascript when there is usually an easier CSS solution. The great thing about CSS is, it works on more browsers, and doesn't require that evil of web 2.0, client-side scripting!

---

what the hell are you on about? you still need javascript for this theres no "show this till load" css

code for show image loading and show percent of load

code:

---

function precargar()    {
    var dibujos = new Array(precargar.arguments.length);
    for (var i = 0; i < dibujos.length; i ++)    {
        dibujos[i] = new Image();
        dibujos[i].src = precargar.arguments[i]
    }
    return dibujos;
}

function precargados(dibujos)    {
    var parciales = true;
    for (var i = 0; i < dibujos.length; i ++)
        parciales = (parciales && dibujos[i].complete);
    return parciales;
}

function porciento(dibujos)    {
    var parciales = 0;
    for (var i = 0; i < dibujos.length; i ++)
        parciales += (dibujos[i].complete) ? 1 : 0;
    return parseInt(100 * parciales / dibujos.length);
} 

---

code:

---

var imagenes;
function continuar()    {
    alert("Ok.");
}

function cargando()    {
    document.getElementById("estado").style.width = porciento(imagenes) + "%";
    if (precargados(imagenes))
        continuar();
    else
        setTimeout("cargando()", 100);
}

function ini()    {
    imagenes = new precargar("img0.jpg",
        "img1.jpg",
        "img2.jpg",
        "img3.jpg",
        "img4.jpg",
        "img5.jpg",
        "img6.jpg",
        "img7.jpg",
        "img8.jpg"
    );
    cargando();
} 

---

code:

---

<div style="position:relative; width: 100px; height: 20px; border: 1px" >
<div style="position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: blue" >
</div>
<div id="estado"
style="position:absolute; top: 0; left: 0; width: 1%; height: 100%; background-color: aqua" >
</div>
</div>

---

quote:

---

Originally posted by -dt-

quote:

---

Originally posted by Verte
People are always quick to push for Javascript when there is usually an easier CSS solution. The great thing about CSS is, it works on more browsers, and doesn't require that evil of web 2.0, client-side scripting!

---

what the hell are you on about? you still need javascript for this theres no "show this till load" css

---

For a long time I would have agreed, I haven't done it myself so I'm not sure. But many things have suprised me, I've seen drop down menus and OnHover sort of stuff done using only css, which I never thought possible.

BTW, The page in question relies on a plugin [I believe ActiveX] calling dd.elements.loading.hide(). [JS]

quote:

---

Originally posted by Verte
For a long time I would have agreed, I haven't done it myself so I'm not sure. But many things have suprised me, I've seen drop down menus and OnHover sort of stuff done using only css, which I never thought possible.

BTW, The page in question relies on a plugin [I believe ActiveX] calling dd.elements.loading.hide(). [JS]

---

That's because CSS has a :hover property? But it doesn't have an onload() function like JS.
That page may use an ActiveX but I'm not sure its really needed .