Solved

Remembering the scrollbar position of a DIV between pages

Posted on 2003-10-21
2
303 Views
Last Modified: 2008-02-01
Hi all,

I've got a page of thumbnail images, that are set in a DIV with the overflow set to auto, so that the user can scroll through the images within the set area.

The user can click on a thumbnail to view further information about that product, then click a link to take them back to the page of thumbnails.

My problem is this. When the user returns from the details page, I'd like them to be returned to it with the scrollbars exactly how they left them. By default they're being returned to the top of the DIV again, and have to scroll down to continue browsing the thumbnails from where they left off.

I found this bit of code, which is very useful:

<SCRIPT LANGUAGE="JavaScript">
<!--

var db = (document.body) ? 1 : 0;
var scroll = (window.scrollTo) ? 1 : 0;

function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

function saveScroll() {
  if (!scroll) return;
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var x = (db) ? document.body.scrollLeft : pageXOffset;
  var y = (db) ? document.body.scrollTop : pageYOffset;
  setCookie("xy", x + "_" + y, now);
}

function loadScroll() {
  if (!scroll) return;
  var xy = getCookie("xy");
  if (!xy) return;
  var ar = xy.split("_");
  if (ar.length == 2) scrollTo(parseInt(ar[0]), parseInt(ar[1]));
}

// -->
</SCRIPT>

With this, if I put a reference to the loadScroll() function in the body, and the SaveScroll() in the link, it remembers the scrollbar position of the main browser window - I'm sure this could be altered to remember the position of the DIV scrollbars instead, but I can't work out how!

Any help on this would be most appreciated.

Many thanks,

Bluze
0
Comment
Question by:Bluze
2 Comments
 
LVL 2

Accepted Solution

by:
weareu earned 200 total points
ID: 9594894
Let's asume the ID of the div you are in is ImgDiv...

<SCRIPT LANGUAGE="JavaScript">
<!--
var scroll = (window.scrollTo) ? 1 : 0;

function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

function saveScroll() {
  var divDoc = document.getElementById('ImgDiv');
  if (!scroll) return;
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var x = divDoc.scrollLeft;
  var y = divDoc.scrollTop;
  setCookie("xy", x + "_" + y, now);
}

function loadScroll() {
  var divDoc = document.getElementById('ImgDiv');
  if (!scroll) return;
  var xy = getCookie("xy");
  if (!xy) return;
  var ar = xy.split("_");
  if (ar.length == 2)
  {
    divDoc.scrollLeft = parseInt(ar[0]);
    divDoc.scrollTop = parseInt(ar[1]);
  }
}

// -->
</SCRIPT>

Do not know about NS though, but it will work in IE...
0
 

Author Comment

by:Bluze
ID: 9597485
Yep, works like a dream; nice one, and thanks!
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question