Maintain Scroll Position of DIV using JavaScript – ASP.NET 2.0

Some people have some problems in maintaining the position of the DIV. Initially, The most of people are using htc for solving this problem. but there are so many disadvantages of using htc such as it works only in Internet Explorer, it doesn’t work properly with Visual Studio 2005 and so on.

Finally, I got the solution for solving this problem.. Using Javascript for keeping the scroll position is the best way to go.. JavaScript helps us to know the current position of DIV. Plus, we can use HTTP Cookie for storing the value of the previous position of DIV tag.

SouceCode Download : http://michaelsync.net/demo/MaintainScroll.zip

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.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("grdWithScroll").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}

I have tested this code with IE6, 7 and Mozilla Firefox. It’s working very fine.
Please let me know if you have any problem with this coding. Thank you.
Special Thanks to Jim Ross and Eric Pascarello.

UPDATED Maintain Scroll Position of DIV using ASP.NET Ajax by Brad Alcock (Thanks for sending this mail, Brad.)

hi. here’s the code with a very brief explanation on what goes on behind the scenes.

a little different to what you did, but sort of on the same track. I’m sure you can find a method of working around it to fit in with your post ^^

right, my div’s id was panel1, I basically created a cookie for the onscroll of the div in the function SetDivPosition(). the read cookie is read using the stringbuilder in the C# Page_load code underneath.

  
function SetDivPosition(){
var intY = document.getElementById("Panel1").scrollTop;
var date = new Date();
date.setTime(date.getTime()+(1*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = "cookie1"+"="+intY+expires+"; path=/";
document.title = intY;
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

here is the string builder in the page Load. the part in the if(!IsPostback) is there so that when the page is loaded for the very first time, it removes any possibility of a cookie being there (incase the page is returned to within an hour. ) that means the scrollbar will not suddenly jump to a position at arb times like first time page is loaded.
don’t forget to use System.Text; otherwise it will throw an error.

 
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
StringBuilder sbScript = new StringBuilder();
sbScript.Append("<script language='JavaScript' type='text/javascript'>");
sbScript.Append("document.cookie = cookie1 + \"=\" + \"\" + -1 + \"; path=/\";");

sbScript.Append("</script>");
// Make use ScriptManager to register the script
ScriptManager.RegisterStartupScript(this, this.GetType(), "@@@@MyCallBackAlertScript", sbScript.ToString(), false);

}
StringBuilder sbScript1 = new StringBuilder();
sbScript1.Append("<script language='JavaScript' type='text/javascript'>");
sbScript1.Append("var strCook = readCookie(\"cookie1\"); "+
"document.getElementById(\"Panel1\").scrollTop = strCook;");
sbScript1.Append("</script>");

// Make use ScriptManager to register the script
ScriptManager.RegisterStartupScript(this, this.GetType(), "@@@@MyCallBackAlertScript", sbScript1.ToString(), false);
}

Regards,
Brad

/*References
*
* Maintain Scroll Position in any Page Element
* http://authors.aspalliance.com/jimross/Articles/MaintainScrollPos.aspx
*
* Remember a Div’s Scroll Position
* http://radio.javaranch.com/pascarello/2005/07/18/1121709316718.html
*/

Useful Links

Forums N Portal

Riverside Internet Forums (***)

http://www.codeproject.com/aspnet/aspnetforums.asp

Discuss .NET (****)

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=2247&lngWId=10

Discussion Forum ( A-Board v1.1)

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=4779&lngWId=10

Simple Discussion Forum

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=4808&lngWId=10

Simple Message Board

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=424&lngWId=10

Updated ASP .NET Forum

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=439&lngWId=10

Simple open source forum engine

http://www.codeproject.com/Purgatory/neat_forum.asp

Neat Forum

http://sourceforge.net/projects/neatforum

ITCN ASP.NET Forum 2004

http://www.codeproject.com/aspnet/itcnforum.asp

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=2153&lngWId=10

Personal .NET Portal

http://sourceforge.net/projects/dotnetportal

WYSIWYG Editors

htmlArea – Turn any TEXTAREA into a WYSIWYG editor

http://www.codeproject.com/jscript/htmlarea.asp 

JavaScript Control Text Design Templates for ASP.NET

http://www.codeproject.com/aspnet/TextEditControl.asp

Chat Bot

Artificial Intelligence (AI) Chatbot

http://www.codeproject.com/useritems/AI_Chatbot.asp

A Simple ] AI Chatbot Wizard: Create, Train and Chat

http://www.codeproject.com/useritems/AI_Chatbot_Wizard.asp

Photo Gallery

Web Image Browser – Lots of images and no time to publish them?

http://www.codeproject.com/csharp/imagebrowser.asp

“Filmstrip” or CatalogView Photo Gallery Sample (***************)

http://www.codeproject.com/aspnet/CatalogViewPhotoGallery.asp

Photo album browsing control

http://www.codeproject.com/aspnet/NickPhotoBrowser.asp

ASP.NET PhotoBook

http://www.codeproject.com/aspnet/Photobook.asp

Dynamic Photogallery in ASP.NET and C# – V1

http://www.codeproject.com/aspnet/Photo_gallery.asp

An ASP.NET thumbnail solution

http://www.codeproject.com/aspnet/thumbtools.asp

Guestbook 

Guestbook for ASP.NET

http://www.codeproject.com/aspnet/guestbooklk.asp

ASP.NET Guestbook Application

http://www.codeproject.com/aspnet/aspnet_guestbook.asp

Controls

Fast ASP.NET Hit Counter with Full Digit Graphic File Support

http://www.codeproject.com/aspnet/fastcustomhitcounter.asp

PleaseWaitButton ASP.NET Server Control

http://www.codeproject.com/aspnet/PleaseWaitButton.asp

PleaseWaitButton ASP.NET Server Control

http://www.codeproject.com/aspnet/PleaseWaitButton.asp

Handy XP Style Menu

http://www.codeproject.com/jscript/leftmenu.asp

Yahoo! mail and Hotmail like Rich Text Editor

http://www.codeproject.com/jscript/w3richtechedit.asp.

Another XP style panel bar for Web

http://www.codeproject.com/jscript/XPPanelbar.asp

Windows XP Style Menu

http://www.codeproject.com/jscript/windowsxpstylemenu.asp

An Open File Dialog in JavaScript

http://www.codeproject.com/jscript/JavaScriptOpenDialog.asp

——————————————————

Yahoo UI (*********)

http://developer.yahoo.com/yui/index.html

Nifty Corners

http://www.html.it/articoli/niftycube/index.html

http://www.web-graphics.com/

This 3D Gogofrog Web site is worth taking a look at. 
See it at http://www.gogofrog.com/userdata/SMYSITE 

https://sourceforge.net/projects/sarissa/

The Ultimate JavaScript Client Sniffer, Version 3.03: Determining Browser Vendor, Version, and Operating System With JavaScript

http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html