473,581 Members | 2,304 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 3638
"ojorus" <oj****@hotmail .com> wrote in message
news:Q4FFc.980$ vH5.146@amstwis t00...
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 restoreScrollPo s()
{
// 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(getCoo kie("scrollPosX "));
var posY = parseInt(getCoo kie("scrollPosY "));
//destroy the cookie
deleteCookie("s crollPosX");
deleteCookie("s crollPosY");
//scroll to the recovered position
window.scroll(p osX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSecon ds(expiry.getSe conds() + 10);
setCookie("scro llPosX", window.document .body.scrollLef t, expiry);
setCookie("scro llPosY", 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.toGMTSt ring() : "") +
((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(pref ix);
if (begin != 0)
return null;
}
else
begin += 2;

var end = document.cookie .indexOf(";", begin);

if (end == -1)
end = dc.length;

return unescape(dc.sub string(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 restoreScrollPo s()
{
var posX = parseInt(getCoo kie("scrollPosX "));
var posY = parseInt(getCoo kie("scrollPosY "));
//destroy the cookie
deleteCookie("s crollPosX");
deleteCookie("s crollPosY");
//scroll to the recovered position
window.scroll(p osX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSecon ds(expiry.getSe conds() + 10);
setCookie("scro llPosX", window.document .body.scrollLef t, expiry);
setCookie("scro llPosY", window.document .body.scrollTop , expiry);
}
//=============== =============== =============== ========
// Cookies
//=============== =============== =============== ========
function setCookie(name, value, expires, path, domain, secure)
{
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTSt ring() : "") +
((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(pref ix);
if (begin != 0)
return null;
}
else
begin += 2;

var end = document.cookie .indexOf(";", begin);

if (end == -1)
end = dc.length;

return unescape(dc.sub string(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="restore ScrollPos()">
-
-
<a href='link' onClick=saveScr ollPos()>linkte xt</a>

OJ
"Mandy Memphis" <mm@no-reply.com> skrev i melding
news:7s******** ************@co mcast.com...
"ojorus" <oj****@hotmail .com> wrote in message
news:Q4FFc.980$ vH5.146@amstwis t00...
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 restoreScrollPo s()
{
// 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(getCoo kie("scrollPosX "));
var posY = parseInt(getCoo kie("scrollPosY "));
//destroy the cookie
deleteCookie("s crollPosX");
deleteCookie("s crollPosY");
//scroll to the recovered position
window.scroll(p osX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSecon ds(expiry.getSe conds() + 10);
setCookie("scro llPosX", window.document .body.scrollLef t, expiry);
setCookie("scro llPosY", 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.toGMTSt ring() : "") +
((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(pref ix);
if (begin != 0)
return null;
}
else
begin += 2;

var end = document.cookie .indexOf(";", begin);

if (end == -1)
end = dc.length;

return unescape(dc.sub string(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@amstwist0 0>, 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).toGMTSt ring();

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demo n.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demo n.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 restoreScrollPo s()
{
var posX = parseInt(getCoo kie("scrollPosX "));
var posY = parseInt(getCoo kie("scrollPosY "));
//destroy the cookie
deleteCookie("s crollPosX");
deleteCookie("s crollPosY");
//scroll to the recovered position
window.scroll(p osX, posY);

return true;
}
//save the scroll poition to the cookie (set expire to small value)
function saveScrollPos()
{
var expiry = new Date();
expiry.setSecon ds(expiry.getSe conds() + 10);
setCookie("scro llPosX", window.document .body.scrollLef t, expiry);
setCookie("scro llPosY", window.document .body.scrollTop , expiry);
}
//=============== =============== =============== ========
// Cookies
//=============== =============== =============== ========
function setCookie(name, value, expires, path, domain, secure)
{
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTSt ring() : "") +
((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(pref ix);
if (begin != 0)
return null;
}
else
begin += 2;

var end = document.cookie .indexOf(";", begin);

if (end == -1)
end = dc.length;

return unescape(dc.sub string(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="restore ScrollPos()">
-
-
<a href='link' onClick=saveScr ollPos()>linkte xt</a>

OJ


Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
3700
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 messages up or down, after the refresh, the scroll position is reseted to the top of the frame and my scroll position is lost.
2
1810
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 code provided on the website. Once I have this example running correctly, I will need to use the concept in a more complex project. The code I am...
1
8668
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 able to set the focus to a control. Here's the problem, when you set the focus by using the registerstartupscript method the control gets the...
4
1869
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 editing of the selected row via postback. My problem is that if i click on the edit button of a row which is not immidiately visible in the scrollable...
6
2322
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 page loads again, but this time the scroll position is at the bottom. This is annoying, because the actual validation error messages are on the top and...
7
5587
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 browser the list box scroll position is at the top.
10
1290
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 some label elements and the text boxes have an initial value of 0. When a value is typed into the text boxes I want it to be saved based on the...
3
6448
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... document.getElementById('mydiv').scrollTop ....returns the position of the top of the scroll handle in the range,
12
7819
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. There are a number of elements within this <div> that cause the <div> to participate in an Ajax call to the server. In order to maintain the scroll...
0
7868
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8149
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8175
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6553
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5674
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5364
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3805
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2301
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1403
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.