Gmail like ajax loading message at the top of page
Here is a sample javascript code to show Gmail like “Loading.. Please wait..” message at the top of a HTML page while making Ajax requests. Irrespective of the position of Ajax links within web page, the “Loading” message will show at the very top of the page.
I have attached Javascript script file with this post. Place the attached javascript code file (topmsg.js) in a directory and call this file inside the <head> section of your web page. Inside your ajax call add showloadingmsg() function just before the ajax call is initiated. This function will show the loading message. After the ajax call has finished executing, call hideloadingmsg() to hide the loading message.
For example, if you have same ajax link at the upper part and lower part of the page the loading message will like as shown under in two different images. (For a working demo go here : http://www.givebackindia.com/charities)
Clicking a ajax link at the upper part of web page:
Clicking a ajax link at the lower part of web page:
Finally the javascript code (contained in Javascript script file file)
//Set Required Variables
var message='<b>Loading..</b>'
var backgroundcolor="yellow"
var msgwidth = "80px"
var msgheight = "26px"
var bgimage = "/img/loading_bg.gif";
/////////////// DO NOT edit below this line
var ie=document.all
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
if (ie||document.getElementById)
document.write('<div id="topmsg" style="position:absolute;visibility:hidden;">'+message+'</div>')
var topmsg_obj=ie? document.all.topmsg : document.getElementById? document.getElementById("topmsg") : document.topmsg
function positionit() {
var dsocleft=ie? document.body.scrollLeft : pageXOffset
var dsoctop=ie? document.body.scrollTop : pageYOffset
var window_width=ieNOTopera? document.body.clientWidth : window.innerWidth-20
var window_height=ieNOTopera? document.body.clientHeight : window.innerHeight
if (ie||document.getElementById){
var _left = parseInt(dsocleft)+window_width/2-topmsg_obj.offsetWidth/2
topmsg_obj.style.left = _left + "px"
var _top = parseInt(dsoctop)-topmsg_obj.offsetHeight+30
topmsg_obj.style.top= _top+"px"
} else if (document.layers){
topmsg_obj.left=dsocleft+window_width/2-topmsg_obj.document.width/2
topmsg_obj.top=dsoctop+window_height-topmsg_obj.document.height-5
}
}
function setmessage() {
if (document.layers){
topmsg_obj=new Layer(window.innerWidth)
topmsg_obj.bgColor=backgroundcolor
regenerate2()
topmsg_obj.document.write(message)
topmsg_obj.document.close()
positionit()
topmsg_obj.visibility="show"
}
else{
positionit()
topmsg_obj.style.backgroundColor=backgroundcolor
//topmsg_obj.style.visibility="visible"
}
setInterval("positionit()",100)
if(bgimage!="")
topmsg_obj.style.background="transparent url('" + bgimage + "') no-repeat";
topmsg_obj.style.width=msgwidth
topmsg_obj.style.height=msgheight
}
function toggle_msg() {
if(topmsg_obj.style.visibility=='hidden') {
topmsg_obj.style.visibility="visible"
} else topmsg_obj.style.visibility="hidden"
}
function showloadingmsg() {
topmsg_obj.style.visibility="visible"
}
function hideloadingmsg() {
topmsg_obj.style.visibility="hidden"
}
if (document.layers||ie||document.getElementById)
window.onload=setmessage
Possibly Related posts:
- Fix to jQuery plugin does not work on ajax loaded content
I had been loading table records through ajax pagination using jquery. Some of the urls/links (View Details, Edit and Delete) in loaded content had been... - Autocomplete=”off” workaround / fix for valid XHTML
Add an onload function similar to the following to <head> section of your web page. <script type="text/javascript"> function onload_call() { if (!document.getElementById) return false; var... - jQuery pop up message box sliding from left to right and positioning horizontally at the center
Just wrote a simple sliding box script to make a message box appear sliding from left to the middle of web page. The box appears... - Limitation on the number of characters in jquery ajax response
The following jquery ajax call would return approx. 8442 characters in its “html” response. Content exceeding this number would be truncated. var url = "load_pocket_fabrics.php?filter="... - Creating Ajax form in Cakephp using jQuery
Because of its being more flexible, extensible and precise nature the jQuery certainly has emerged as a more popular Javascript library as compared to prototype...
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
