"Please Wait" Scrolling Off Screen

John Walker · Apr 14, 2008

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

Anthony Jones · Apr 14, 2008

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.

Please Help?	0	Jul 23, 2022
Can I modify the tooltip display on an <input type="xx"> statement?	2	Oct 22, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Image on header	2	May 2, 2024
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

"Please Wait" Scrolling Off Screen

John Walker

Anthony Jones

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads