473,326 Members | 2,133 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

saving scroll position

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
4 3607
"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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Boniface Frederic | last post by:
Hello, I have frame displaying the last posted messages. I set <meta http-equiv="refresh" content="5"/> to automatically refresh the frame every 5s My problem is; if I scroll the frame to see...
2
by: GrantS | last post by:
I am trying to convert the VB.Net code example povided by http://authors.aspalliance.com/JimRoss/Articles/MaintainScrollPos.aspx into C# (ASP.Net)without success. No errors are thrown in the VB...
1
by: JC | last post by:
I'm sure you've all seen the save scroll position from 4 guys from rolla which can be found here > http://aspnet.4guysfromrolla.com/articles/111704-1.aspx BUT try to get that to work AND still be...
4
by: Emmanuel | last post by:
Hi, I have placed a DataList control inside a panel control to obtain a scrollable list using the overflow:auto attribute. The rows in the data list contains and edit LinkButton to enable...
6
by: | last post by:
Hi all, I have a long web form on asp.net 2.0. When I go at the bottom and click on submit, a postback occurs and if there are any validation errors (no client-side checking being done), the...
7
by: Lit | last post by:
Hi, How can I capture the vertical scroll bar position for a Listbox. I have a Listbox of 100 items + when I click on it I post back remove the item selected. After returning to the client...
10
by: =?Utf-8?B?VGhyb3dtZSBBIEZyaWdnaW5ib25l?= | last post by:
I apologize if this is in the wrong discussion group. I have a C++ form (VS2003) that includes a couple text boxes and a slider bar. Moving the slider bar changes a picture that is displayed and...
3
by: bgold12 | last post by:
How can I test if a vertical scroll bar is at the bottom of the range? I know that... document.getElementById('mydiv').scrollHeight ....returns the range, and... ...
12
Frinavale
by: Frinavale | last post by:
I think I'm trying to do something impossible. I have a <div> element with a overflow style set to "scroll". In other words my <div> element allows the user to scroll the content within it. ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.