Recently, I was working on a project that required that certain control always stay at the top of the page even if the user scrolls down the page. In this article I will demonstrate how to keep the GridView control at the top of the page using JavaScript.

Introduction:

Recently, I was working on a project that required that certain control always stay at the top of the page even if the user scrolls down the page. In this article I will demonstrate how to keep the GridView control at the top of the page using JavaScript.

Scrolling Code:

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.

Let’s check out the JavaScript code:

function scrollingDetector(){
 if (navigator.appName == "Microsoft Internet Explorer")
 {     
     if(!document.documentElement.scrollTop)
     document.getElementById("myDiv").style.top = document.body.scrollTop;
     else
     document.getElementById("myDiv").style.top = document.documentElement.scrollTop;
 }
 
 
 else{
   
    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.

The above script will return you the position of the scroll bar. But, we need to call it repeatedly so the Div can change its position. For this reason I have created a new method called startScrollingDetector(). This method calls the JavaScript function setInterval which in turns call a any method at regular intervals.

In the code below the function scrollingDetector() is called repeatedly after every 5 seconds.

function startScrollingDetector()
 {
     setInterval("scrollingDetector()",5000);
 }

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"
        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>

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.

Conclusion:

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!