Click here to Skip to main content
Click here to Skip to main content

Smart Navigation in Scrollable Web Controls

, 2 Dec 2005 CPOL
Rate this:
Please Sign up or sign in to vote.
An article on maintaining smart navigation in web controls between page post backs.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mukesh Kumar Gupta
Software Developer (Senior)
India India
Currently working as a Senior Developer and enjoying software development from more than 8 years on .NET.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberSimonIgate3-Aug-10 6:40 
Generalfunctionality not working Pinmemberk.goutam00818-Jun-08 2:51 
Generalit's good and helpful Pinmemberhari10210-May-07 0:36 
Generaldinamic script to all div that you have PinmemberAqsakMaboul4-May-07 0:34 
GeneralVery helpful.................... Pinmembertprashanth10-Apr-07 2:15 
GeneralNice!!! PinmemberSatya Kanithi10-Jan-07 12:10 
GeneralRe: Nice!!! PinmemberJoeReynolds26-Feb-07 18:33 
GeneralASP.NET 2.0 always complains onscroll of a div Pinmemberkekelele14-Nov-06 9:13 
GeneralUse of Smart Navigation in Div interface PinmemberDominic Turner31-Oct-06 0:18 
GeneralThanks this helps me to solve the problem!! Pinmembersmileblue28-Jun-06 8:59 
GeneralRe: Thanks this helps me to solve the problem!! Pinmemberrobocato14-Jul-06 0:26 
GeneralThanks this was useful to me Pinmemberfroman11828-Dec-05 15:08 
GeneralRead this before rating the article PinmemberMukesh Kumar Gupta2-Dec-05 3:13 
QuestionVery usefull, but could be upgraded PinmemberWouter DW1-Mar-06 2:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 2 Dec 2005
Article Copyright 2005 by Mukesh Kumar Gupta
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid