Following key things to be addressed.
- It should be on top-center of the page
- It should be on top all other HTML controls
- When scrolling it should be placed on relative position of the current scroll position.
In addition to the UpdatePanel, I will use </div>, CSS style and javaScript.
Here we go.
- Add a div tag within body element.
Note that id and class attributes are necessary.<div class="divProg" id="divProg"></div>
- Add following css class to the web page or style sheet file. Keep in mind, without position: absolute; z-index: 10; css properties this won’t work as we expected.
.divProg { position: absolute; left: 0px; top: 0px; width: 100px; height: 0px; z-index: 10; border: 1px none #000000; visibility: hidden; background-color: #FFF1A8; font-weight: bold; padding: 5px 10px 5px 10px; }
- Now we want to display div on top-center of the screen as well as move its top position relative to the current scroll position. To address this we will creates following 3 javascript functions.
To get current Y position of scroll,
To set current top position of div,function getScroll_Y() { return document.documentElement.scrollTop; }
Write a function to toggle display for the div.function setDivTop() { if (document.getElementById("divProg") != null) { theDiv= document.getElementById("divProg"); } else { return; } theDiv.style.top = getScroll_Y() + "px"; }
function displayDiv(display) { if (document.getElementById("divProg") != null) { theDiv = document.getElementById("divProg"); } else { return; } if (display) { var width = document.body.offsetWidth; var height = document.body.offsetHeight; if (!width) { width = window.innerWidth; height = window.innerHeight; if (!width) { width = screen.width; height = screen.height; } } // To center the div, we need to deduct its half of // width from half of screen width. So we set div width =100 // in css, so that deduct by 50 theDiv.style.left = width / 2 - 50; theDiv.style.top = getScroll_Y(); theDiv.style.height = 25; theDiv.innerText = 'Working...'; theDiv.style.visibility = 'visible'; } else { theDiv.style.visibility = 'hidden'; } }
- Now we want to handle request start and request end events. we will be able to use following code with assist of ajax extension library.
// Requests Events // ============================================ var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); function InitializeRequest(sender, args) { if (prm.get_isInAsyncPostBack()) { args.set_cancel(true); } displayDiv(true); } function EndRequest(sender, args) { if (args.get_error()) { alert(args.get_error().message); args.set_errorHandled(true); } displayDiv(false); } //===============================================
- Set page's scroll event,
<body onscroll="setDivTop()">
Download Sample | |
File Size: 18K |
No comments:
Post a Comment