I got this neat scrolling code from the website known as codepunk. You can check out the original article at this link. The author did a very good job in explaining the concepts behind scrolling.
if (navigator.appName == "Microsoft Internet Explorer")
document.getElementById("myDiv").style.top = document.body.scrollTop;
document.getElementById("myDiv").style.top = document.documentElement.scrollTop;
document.getElementById("myDiv").style.top = window.pageYOffset + "px";
The scrollingDetector method is used to assign the coordinates to the Div control with the ID is “myDiv”. The Div control contains the GridView control. The line navigator.appName checks that the browser type of the user. This check is made because different browsers use different properties to interact with the control.
In the code below the function scrollingDetector() is called repeatedly after every 5 seconds.
The GridView Code:
The GridView HTML code is pretty simple, as all you need to do is to place the GridView inside the “myDiv” control.
<div id="myDiv" style="position:absolute; top:100px; right:100px;" >
<asp:GridView ID="GridView1" runat="server" CellPadding="4" Font-Names="Georgia"
<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" />
You can check out the animation effect below. Please keep in mind that for animation effect I have decreased the interval to one second instead of five seconds.
In this article I demonstrated how to attach the always on top animation effect to the DIV control. You can use the same effect with any control.
I hope you like the article, happy coding!