[HTML] How to Keep Scroll position when Refreshing

[eX.Pro]

I'm tired of searching on the web. been like 2 days i search for this. I found a way but it work only with the main page, not with the DIV in the page. I will probably use Javascript reload function to evade the stupid sound on IE when you refresh. I know there is a way using AJAX but i can't find it.
My page is strictly HTML/Javascript. I can use a Frame instead of the DIV but it doesn't keep the scroll either. A way to refresh the DIV only instead of the whole main page would be nice too.

[Scope]

You can only scroll to a certain element on the page. There is no way to save a users scroll position and reload to it on refresh as all data is "refreshed" then. You can save it in a database if the user is logged in, or use AJAX or the javascript scrollTo function to actually scroll to a specific area, but no way of actually saving scroll position on a per user basis without saving it somehow (i.e. in a DB)

[eX.Pro]

This is the code that work for the main page but not a DIV/Frame only.
I use a cookie to save data.

Code: [Select]

<script type="text/javascript">
<!--
cookieName="page_scroll"
expdays=365
function setCookie(name, value, expires, path, domain, secure){
if (!expires){expires = new Date()}
document.cookie = name   "="   escape(value)   
((expires == null) ? "" : "; expires="   expires.toGMTString()) 
((path == null) ? "" : "; path="   path) 
((domain == null) ? "" : "; domain="   domain) 
((secure == null) ? "" : "; secure")
}

function getCookie(name) {
var arg = name   "="
var alen = arg.length
var clen = document.cookie.length
var i = 0
while (i < clen) {
var j = i   alen
if (document.cookie.substring(i, j) == arg){
return getCookieVal(j)
}
i = document.cookie.indexOf(" ", i)   1
if (i == 0) break
}
return null
}

function getCookieVal(offset){
var endstr = document.cookie.indexOf (";", offset)
if (endstr == -1)
endstr = document.cookie.length
return unescape(document.cookie.substring(offset, endstr))
}

function deleteCookie(name,path,domain){
document.cookie = name   "=" 
((path == null) ? "" : "; path="   path) 
((domain == null) ? "" : "; domain="   domain) 
"; expires=Thu, 01-Jan-00 00:00:01 GMT"
}

function saveScroll(){ // added function
var expdate = new Date ()
expdate.setTime (expdate.getTime()   (expdays*24*60*60*1000)); // expiry date

var x = (document.pageXOffset?document.pageXOffset:document.body.scrollLeft)
var y = (document.pageYOffset?document.pageYOffset:document.body.scrollTop)
Data=x   "_"   y
setCookie(cookieName,Data,expdate)
}
function loadScroll(){ // added function
inf=getCookie(cookieName)
if(!inf){return}
var ar = inf.split("_")
if(ar.length == 2){
window.scrollTo(parseInt(ar[0]), parseInt(ar[1]))
}
}

// add onload="loadScroll()" onunload="saveScroll()" to the opening BODY tag

// -->
</script>

[pikachu]

but no way of actually saving scroll position on a per user basis without saving it somehow (i.e. in a DB)

You can store it client side.

A way to refresh the DIV only instead of the whole main page would be nice too.

http://api.jquery.com/load/

[DavidK]

You can only scroll to a certain element on the page. There is no way to save a users scroll position and reload to it on refresh as all data is "refreshed" then. You can save it in a database if the user is logged in, or use AJAX or the javascript scrollTo function to actually scroll to a specific area, but no way of actually saving scroll position on a per user basis without saving it somehow (i.e. in a DB)

That's completely wrong. You also don't even need to use the javascript scrollTo function. The use of AJAX makes this even more simple depending on the content, as you can simply use a few hacks to append further data without losing the position of the div.

[eX.Pro]

AJAX > *

The use of AJAX makes this even more simple depending on the content, as you can simply use a few hacks to append further data without losing the position of the div.

Show us some code.

[DavidK]

Show us some code.

For you, no thanks.

[Scope]

That's completely wrong. You also don't even need to use the javascript scrollTo function. The use of AJAX makes this even more simple depending on the content, as you can simply use a few hacks to append further data without losing the position of the div.

Please tell me how its possible to save a users exact scroll position on page load without saving it in a db/file or cookie.

[pikachu]

Please tell me how its possible to save a users exact scroll position on page load without saving it in a db/file or cookie.

Also, I'm pretty sure that appending html to a div does not preserve the scroll position.

[DavidK]

That's completely wrong. You also don't even need to use the javascript scrollTo function. The use of AJAX makes this even more simple depending on the content, as you can simply use a few hacks to append further data without losing the position of the div.

Please tell me how its possible to save a users exact scroll position on page load without saving it in a db/file or cookie.

It depends on how you have your webpage setup. For example, a basic zooming to a position through a url would be:

<a name="lol" href="#">Zoom Here</a>

Now, if you were to enter the page and suffix it with #lol it would zoom to that position.

[Scope]

It can't be done...he is talking about when a user first loads the page. The scroll position has to be saved somewhere. I know AJAX can update pages dynamically and scroll with the new data, but thats not for the page load.

[DavidK]

Also, I'm pretty sure that appending html to a div does not preserve the scroll position.

The use of AJAX makes this even more simple depending on the content, as you can simply use a few hacks to append further data without losing the position of the div.

Yes, yes you can I've worked on a few ajax chat clients and its always worked for me.

[pikachu]

Yes, yes you can I've worked on a few ajax chat clients and its always worked for me.

I've also worked on a few ajax chat clients, and I can assure you that it does not work.  Just to be sure, I just looked at some source code and found a scroll to bottom method for a div:

Code: [Select]

function stb() {
    var objDiv = document.getElementById("message_div");
    objDiv.scrollTop = objDiv.scrollHeight;
}
Not the most elegant, but it does what it's supposed to.

[кηιgнтяι∂єя]

http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/cookies/scrollpos.htm

http://www.webdeveloper.com/forum/showthread.php?t=58146

[pikachu]

Knight, eX.Pro already posted that exact code.

[DavidK]

I can assure you that it does not work.

Here's an open source example of you being wrong: http://www.phpfreechat.net/demo

[pikachu]

Here's that same open source example of me being right:

Code: [Select]

  /**
   * Scroll down the message list area by elttoscroll height
   * - elttoscroll is a message DOM element which has been appended to the tabid's message list
   * - this.elttoscroll is an array containing the list of messages that will be scrolled
   *   when the corresponding tab will be shown (see setTabById bellow).
   *   It is necessary to keep in cache the list of hidden (because the tab is inactive) messages
   *   because the 'scrollTop' javascript attribute
   *   will not work if the element (tab content) is hidden.
   */
  scrollDown: function(tabid, elttoscroll)
  {
    // check the wanted tabid is the current active one
    if (this.getTabId() != tabid)
    {
      // no it's not the current active one so just cache the elttoscroll in the famouse this.elttoscroll array
      if (!this.elttoscroll.get(tabid)) this.elttoscroll.set(tabid, Array());
      this.elttoscroll.get(tabid).push(elttoscroll);
      return;
    }
    // the wanted tab is active so just scroll down the tab content element
    // by elttoscroll element height (use 'offsetHeight' attribute)
    var content = this.getChatContentFromTabId(tabid);

    // the next line seems to help with IE6 scroll on the first load
    // http://sourceforge.net/tracker/index.php?func=detail&aid=1568264&group_id=158880&atid=809601
    var dudVar = content.scrollTop;
    content.scrollTop += elttoscroll.offsetHeight+2;
    this.scrollpos.set(tabid, content.scrollTop);
  },

[DavidK]

Also, I'm pretty sure that appending html to a div does not preserve the scroll position.

Here's you being a dumbass: http://battlehost.us/ricky.html



I'll then end your charade with this:

[кηιgнтяι∂єя]

Oh, my bad.