Solved

Remembering the scrollbar position of a DIV between pages

Posted on 2003-10-21
2
296 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
Comment Utility
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
Comment Utility
Yep, works like a dream; nice one, and thanks!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now