Jump to content

Please wait message - Browsers


alpine

Recommended Posts

Hi,

I want to show users a message after they click a link where i am using php's sleep() function to delay link prosessing (example: on login)

I have this javascript
[code]
<script type="text/javascript">
function do_wait()
{
document.all.pleasewait.style.pixelTop = (document.body.scrollTop + 50);
document.all.pleasewait.style.visibility="visible";
}
</script>
[/code]

and this message
[code]
<div id="pleasewait" style="position:absolute;z-index:5;top:50;left:42%;visibility:hidden">
<table bgcolor="#000000" border="1" bordercolor="#DDDDDD" cellpadding="0" cellspacing="0" height="150" width="200" id="Table1">
<tr>
<td width="100%" height="100%" bgcolor="#ECF0F6" align="center" valign="middle">
<font color="#FF0000"><b>Verifying data<br /><br />please wait........</b></font>
</td>
</tr>
</table>
</div>


// link
<a href='whatever.php' onclick='do_wait()'>Click here to proceed</a>

[/code]

Now, in my php scripts i include files such as the header that includes tags such as html - head - body

What happends is that when i put the do_wait() function inside the header file along with my other javasripts, it wont work on either of the browsers...!... (?)

If i put the do_wait() above the header inclusion, it works on both browsers (havent tested any other browsers yet). But when i do this, i do write a javascript even before the - html - start tag....??? This isn't good coding....

When i write the do_wait() function after the header inclusion, Firefox wont show the message but IE6 shows it ok.

I myself prefer Firefox and even if most visitors use IE i still want the message to apply to the most common browsers.

Any comments and help on this ??
Link to comment
Share on other sites

puzzled further with the javascript after studying other cross browser codes, and now it works when it is located in the header (as it should), AND works in Firefox, Opera, IE6 and Netscape :)

Only problem seems to be the height parameters returned differently in IE and it ignores scroll parametres set.

[code]
function do_wait()
{
if (document.getElementById)
{
document.getElementById('pleasewait').style.pixelTop = (document.body.scrollTop + 50);
document.getElementById('pleasewait').style.visibility='visible';
}
if (document.layers)
{
document.pleasewait.pixelTop = (document.body.scrollTop + 50);
document.pleasewait.visibility='visible';
}
else
{
document.all.pleasewait.style.pixelTop = (document.body.scrollTop + 180);
document.all.pleasewait.style.visibility='visible';
}
}
[/code]
Link to comment
Share on other sites

  • 3 weeks later...
Hi,

I have an question about this script.. I want a loading message to my ajax system, like in gmail.

This script using css absolute, work fine, but not work like the gmail div. I want that messate stay always on top if user down or up scroll bar.

My english is very poor, sorry. You understand my question?
Link to comment
Share on other sites

Hi,

That one could help you, (taken from an other website, & made some little modifications)
[code]
<html>
<head>
<title>still testing,,,</title>
</head>
<script src="topmsg.js">
//Always-on-top message Script- Ā© Dynamic Drive (www.dynamicdrive.com)
//For full source code, and Terms Of use, visit dynamicdrive.com
//This credit MUST stay intact for use
//Answ: ok,... no prob,,;)
</script>
<body>
<script type="text/javascript">
// some vars
var status=new Array();
status['popup']="hidden";
status['popup_init']="no";

function do_wait()
{
if (status['popup_init']=="no")
    {
// if not done, we init the message once
    setmessage();
    status['popup_init']="done";
    }
if (status['popup'] == "visible")
    {
    status['popup'] = "hidden";
    }
else
    {
    status['popup'] = "visible";
    }
if (document.getElementById)
    {
    eval("document.getElementById('pleasewait').style.visibility=\""+status['popup']+"\"");
    }
if (document.layers)
    {
    eval("document.pleasewait.visibility=\""+status['popup']+"\"");
    }
else
    {
    eval("document.all.pleasewait.style.visibility=\""+status['popup']+"\"");
    }
}
</script>

// link
<a href=# onclick='do_wait()'>Click here to proceed</a>

<div id="contents"></div>
<script>
//to populate the page
var content="";
for (i=0;i<50;i++)
    {
    content=content+"<br>line number "+i;
    }
document.getElementById('contents').innerHTML=content;
</script>
</body>
</html>
[/code]
& 'topmsg.js' file can be about:
[code]

//enter the message you wish to be shown, including html tags

var message='<table id="pleasewait" style="z-index:5;" bgcolor="#000000" border="1" bordercolor="#DDDDDD" cellpadding="0" cellspacing="0" height="150" width="200" id="Table1">';
message=message+'<tr>';
message=message+'<td width="100%" height="100%" bgcolor="#ECF0F6" align="center" valign="middle">';
message=message+'<font color="#FF0000"><b>Verifying data<br /><br />please wait........</b></font>';
message=message+'</td>';
message=message+'</tr>';
message=message+'</table>';

//enter 1 for always display, 2 for ONCE per browser session
var displaymode=1

//Set duration message should appear on screen, in seconds (10000=10 sec, 0=perpetual)
var displayduration=0

///////////////do not edit below this line////////////////////////////////////////
///sorry, edited,... :s///

var ie=document.all
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1

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){
topmsg_obj.style.left=parseInt(dsocleft)+window_width-topmsg_obj.offsetWidth-20
topmsg_obj.style.top=parseInt(dsoctop)
}
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 (displaymode==2)
return
if (document.layers){
topmsg_obj=new Layer(window.innerWidth)
topmsg_obj.document.write(message)
topmsg_obj.document.close()
positionit()
topmsg_obj.visibility="hide"
if (displayduration!=0)
setTimeout("topmsg_obj.visibility='hide'",displayduration)
}
else{
positionit()
topmsg_obj.style.visibility="visible"
if (displayduration!=0)
setTimeout("topmsg_obj.style.visibility='hidden'",displayduration)
}
setInterval("positionit()",100)
}
[/code]
Certainly not fully optimised for your needed, but,...

Have a fun with it,,

l8tr,,
Link to comment
Share on other sites

Thanks for reply, but this idea are very sux!

The dynamicdrive.com I grabbe many scripts.

But I need exact like google wait message.

Please access www.gmail.com and your account and see the wait message and move your scroll bar.
Link to comment
Share on other sites

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
But I need exact like google wait message.

Please access [b]www.gmail.com[/b] and your account and see the wait message and move your scroll bar.
[/quote]
I guess you were talking about google mail & not gmail,.. btw, I don't have any account on google,... so I will test it l8tr,,

-- off for a beer or 2 --
Link to comment
Share on other sites

lolĀ²

erfffff,,,,,, I knew that,... my head was tired,... sorry,... :)

Anyway, I have already a gmail account, & I haven't seen any message staying always on top as you explain it,,

hmm,, I put a link to some cool effects using javascript,... maybe it could help & give you some ideas,,
[a href=\"http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo\" target=\"_blank\"]some cool effects[/a],,

l8tr,,
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.