• January 27, 2023, 11:40:08 pm

Author Topic: [HTML] How to Keep Scroll position when Refreshing  (Read 12659 times)

eX.Pro

  • Enthusiast
  • ****
  • Posts: 54
  • I'm cool, I'm hot....I'm everything you're not.
[HTML] How to Keep Scroll position when Refreshing
« on: November 20, 2010, 03:58:51 pm »
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.

eX.Pro, shut the fuck up, I'm removing your posts for a reason.
[17:23:19] <ZekcaH:0> im following u around the board removing ur posts eX.Pro
[17:23:22] <ZekcaH:0> its nearly a full time job

Scope

  • Founder
  • Main Administrator
  • Hero Member
  • *******
  • Posts: 3,143
    • BnetWeb
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #1 on: November 20, 2010, 04:08:39 pm »
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)

"Capitalization is the difference between helping your Uncle Jack off a horse and helping your uncle jack off a horse."

eX.Pro

  • Enthusiast
  • ****
  • Posts: 54
  • I'm cool, I'm hot....I'm everything you're not.
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #2 on: November 20, 2010, 04:32:03 pm »
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>

eX.Pro, shut the fuck up, I'm removing your posts for a reason.
[17:23:19] <ZekcaH:0> im following u around the board removing ur posts eX.Pro
[17:23:22] <ZekcaH:0> its nearly a full time job

pikachu

  • Administrator
  • Hero Member
  • *******
  • Posts: 3,344
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #3 on: November 20, 2010, 06:49:35 pm »
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

  • Sr. Member
  • ******
  • Posts: 305
  • Death from Above
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #4 on: November 21, 2010, 11:50:27 pm »
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.
« Last Edit: November 21, 2010, 11:59:00 pm by DavidK »


"...fast forward to the end, fast forward to the end, cause i'm the hero in this movie..." - Pastor Shepherd

eX.Pro

  • Enthusiast
  • ****
  • Posts: 54
  • I'm cool, I'm hot....I'm everything you're not.
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #5 on: November 22, 2010, 12:09:52 am »
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.

eX.Pro, shut the fuck up, I'm removing your posts for a reason.
[17:23:19] <ZekcaH:0> im following u around the board removing ur posts eX.Pro
[17:23:22] <ZekcaH:0> its nearly a full time job

DavidK

  • Sr. Member
  • ******
  • Posts: 305
  • Death from Above
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #6 on: November 22, 2010, 12:21:09 am »
Show us some code.
For you, no thanks.


"...fast forward to the end, fast forward to the end, cause i'm the hero in this movie..." - Pastor Shepherd

Scope

  • Founder
  • Main Administrator
  • Hero Member
  • *******
  • Posts: 3,143
    • BnetWeb
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #7 on: November 22, 2010, 12:23:53 am »
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.

"Capitalization is the difference between helping your Uncle Jack off a horse and helping your uncle jack off a horse."

pikachu

  • Administrator
  • Hero Member
  • *******
  • Posts: 3,344
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #8 on: November 22, 2010, 12:26:01 am »
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

  • Sr. Member
  • ******
  • Posts: 305
  • Death from Above
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #9 on: November 22, 2010, 12:37:38 am »
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.
« Last Edit: November 22, 2010, 12:48:15 am by DavidK »


"...fast forward to the end, fast forward to the end, cause i'm the hero in this movie..." - Pastor Shepherd

Scope

  • Founder
  • Main Administrator
  • Hero Member
  • *******
  • Posts: 3,143
    • BnetWeb
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #10 on: November 22, 2010, 12:39:02 am »
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.

"Capitalization is the difference between helping your Uncle Jack off a horse and helping your uncle jack off a horse."

DavidK

  • Sr. Member
  • ******
  • Posts: 305
  • Death from Above
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #11 on: November 22, 2010, 12:44:09 am »
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.


"...fast forward to the end, fast forward to the end, cause i'm the hero in this movie..." - Pastor Shepherd

pikachu

  • Administrator
  • Hero Member
  • *******
  • Posts: 3,344
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #12 on: November 22, 2010, 12:51:14 am »
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.


pikachu

  • Administrator
  • Hero Member
  • *******
  • Posts: 3,344
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #14 on: November 22, 2010, 12:59:49 am »
Knight, eX.Pro already posted that exact code.

DavidK

  • Sr. Member
  • ******
  • Posts: 305
  • Death from Above
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #15 on: November 22, 2010, 01:04:27 am »
I can assure you that it does not work.
Here's an open source example of you being wrong: http://www.phpfreechat.net/demo
« Last Edit: November 22, 2010, 01:06:49 am by DavidK »


"...fast forward to the end, fast forward to the end, cause i'm the hero in this movie..." - Pastor Shepherd

pikachu

  • Administrator
  • Hero Member
  • *******
  • Posts: 3,344
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #16 on: November 22, 2010, 01:32:39 am »
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

  • Sr. Member
  • ******
  • Posts: 305
  • Death from Above
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #17 on: November 22, 2010, 02:30:53 am »
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:

« Last Edit: November 22, 2010, 03:12:37 am by DavidK »


"...fast forward to the end, fast forward to the end, cause i'm the hero in this movie..." - Pastor Shepherd

кηιgнтяι∂єя

  • Funny huh?
  • Hero Member
  • *******
  • Posts: 1,583
  • Clan RaGe
    • .::Clan RaGe::.
Re: [HTML] How to Keep Scroll position when Refreshing
« Reply #18 on: November 22, 2010, 01:56:13 pm »
Oh, my bad.


 

newBalance by DzinerStudio