Always on Top JavaScript
Recently, I had to implement a functionality in which the control had to appear on the top of the page even if the user scrolls down the page. I looked up some tutorials about this and finally implemented a nice easy solution. Check out the following code which displays the GridView control even if you scroll down the page.
Here is the JavaScript Code:
<script language ="javascript" type="text/javascript">
function scrollingDetector(){
if (navigator.appName == "Microsoft Internet Explorer")
{
//alert(document.documentElement.scrollTop);
document.getElementById("myDiv").style.top = document.documentElement.scrollTop;
}
// For FireFox
else{ document.getElementById("myDiv").style.top = window.pageYOffset + "px"; }
}
function startScrollingDetector()
{
setInterval("scrollingDetector()",1000);
}
</script>
And the rest of the HTML code:
<body onload="startScrollingDetector()">
<form name="form1" runat="server">
<div id="myDiv" style="position:absolute; top:100px; right:100px;" >
<asp:GridView ID="GridView1" runat="server" CellPadding="4" Font-Names="Verdana"
ForeColor="#333333" GridLines="None">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</div>
</form>