"Please Wait" Scrolling Off Screen

J

John Walker

Hi,

I have a webpage designed with asp.net 2.0.

Is there a way to display a "please wait" message to the screen horizontally
centered and veritcally 20px from the VISIBLE top of the page, regardless of
what kind of scrolling the user has done?

I am currently displaying a "please wait" message (the DIV section shown
below, which i'm showing/hiding) when the user clicks save, but the user is
sometimes scrolled down the page so the "please wait" message will not be
visible to the user.


<DIV id="popDivComments" style="LEFT: 100px; POSITION: absolute; TOP: 100px">
<TABLE style="FONT-SIZE: 18px; BORDER-LEFT-COLOR: blue;
BORDER-BOTTOM-COLOR: blue; WIDTH: 334px; COLOR: blue; BORDER-TOP-COLOR: blue;
HEIGHT: 72px; BACKGROUND-COLOR: white; BORDER-RIGHT-COLOR: blue; border-SIZE:
1">
<TR>
<TD style="FONT-SIZE: 18px; COLOR: blue; BACKGROUND-COLOR: white;
TEXT-ALIGN: center">Please Wait...</TD>
<TR>
</TR>
</TABLE>
</DIV>


Thanks!
John
 
A

Anthony Jones

John Walker said:
Hi,

I have a webpage designed with asp.net 2.0.

Is there a way to display a "please wait" message to the screen horizontally
centered and veritcally 20px from the VISIBLE top of the page, regardless of
what kind of scrolling the user has done?

I am currently displaying a "please wait" message (the DIV section shown
below, which i'm showing/hiding) when the user clicks save, but the user is
sometimes scrolled down the page so the "please wait" message will not be
visible to the user.


<DIV id="popDivComments" style="LEFT: 100px; POSITION: absolute; TOP: 100px">
<TABLE style="FONT-SIZE: 18px; BORDER-LEFT-COLOR: blue;
BORDER-BOTTOM-COLOR: blue; WIDTH: 334px; COLOR: blue; BORDER-TOP-COLOR: blue;
HEIGHT: 72px; BACKGROUND-COLOR: white; BORDER-RIGHT-COLOR: blue; border-SIZE:
1">
<TR>
<TD style="FONT-SIZE: 18px; COLOR: blue; BACKGROUND-COLOR: white;
TEXT-ALIGN: center">Please Wait...</TD>
<TR>
</TR>
</TABLE>
</DIV>

Assuming the DIV above is a child of the BODY element (which may or may not
be scrolled by the user). Take a look at this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">

div.#popComments
{
position:absolute; left:100px;
border:1px solid blue; background-color:white; padding:32px
}
div.#popComments span {font-size:18px; color:blue;}

</style>
<script type="text/javascript">

function toggleComment()
{
var div = document.getElementById("popComments")
if (div.style.display == 'none')
{
div.style.top = (100 + document.body.parentNode.scrollTop).toString() +
"px"
div.style.display = 'block'
}
else
{
div.style.display = 'none'
}
}
</script>
</head>

<body onclick="toggleComment()" style="background-color:white">
Repeat this content<br />

<div id="popComments" style="top: 100px; display:none">
<span>Please Wait...</span>
</div>

</body>

</html>

I've simplified the box using some CSS. Note the key point is to use the
scrollTop property of the element that is being scrolled. Which in this
case is the entire HTML document which is retrieved as the parentNode of the
body.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top