By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,561 Members | 3,010 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,561 IT Pros & Developers. It's quick & easy.

saving scroll position

P: n/a
Hi!
I just wonder how I can save a page's scroll position with javascript. (i'm
not a javascript developer) I have a PHP-page with two columns; the left
contains a lot of thumbnails, and the right contain a bigger picture of the
thumbnailed selected. The problem is that all these thumbnails (and the big
picture) are placed quite far down in the document. (a lot of text is at the
top.) What I want is that when a thumbnail is clicked, the page should
automaticly scroll down to the position the page had just before the
thumbnail was selected.

I manage to scroll to a spesific postition, for example scrollTo(0,200). But
I have not figured out how to scroll to a variable position.

An example to illustrate the problem:
http://www.bobilomsetningen.no/vis_b...6&Bilde_id=240.

Can anyone help me on this one?

Ole Johan
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"ojorus" <oj****@hotmail.com> wrote in message
news:Q4FFc.980$vH5.146@amstwist00...
Hi!
I just wonder how I can save a page's scroll position with javascript.


This is what I use (for IE6 anyway)...
//================================================== ===
// Scrolling
//================================================== ===
// Call this from the body onload on each postback in
// order to preserve the body's scroll position.
function restoreScrollPos()
{
// copy references to form's submit and onsubmit methods
document.forms[0].doSubmit1 = document.forms[0].onsubmit;
document.forms[0].doSubmit2 = document.forms[0].submit;
// change references to proprietary methods
document.forms[0].onsubmit = saveScrollPos1;
document.forms[0].submit = saveScrollPos2;
//recover the previous scroll poition from the cookie
var posX = parseInt(getCookie("scrollPosX"));
var posY = parseInt(getCookie("scrollPosY"));
//destroy the cookie
deleteCookie("scrollPosX");
deleteCookie("scrollPosY");
//scroll to the recovered position
window.scroll(posX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSeconds(expiry.getSeconds() + 10);
setCookie("scrollPosX", window.document.body.scrollLeft, expiry);
setCookie("scrollPosY", window.document.body.scrollTop, expiry);
}

function saveScrollPos1()
{
saveScrollPos();
document.forms[0].doSubmit1();
}

function saveScrollPos2()
{
saveScrollPos();
document.forms[0].doSubmit2();
}

//================================================== ===
// Cookies
//================================================== ===
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 deleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

Jul 23 '05 #2

P: n/a
Thanx; works perfect now!
Didn't use a form, just a link, so I skipped some of the code; now I use

function restoreScrollPos()
{
var posX = parseInt(getCookie("scrollPosX"));
var posY = parseInt(getCookie("scrollPosY"));
//destroy the cookie
deleteCookie("scrollPosX");
deleteCookie("scrollPosY");
//scroll to the recovered position
window.scroll(posX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSeconds(expiry.getSeconds() + 10);
setCookie("scrollPosX", window.document.body.scrollLeft, expiry);
setCookie("scrollPosY", window.document.body.scrollTop, expiry);
}
//================================================== ===
// Cookies
//================================================== ===
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 deleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

and
<body onload="restoreScrollPos()">
-
-
<a href='link' onClick=saveScrollPos()>linktext</a>

OJ
"Mandy Memphis" <mm@no-reply.com> skrev i melding
news:7s********************@comcast.com...
"ojorus" <oj****@hotmail.com> wrote in message
news:Q4FFc.980$vH5.146@amstwist00...
Hi!
I just wonder how I can save a page's scroll position with javascript.


This is what I use (for IE6 anyway)...
//================================================== ===
// Scrolling
//================================================== ===
// Call this from the body onload on each postback in
// order to preserve the body's scroll position.
function restoreScrollPos()
{
// copy references to form's submit and onsubmit methods
document.forms[0].doSubmit1 = document.forms[0].onsubmit;
document.forms[0].doSubmit2 = document.forms[0].submit;
// change references to proprietary methods
document.forms[0].onsubmit = saveScrollPos1;
document.forms[0].submit = saveScrollPos2;
//recover the previous scroll poition from the cookie
var posX = parseInt(getCookie("scrollPosX"));
var posY = parseInt(getCookie("scrollPosY"));
//destroy the cookie
deleteCookie("scrollPosX");
deleteCookie("scrollPosY");
//scroll to the recovered position
window.scroll(posX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSeconds(expiry.getSeconds() + 10);
setCookie("scrollPosX", window.document.body.scrollLeft, expiry);
setCookie("scrollPosY", window.document.body.scrollTop, expiry);
}

function saveScrollPos1()
{
saveScrollPos();
document.forms[0].doSubmit1();
}

function saveScrollPos2()
{
saveScrollPos();
document.forms[0].doSubmit2();
}

//================================================== ===
// Cookies
//================================================== ===
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 deleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

Jul 23 '05 #3

P: n/a
JRS: In article <%VfGc.1113$vH5.1104@amstwist00>, seen in
news:comp.lang.javascript, ojorus <oj****@hotmail.com> posted at Mon, 5
Jul 2004 19:08:06 :

function deleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

Is that thought to have any advantage over, say

document.cookie =
name + "=" + cval + "; expires=1 Jan 2000 00:00:00 UTC" ;

or with such other past date as takes the fancy?
Or

document.cookie =
name + "=" + cval + "; expires=" + new Date(0).toGMTString();

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
Jul 23 '05 #4

P: n/a
I'm using this script (shown below - Thanks OJ !) to restore the
screen position when the user clicks on a "Refresh" link. This, of
course, works only if the user clicks on the provided link. I would
like it to also work if the user presses the <F5> key. How can I get
it to do so?

Thanks.

Martin

On Mon, 5 Jul 2004 19:08:06 +0200, "ojorus" <oj****@hotmail.com>
wrote:
Thanx; works perfect now!
Didn't use a form, just a link, so I skipped some of the code; now I use

function restoreScrollPos()
{
var posX = parseInt(getCookie("scrollPosX"));
var posY = parseInt(getCookie("scrollPosY"));
//destroy the cookie
deleteCookie("scrollPosX");
deleteCookie("scrollPosY");
//scroll to the recovered position
window.scroll(posX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSeconds(expiry.getSeconds() + 10);
setCookie("scrollPosX", window.document.body.scrollLeft, expiry);
setCookie("scrollPosY", window.document.body.scrollTop, expiry);
}
//================================================== ===
// Cookies
//================================================== ===
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 deleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

and
<body onload="restoreScrollPos()">
-
-
<a href='link' onClick=saveScrollPos()>linktext</a>

OJ


Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.