Smart Navigation in Scrollable Web Controls

Introduction

Nowadays it is very common among programmers to use the HTML <div> tag to display scrollable datagrids. But during post backs of ASP.NET pages, maintaining the scroll position is always a tedious task, and if a page contains multiple scrollable grids, then it causes some real problems to maintain the original scroll position for grids. In this article, I am going to present a very easy way to maintain scroll position of various <div> tags as well as how to maintain the smart navigation of an entire page with it.

The DataGrid control of Microsoft .NET does not have an in-built scrollbar, and to display a scrollable DataGrid, we need to embed the DataGrid control within an HTML <div>. It is very easy to display such a DataGrid like this:

<div id="div1" style="OVERFLOW: auto; WIDTH: 100%; 
         BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; 
         HEIGHT: 200px; BORDER-BOTTOM-STYLE: none">
    Data Grid can be placed here.
</div>

Setting Smart Navigation of Page Through JavaScript

This very simple JavaScript code provides smart navigation and maintains the scroll position of the entire web page. This process uses the window object and the cookies collection of the page. The code is:

<script language = "javascript">
    ///Attaching a function on window.onload event.
    window.onload = function()
    {
        var strCook = document.cookie; 
        if(strCook.indexOf("!~")!=0)
        { 
            var intS = strCook.indexOf("!~"); 
            var intE = strCook.indexOf("~!"); 
            var strPos = strCook.substring(intS+2,intE); 
            document.body.scrollTop = strPos; 
        } 
    }
    /// Function to set Scroll position of page before postback. 
    function SetScrollPosition()
    { 
        var intY = document.body.scrollTop; 
        document.cookie = "yPos=!~" + intY + "~!"; 
    }
    /// Attaching   SetScrollPosition() function to window.onscroll event.
    window.onscroll = SetScrollPosition;
</script>

The above JavaScript code sets the vertical scroll position of the page in the page cookie section, and on window.onload, it retrieves back the scrolling position from the cookie section and sets document.body.scrollTop according to its value.

Setting the Scroll Position of a <div> Containing Controls Through JavaScript

Now suppose you have a scrollable DataGrid on a page; it is very simple to associate the scroll positions of the <div> containing the DataGrid to the page cookie section, and then on the same window.onload event, we can set the scroll position of the <div> as well. To do this, we need to add a new function which executes the OnScroll event of the <div> and set the scroll position to the page cookie and a modification in the function attached with the window.onload event:

<script language = "javascript">
    
///This function sets the scroll position of div to cookie.
function setScrollPos()
{
    var divY = document.getElementById('div1').scrollTop;
    document.cookie = "divPos=!*" + divY + "*!";
}

///Attaching a function on window.onload event.
window.onload = function()
{
    var strCook = document.cookie;
    if(strCook.indexOf("!~")!=0)
    {
        var intS = strCook.indexOf("!~");
        var intE = strCook.indexOf("~!");
        var strPos = strCook.substring(intS+2,intE);
        document.body.scrollTop = strPos;
    }
    /// This condition will set scroll position od <div>.
    if(strCook.indexOf("!*")!=0)
    {
        var intdS = strCook.indexOf("!*");
        var intdE = strCook.indexOf("*!");
        var strdPos = strCook.substring(intdS+2,intdE);
        document.getElementById('div1').scrollTop = strdPos;
    }
}
/// Function to set Scroll position of page before postback.
function SetScrollPosition()
{
    var intY = document.body.scrollTop;
    document.cookie = "yPos=!~" + intY + "~!";
}
/// Attaching   SetScrollPosition() function to window.onscroll event.
window.onscroll = SetScrollPosition;
</script>

Now we need to call the setScrollPos() function on the <div> tag's onScroll event. To do this, modify the HTML specification of the <div> like this:

<div id="div1" style="OVERFLOW: auto; WIDTH: 100%; BORDER-TOP-STYLE: none; 
   BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 200px; 
   BORDER-BOTTOM-STYLE: none" onscroll="setScrollPos();">
          Data Grid can be placed here.
</div>

The above simple procedure provides smart navigation to scrolling <div> tags irrespective of what the <div> contains, but a very common use of it is in scrollable datagrids. Hope this article has given you a better idea to provide smart navigation on web pages.

Thanks in advance for your comments.