Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    lock scroll position

    I have a scrolling division with 100 items. 10 are visible.
    When item 90 is clicked on, the page refreshes and the scroll position is set to the original state at the top.
    I want to make it so the item last clicked on is where the scroll bar position is reset to.

    www.mroldies.net

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    If the page refreshes you will need to use a cookie combined with an HTML anchor.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My crystal ball is in the shop getting repaired.
    Could you please enhance your response with something more than just a generic cliche thing?
    When it comes to JS, I know very little and I have never worked with a cookie.
    The websites I have seen that discuss cookies, do not mention anchors.
    The sites that discuss anchors, do not discuss JS and cookies.

    Thanks for understanding.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    It is never a good idea to be smarmy when you are asking people for (a good deal of) help. You will catch more flies with honey than with vinegar.

    Cookies have been covered many times in this forum. Here is a basic example:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    var expDate = new Date();
    expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year ahead
    
    function setCookie(isName,isValue,dExpires) {
    document.cookie = isName + "=" + isValue + ";expires=" + dExpires.toGMTString() + "path=/";
    alert (document.cookie);  // for testing
    }
    
    function getCookie(isName){
    cookieStr = document.cookie;
    startSlice = cookieStr.indexOf(isName+"=");
    if (startSlice == -1) {return false}
    endSlice = cookieStr.indexOf(";",startSlice+1);
    if (endSlice == -1){endSlice = cookieStr.length}
    isData = cookieStr.substring(startSlice,endSlice);
    isValue = isData.substring(isData.indexOf("=")+1,isData.length);
    return isValue;
    }
    
    function dispCookie(isName) {
    nValue = getCookie(isName);  // returns the value of the cookie
    alert (nValue);  // for testing
    }
    
    function deleteCookie(isName){
    if (getCookie(isName)){
    document.cookie = isName + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
    }
    
    </script>
    
    </head>
    
    <body>
    <input type = "button" value = 'Set Cookie' onclick = "setCookie('anyName','Hello',expDate)">
    <br><br>
    <input type = "button" value='Delete Cookie' onclick="deleteCookie('anyName')">
    <br><br>
    <input type = "button" value = 'Read Cookie' onclick = "dispCookie('anyName')">
    </body>
    
    </html>
    Rather than the buttons which are for demonstration purposes, every time your user clicks on an item you should set the cookie using a value representing the anchor point you wish to revert to, example "anchor23". onclick = "setCookie('anyName','anchor23',expDate)"

    Each time the page reloads the cookie is read and the value (here "anchor23") is extracted. Then all you have to do is jump to the relevant anchor id
    <a name="anchor23"></a>
    in your script:-
    window.location.hash="anchor23";
    Of course, "anchor 23" is a variable not a literal. So:-

    Code:
    function dispCookie(isName) {
    nValue = getCookie(isName);
    alert (nValue);  // for testing
    if (nValue) {
    window.location.hash = nValue; 
    }  // redirect to that anchor
    }
    Naturally you can alter the persistance (expiry date) of the cookie to suit your needs.
    Last edited by Philip M; 09-19-2013 at 08:55 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by Suwannee_guy View Post
    My crystal ball is in the shop getting repaired.
    Could you please enhance your response with something more than just a generic cliche thing?
    When it comes to JS, I know very little and I have never worked with a cookie.
    The websites I have seen that discuss cookies, do not mention anchors.
    The sites that discuss anchors, do not discuss JS and cookies.

    Thanks for understanding.
    My crystal ball says you ain't gonna get much help if you keep being like that.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Double post
    lock scroll position
    Evolution - The non-random survival of random variants.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,964
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You have to clarify what you meant by the "page refreshes" when an item clicked on. Did you mean the page is submitted to itself? Or does it do location.reload() or location.href to refresh the page? And are the items links or buttons or what?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •