Robert Hill Robert Hill - 9 months ago 56 Question

Positioning a DIV tag at startup based on scroll position

I have a lookup window which is called from an ASP.NET GridView. When the button is clicked I am showing a DIV tag where an account number can be looked up. The problem is that if there are many rows in the GridView the DIV is shown by default near the top of the page so the user has to scroll up in order to see it.

I have written the JavaScript to determine the current scroll position and to position the window accordingly, however, when the script executes the scroll position incorrectly shows zero. I'm not sure if this is because the scroll position has yet to be determined at page startup or not. I placed a link on the page that when clicked attempts to move the div based on the scroll position. The JavaScript is loaded as part of the onClick event of the anchor tag so at this point the page is fully loaded. When I click this link the proper scroll position is determined and the window is properly re-positioned.

Is there another way to get the proper scroll position at startup?

Here is the VB.NET code I am using to register the startup script...

Dim strStartupScript As New System.Text.StringBuilder()
strStartupScript.Append("<script type=""text/javascript"">")
strStartupScript.Append("var scrOfY = 0; ")
strStartupScript.Append("scrOfY = getScrollXY(); ")
'strStartupScript.Append("alert(scrOfY); ")
strStartupScript.Append("var div = document.getElementById('divLookupAccount'); ")
strStartupScript.Append("var newTop = 400; ")
strStartupScript.Append("newTop = newTop + (scrOfY / 2); ")
strStartupScript.Append("var num = newTop; ")
strStartupScript.Append("var n = num.toString(); ")
strStartupScript.Append("var s = n + 'px'; ")
strStartupScript.Append(" = s; ")
Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "AccountLookupShow", strStartupScript.ToString)

Here is the code for the "getScrollXY()" function referenced in the script...

function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if (typeof (window.pageYOffset) == 'number') {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;

return (scrOfY);

Thanks in advance if you can help me out with this.

Mx. Mx.

How about using a fixed div?


<div class="fixedDialog" style="
    margin: auto;
    background: gray;
    padding: 10%;
    font-size: 50px;
    text-align: center;
    position: fixed;
    margin: 50px 30%;
    z-index: 9999;
">Fixed Dialog</div>

places a dialog outside of the pageflow. enter image description here