How to remember scroll position on page reload
472 views
Skip to first unread message
myst!fied
Jun 26, 2008, 2:30:18 AM6/26/08
to PHPSlideShow by zinkwazi.com
Thanks for a great script Greg. Wow, you've been doing this for a
while.
I'm a bit of a novice I'm afraid.
So I hope I've made no mstake nor wasted your time.
But I wanted the slideshow to remember it's y-scroll position on
reload and not jump back to the top each time. It's taken three days
to get this far, the last day learning to set my first cookie. Seems
like a long time for so little. (I did have the flu tho, cough). It
looks good in Firefox and Safari for Windows but the IE's can be less
smooth. I used exactly the same code on multiple slideshows on the
same site. With no javascript enabled, it looks and acts like the
normal slideshow.
Learning the best way to kill the cookie so that if the browser leaves
the slideshow then returns, the page is then loaded at the top, well
that took a while. Many events seem to kill the cookie before any http
request is even made.
No expiry time is set for the cookie so if one of the links in (4.)
doesn't kill it, the cookie dies when the browser closes. Knock
yerself out filling in the rest of it.
And feel free to show me a better way. Hope it works for you.
1. In the head of the template :
(NB - the line starting 'var scroll =' below has been broken into two
lines. It may help to restore it to one line)
<head>
<METAREFRESH>
<title>Blah Blah</title>
<script type="text/javascript">
<!--
function setCookie(){
var scroll=typeof window.pageYOffset != 'undefined' ?
window.pageYOffset : document.documentElement.scrollTop;
document.cookie='yscroll' + "=" + scroll;
}
window.onscroll=setCookie;//seems to be the best way to set the
cookie, cross-browser.
// -->
</script>
</head>
2. In the template's <body> tag add:
onload="window.scrollTo(0,<YS>)"
so that it looks like:
<body onload="window.scrollTo(0,<YS>)">
3. In the phpslideshow php script somewhere add :
$yscrol = (isset($_COOKIE['yscroll']))?$_COOKIE['yscroll']:'';
$template = str_replace("<YS>",$yscrol,$template);
4. In the template container(s) in which links external to the
slideshow reside (eg links to other pages on/off the site) , add this:
onclick="document.cookie='yscroll'+'='+''+1;"
For me it was just one <ul> I had to change so mine looks like:
<ul onclick="document.cookie='yscroll'+'='+''+1;">
This kills the cookie. onmousedown and onmouseup seem to work just as
well. When it doesn't rain, it pours.
Have fun.
while.
I'm a bit of a novice I'm afraid.
So I hope I've made no mstake nor wasted your time.
But I wanted the slideshow to remember it's y-scroll position on
reload and not jump back to the top each time. It's taken three days
to get this far, the last day learning to set my first cookie. Seems
like a long time for so little. (I did have the flu tho, cough). It
looks good in Firefox and Safari for Windows but the IE's can be less
smooth. I used exactly the same code on multiple slideshows on the
same site. With no javascript enabled, it looks and acts like the
normal slideshow.
Learning the best way to kill the cookie so that if the browser leaves
the slideshow then returns, the page is then loaded at the top, well
that took a while. Many events seem to kill the cookie before any http
request is even made.
No expiry time is set for the cookie so if one of the links in (4.)
doesn't kill it, the cookie dies when the browser closes. Knock
yerself out filling in the rest of it.
And feel free to show me a better way. Hope it works for you.
1. In the head of the template :
(NB - the line starting 'var scroll =' below has been broken into two
lines. It may help to restore it to one line)
<head>
<METAREFRESH>
<title>Blah Blah</title>
<script type="text/javascript">
<!--
function setCookie(){
var scroll=typeof window.pageYOffset != 'undefined' ?
window.pageYOffset : document.documentElement.scrollTop;
document.cookie='yscroll' + "=" + scroll;
}
window.onscroll=setCookie;//seems to be the best way to set the
cookie, cross-browser.
// -->
</script>
</head>
2. In the template's <body> tag add:
onload="window.scrollTo(0,<YS>)"
so that it looks like:
<body onload="window.scrollTo(0,<YS>)">
3. In the phpslideshow php script somewhere add :
$yscrol = (isset($_COOKIE['yscroll']))?$_COOKIE['yscroll']:'';
$template = str_replace("<YS>",$yscrol,$template);
4. In the template container(s) in which links external to the
slideshow reside (eg links to other pages on/off the site) , add this:
onclick="document.cookie='yscroll'+'='+''+1;"
For me it was just one <ul> I had to change so mine looks like:
<ul onclick="document.cookie='yscroll'+'='+''+1;">
This kills the cookie. onmousedown and onmouseup seem to work just as
well. When it doesn't rain, it pours.
Have fun.
myst!fied
Jun 26, 2008, 11:04:39 PM6/26/08
to PHPSlideShow by zinkwazi.com
christ, besides the
var scroll=typeof window.pageYOffset != 'undefined' ?
window.pageYOffset : document.documentElement.scrollTop;
that probably should be on one line, a comment has also wrapped onto
two lines so before using, delete
var scroll=typeof window.pageYOffset != 'undefined' ?
window.pageYOffset : document.documentElement.scrollTop;
two lines so before using, delete
myst!fied
Jun 27, 2008, 8:23:29 PM6/27/08
to PHPSlideShow by zinkwazi.com
oops.
In 3. above it might help to change to
$yscrol = (isset($_COOKIE['yscroll']))?$_COOKIE['yscroll']:0;
and in 4. change to
onclick="document.cookie='yscroll'+'='+0;"
since the original didn't in fact delete the cookie and there is no
real point in deleting it anyway.
In 3. above it might help to change to
$yscrol = (isset($_COOKIE['yscroll']))?$_COOKIE['yscroll']:0;
and in 4. change to
onclick="document.cookie='yscroll'+'='+0;"
since the original didn't in fact delete the cookie and there is no
real point in deleting it anyway.
myst!fied
Jul 5, 2008, 12:20:31 AM7/5/08
to PHPSlideShow by zinkwazi.com
This works better if the body onload event handler is not used. Onload
only kicks in after the page is loaded so the first time each picture
is viewed the window will tend to jump down from the top.
Using window.onfocus in the head script instead works perfectly for me
in IE6, IE7 and Firefox. Safari and Opera don't work so a
window.onload event is still needed and they still jump the first
time. This is what I'm using now The php script stays the same as
above):
<code>
<script type="text/javascript">
<!--
var flag = 0;
function scrollWindow() {
if (flag == 0){
/* opac(); opacity function must be listed first if used */
window.scrollTo(0,<YS>);
flag = 1;
}
}
window.onfocus = scrollWindow;
window.onload = scrollWindow;
//-->
</script>
</code>
I put this in an external file
<code>
function setCookie(){
{
var cookie_date = new Date ( ); /* current date & time */
cookie_date.setTime ( cookie_date.getTime() - 1 );
document.cookie = cookie_name += "=; expires=" +
cookie_date.toGMTString();
}
</code>
and in the navigation links container/s I use this :
onclick="delete_cookie ( 'yscroll' );"
I've also been paranoid and have been preloading all the thumbnails if
the cookie doesn't exist
only kicks in after the page is loaded so the first time each picture
is viewed the window will tend to jump down from the top.
Using window.onfocus in the head script instead works perfectly for me
in IE6, IE7 and Firefox. Safari and Opera don't work so a
window.onload event is still needed and they still jump the first
time. This is what I'm using now The php script stays the same as
above):
<code>
<script type="text/javascript">
<!--
var flag = 0;
function scrollWindow() {
if (flag == 0){
/* opac(); opacity function must be listed first if used */
window.scrollTo(0,<YS>);
flag = 1;
}
}
window.onfocus = scrollWindow;
window.onload = scrollWindow;
//-->
</script>
</code>
I put this in an external file
<code>
function setCookie(){
var scroll=typeof window.pageYOffset != 'undefined' ?
window.pageYOffset : document.documentElement.scrollTop;
window.pageYOffset : document.documentElement.scrollTop;
document.cookie='yscroll' + "=" + scroll;
}
window.onscroll=setCookie;
function delete_cookie ( cookie_name )
}
window.onscroll=setCookie;
{
var cookie_date = new Date ( ); /* current date & time */
cookie_date.setTime ( cookie_date.getTime() - 1 );
document.cookie = cookie_name += "=; expires=" +
cookie_date.toGMTString();
}
</code>
and in the navigation links container/s I use this :
onclick="delete_cookie ( 'yscroll' );"
I've also been paranoid and have been preloading all the thumbnails if
the cookie doesn't exist
myst!fied
Jul 28, 2008, 5:59:07 AM7/28/08
to PHPSlideShow by zinkwazi.com
It seems the IE's need to have the next needed thumbnail preloaded as
well as the next main image to avoid the jerkiness on uncached pages.
Opera remains untameable.
Safari on Windows does support window.onfocus but won't scrollTo
anywhere. However making a window.onload function that includes all
the image preloading after the scrollTo makes it as smooth as Firefox
and the IE's.
Unfortunately a friend who owns a Mac has told me this doesn't work
for her.
Maybe changing
pic=new Image();
to
pic=document.createElement('img');
might help. It would be good to borrow her machine for five minutes.
Also helps if the delay is set to accommodate the bandwidth available
to the person looking at the slideshow.
It's not too difficult to check if the next needed images are cached
(eg onbeforeunload) - if they're not, set a cookie and have the php
script increase the delay (as well as displaying a message above the
next image). I tried this after installing some bandwidth throttling
software and although not pretty yet, it works fine. Shame about
people on dial-up.
well as the next main image to avoid the jerkiness on uncached pages.
Opera remains untameable.
Safari on Windows does support window.onfocus but won't scrollTo
anywhere. However making a window.onload function that includes all
the image preloading after the scrollTo makes it as smooth as Firefox
and the IE's.
Unfortunately a friend who owns a Mac has told me this doesn't work
for her.
Maybe changing
pic=new Image();
to
pic=document.createElement('img');
might help. It would be good to borrow her machine for five minutes.
Also helps if the delay is set to accommodate the bandwidth available
to the person looking at the slideshow.
It's not too difficult to check if the next needed images are cached
(eg onbeforeunload) - if they're not, set a cookie and have the php
script increase the delay (as well as displaying a message above the
next image). I tried this after installing some bandwidth throttling
software and although not pretty yet, it works fine. Shame about
people on dial-up.
Reply all
Reply to author
Forward
0 new messages