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