Smart Navigation In Scrollable Web Controls.

Introduction

Now a days it is very common between programmers to use HTML <div> tag to display scrollable Data Grids. 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 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 entire page with it.

Data Grid control of Microsoft .NET does not have a inbuilt scroll bar and to display scrollable Data Grid we need to embed Data Grid control within a HTML <div>. It is very easy to display such Data Grid 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 Java Script

A very simple code snippet of Java Script provides smart navigation and maintains scroll position of entire web page, this process uses window object and cookies collection of 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>

Above Java Script sets the vertical scroll position of page in page cookie section and on window.onload it retrieve back scrolling position from cookie section and set document.body.scrollTop according to it.  

Setting Scroll Position of <div> Containing Controls Through Java Script

Now suppose you have a scrollable Data Grid on Page than it is very simple to associate the scroll positions of <div> containing Data Grid to page cookie section and than on same window.onload event we can set the scroll position of <div> also, to do this we need to add a new function which executes on scroll event of <div> and set the scroll position to the page cookie and a modification in function attached with 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 setScrollPos() function on <div> tags onScroll event to do this modify HTML specification of <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>

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 Data Grids. Hope this article has given you a better idea to provide smart navigation on web pages. 

Thanks in advance for your comments.