inline window while page loads

[bubazoo]

Is there a way to display a little blue box on top of the current page, that says something like "one moment please" while the webpage is loading form the server, then automatically closes when the page is fully loaded?

I've seen this on a few sites.. I thought it was a PHP thing at first, but they said its probably DHTML or javascript.

does anyone know how this is done?

thanks

[tech_support]

Ajax.

[bubazoo]

Ajax.

duh!.. but how? I don't know ajax and I don't know anyone who does.

[tech_support]

Something like...

var page = "page url"
function loadPage() {
var h = document.getElementsByTagName('html')
h[0].innerHTML = "Please wait..."
var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var a = document.getElementsByTagName("html")
                        a[0].innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET", page, true);
	ajaxRequest.send(null); 
}
window.onload=loadPage;

[mwinter]

Is there a way to display a little blue box on top of the current page, that says something like "one moment please" while the webpage is loading form the server, then automatically closes when the page is fully loaded?

You could create an element as the document loads via scripting, and remove it once the document has been received. For example, include the following in a script element within the body element (not the head element):

(function() {
    var body = document.body,
        global = this,
        element, textNode;

    if (body && body.insertBefore && body.removeChild && document.createElement
            && document.createTextNode && (element = document.createElement('div'))
            && element.appendChild
            && (textNode = document.createTextNode('Loading. Please wait...'))) {
        element.className = 'loading';
        element.appendChild(textNode);
        body.insertBefore(element, body.firstChild);
    }
    global.onload = function() {
        body.removeChild(element);
        global.onload = null;
    };
})();

and the following rule in your style sheet:

.loading {
    background: #d00000;
    color: #ffffff;
    font: 80% sans-serif;
    padding: 0.1em 0.2em;
    position: absolute;
    right: 0.2em;
    top: 0.2em;
}

Ajax.

AJAX is totally irrelevant to the problem.

Mike

[bubazoo]

is it supposed to be coded like this?

<script type="text/javascript">
(function() {
    var body = document.body,
        global = this,
        element, textNode;

    if (body && body.insertBefore && body.removeChild && document.createElement
            && document.createTextNode && (element = document.createElement('div'))
            && element.appendChild
            && (textNode = document.createTextNode('Loading. Please wait...'))) {
        element.className = 'loading';
        element.appendChild(textNode);
        body.insertBefore(element, body.firstChild);
    }
    global.onload = function() {
        body.removeChild(element);
        global.onload = null;
    };
})();
</script>

because that didn't work. didn't show up at all. The above AJAX example didn't show up either. thanks for the help anyway guys Its just that usually my pages take a while to load, esp my blog, and it would be nice to have either a progress bar, or a "please wait" message while the page is loading, I've seen it on other pages and I thought it was cool is all. thanks anyway though, I just thought it would be simplier then that I guess

[mwinter]

is it supposed to be coded like this?

[code omitted]

Yes.

because that didn't work. didn't show up at all.

In what browsers? Care to post a link to an example? It is possible that other code interferes with that posted above, and vice versa, but this can be fixed if necessary.

The code won't work in every browser - that shouldn't be a requirement as this is just a helping hand for the user - but any that implement the DOM sufficiently well will display the notice. IE 5.0+ (Win), Opera 7+, and Mozilla 1.0+ (which obviously includes any Gecko browser from that point on, including Firefox), at the very least, will all render the message and so should Konqueror and Safari.

Depending on the circumstances, in might not be best to wait until the document has completely loaded to remove the message, but rather remove it once the markup has been downloaded. This is especially true for image-heavy documents.

Its just that usually my pages take a while to load, esp my blog, and it would be nice to have either a progress bar, or a "please wait" message while the page is loading ...

If the server at least returns a Content-Length header in the response(s), then the built-in browser progress bar should give an accurate indication of how much remains. The setting of this header is often neglected with "dynamic" documents (generated on-the-fly by PHP, etc.), mainly out of ignorance rather than reason.

Mike

[bubazoo]

http://www.tcoburn.com/index2.php

There is no javascript on my page, the menu is CSS-only. and the rest is XHTML/PHP, so nothing should be interfering that I am aware of.

I'm testing this on modern browsers, Firefox 2 and IE 7, I don't have IE 6, firefox 1.5, or Opera or Safari to test on

[mwinter]

http://www.tcoburn.com/index2.php

I can see it just fine. Not to insult your intelligence, but are you sure you're not looking at a cached version (not likely because you send no cache-related headers, but possible) or that the document loads too quickly for you to notice?

Try adding a script element with an alert as its only statement to the end of the document (just before the body end-tag). This will pause the rendering process until the dialogue box is dismissed.

Mike

[tech_support]

AJAX is totally irrelevant to the problem.

Ajax is one of the solutions to the problem.