"Please Wait" Scrolling Off Screen

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

John Walker - 14 Apr 2008 16:49 GMT

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

Reply to this Message

Anthony Jones - 14 Apr 2008 22:37 GMT

> Hi,
>
[quoted text clipped - 21 lines]
> </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.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Rate this thread:

"Please Wait" Scrolling Off Screen

Free Magazines