By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,068 Members | 1,734 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,068 IT Pros & Developers. It's quick & easy.

"Please Wait" Scrolling Off Screen

P: n/a
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

Jun 27 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a

"John Walker" <Jo********@discussions.microsoft.comwrote in message
news:61**********************************@microsof t.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="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.
--
Anthony Jones - MVP ASP/ASP.NET
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.