PDA

View Full Version : inline window while page loads



bubazoo
11-19-2006, 02:35 AM
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
11-19-2006, 06:48 AM
Ajax.

bubazoo
11-19-2006, 07:11 AM
Ajax.

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

tech_support
11-19-2006, 09:35 AM
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
11-19-2006, 03:33 PM
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
11-19-2006, 08:53 PM
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
11-19-2006, 09:40 PM
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
11-19-2006, 10:31 PM
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
11-19-2006, 11:21 PM
http://www.tcoburn.com/index2.php

I can see it (http://mwinter.webhop.info/dd/coburn.png) 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
11-20-2006, 10:21 PM
AJAX is totally irrelevant to the problem.

Ajax is one of the solutions to the problem.

mwinter
11-20-2006, 10:36 PM
Ajax is one of the solutions to the problem.

How does AJAX "display a little blue box on top of the current page ... while the webpage is loading form the server"?

AJAX is used to send requests to the origin server, typically with the aim of getting some sort of data in response. That has precisely nothing to do with the OP's needs.

Mike

tech_support
11-20-2006, 10:38 PM
How does AJAX "display a little blue box on top of the current page ... while the webpage is loading form the server"?

Like Windows Live Mail's Loading Screen. It has another page and sending a request to the server.

bubazoo
11-22-2006, 03:52 PM
oh I see, it probably is loading faster then I can see it. hrmm..

thanks for the help. looks like I just have to make the text larger and center it in the middle of the screen somehow.

thanks.

bubazoo
11-22-2006, 03:59 PM
Hey guys,

I got this to work ok, except that while the message is displayed on the screen, the page content is ajusted over to make room on the page for the "loading please wait" message, was just wondering if there was a way to put it on top somehow.

Is there a way maybe, to bring up a new layer and display that while the page is loading, instead of messing up my current layout?

either that, or an inline window that self closes after the loading is completed, I dunno.
because I'm having problems centering the "loading please wait" message on the screen without it moving over everything else in the process.

this is in regards to my blog site

http://www.tcoburn.com/blog

which seems to take awhile to load from the server, probably because of all the plugins I have on wordpress.

thanks

mwinter
11-22-2006, 10:02 PM
I got this to work ok, except that while the message is displayed on the screen, the page content is ajusted over to make room on the page for the "loading please wait" message, was just wondering if there was a way to put it on top somehow.

Absolutely-position the element, as I did in the original example. It will be rendered out-of-the-flow: it will not affect the positioning of its siblings.



because I'm having problems centering the "loading please wait" message on the screen without it moving over everything else in the process.

Set the width using em length units, set the left box offset to 50%, then use a negative margin that's half of the width. For example:



position: absolute;
width: 15em;
left: 50%;
margin-left: -7.5em;


I mentioned previously that the code I posted could interfere with other code: it's greedy with regard to the load event. You already seem to have code that can help here - that saves me from posting too much more. :)

Replace



global.onload = function() {
body.removeChild(element);
global.onload = null;
};

with:



bb2_addLoadEvent(function() {
body.removeChild(element);
global.onload = null;
});

Mike