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

Maintain Scroll Position in Panel, Div

, 30 Nov 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Maintain Scroll position of panel or div using the code

Introduction

Hi, friends. After reading this article, you will be able to maintain the scroll position in panel or div of any Web page. There are lots of techniques to do this, but I was facing a problem so I used the below code and solved the problem. If you want to maintain the scroll position of a Web page, then it is easy to do so through the ASPX page property.

MaintainScrollPosition = "true"

But here the problem is with div or panel in Web page.

Background

I wanted to maintain the scroll position of div or panel in a Web page. I got a solution for the same but after implementing it, I was faced with another problem. If I put an alert before setting the position, I was getting the desired output. But when I removed the alert, it was not working. That was strange! So I implemented the below code to achieve the same.

This article will describe every single line of code.

Using the Code

This is the code in JavaScript from which we can do the same thing. But the problem arises at one point.

First of all, put one div and give Id = "myDIV". Assign height = 200px.

Now take on gridview and put into div. Bind data to gridview and make sure you have date in gridview so div can scroll.

Now copy and paste this code in the ASPX page in the script tag:

// Code
window.onload = function()
{
    //Get value from cookie
    var strCook = document.cookie;
    if(strCook.indexOf("!~")!=0)
    {  
        var intS = strCook.indexOf("!~");  
        var intE = strCook.indexOf("~!"); 
        // find y position of Div
        var strPos = strCook.substring(intS+2,intE); 
        // Set y position of Div
        document.getElementById("myDIV").scrollTop = strPos;   
    }   
}   

// call  this function onscroll of div. You will get red line(i.e. error)
// but don't bother about that.
function SetDivPosition()
{ 
    // To get y position of Div
    var intY = document.getElementById("myDIV").scrollTop; 
    // Set cookie value
    document.cookie = "yPos=!~" + intY + "~!"; 
}

Now after scrolling div when clicking on the last row of gridview, it's again going in the first row. Here I have put an alert just above one line. See the code below:

//Code
alert("Any Alert.... Hello Friend");
document.getElementById("myDIV").scrollTop = strPos;

Now, when I run it again after clicking ok on the alert, it works perfectly....!!
So now I tried to solve this bug. I searched a lot, but had no luck. Here is one solution for that which I came up with.

Add one HTML hidden field and set Id = myHidden.

// Code
// Call onclick event of Div
function SetDivPosition()
{
    // Using this line e get it !!
    window.setTimeout("SetNow('" + 
        document.getElementById("myHidden").innerHtml + "')",200);
}

var strPos;

function SetNow(strPos)
{
    document.getElementById("myDiv").scrollTop = strPos;
}

// Call onscroll event of Div
function GetDivPosition()
{ 
    document.getElementById("myHidden").innerHtml = 
            document.getElementById("myDiv").scrollTop;
}

Here is the output that we would like to see. Really short and sweet code.

Points of Interest

You need to try until you get your desire output. There are lots of ways to achieve it.

History

  • 1st December, 2007: Initial post

License

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

Share

About the Author

Sun Rays
Team Leader
India India
Working as a Team Lead in MNC located at India.
In IT world, I have worked with Microsoft Technologies and always ready for R&D.
Worked with Website Development and Windows based applications as well.
 

New errors are really good and being happy to resolve those.....

Comments and Discussions

 
GeneralThanks Pinmemberscimmionsons30-Nov-12 4:20 
GeneralThanks to post this article Pingroupbhagwat prasad17-Jul-12 2:30 
GeneralThank you, you helped. Here is what I got working from your example: [modified] PinmemberAaron_B17-Jun-12 23:11 
GeneralRe: Thank you, you helped. Here is what I got working from your example: PinmemberSun Rays17-Jun-12 23:48 
GeneralRe: Thank you, you helped. Here is what I got working from your example: [modified] PinmemberAaron_B18-Jun-12 14:14 
GeneralThank you so much! PinmemberGornHorse24-Mar-09 20:27 
GeneralMaintain Scroll Position in Panel, Div Pinmember123456pra4-Dec-08 1:52 
GeneralRe: Maintain Scroll Position in Panel, Div Pinmember Sun Rays 4-Dec-08 2:09 
GeneralRe: Maintain Scroll Position in Panel, Div PinmemberAaron_B18-Jun-12 14:19 

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
Web02 | 2.8.141223.1 | Last Updated 1 Dec 2007
Article Copyright 2007 by Sun Rays
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid