"John Walker" <Jo********@dis cussions.micros oft.comwrote in message
news:61******** *************** ***********@mic rosoft.com...
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="popDivComme nts" 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.dt d">
<html>
<head>
<style type="text/css">
div.#popComment s
{
position:absolu te; left:100px;
border:1px solid blue; background-color:white; padding:32px
}
div.#popComment s span {font-size:18px; color:blue;}
</style>
<script type="text/javascript">
function toggleComment()
{
var div = document.getEle mentById("popCo mments")
if (div.style.disp lay == 'none')
{
div.style.top = (100 + document.body.p arentNode.scrol lTop).toString( ) +
"px"
div.style.displ ay = 'block'
}
else
{
div.style.displ ay = 'none'
}
}
</script>
</head>
<body onclick="toggle Comment()" style="backgrou nd-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.
--
Anthony Jones - MVP ASP/ASP.NET
