saving scroll position

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • ojorus

    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


  • Mandy Memphis

    #2
    Re: saving scroll position

    "ojorus" <ojorus@hotmail .com> wrote in message
    news:Q4FFc.980$ vH5.146@amstwis t00...[color=blue]
    > Hi!
    > I just wonder how I can save a page's scroll position with javascript.[/color]

    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 ();
    }



    Comment

    • ojorus

      #3
      Re: saving scroll position

      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:7sGdndUtf_ VXC3XdRVn-iQ@comcast.com. ..[color=blue]
      > "ojorus" <ojorus@hotmail .com> wrote in message
      > news:Q4FFc.980$ vH5.146@amstwis t00...[color=green]
      > > Hi!
      > > I just wonder how I can save a page's scroll position with javascript.[/color]
      >
      > 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 ();
      > }
      >
      >
      >[/color]


      Comment

      • Dr John Stockton

        #4
        Re: saving scroll position

        JRS: In article <%VfGc.1113$vH5 .1104@amstwist0 0>, seen in
        news:comp.lang. javascript, ojorus <ojorus@hotmail .com> posted at Mon, 5
        Jul 2004 19:08:06 :[color=blue]
        >
        >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 ();
        >}[/color]


        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.

        Comment

        • Martin

          #5
          Re: saving scroll position

          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" <ojorus@hotmail .com>
          wrote:
          [color=blue]
          >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[/color]

          Comment

          Working...