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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post

    Placing JS Variable in QueryString?

    Hey guys,

    I am trying to pass the scroll position between a couple pages. I have this code for placing it into a text field. But what I want to do is have it placed into a variable that I can then use in a link to a new page, the link will have the query string with the scoll position. This is a classic asp application, no so postback function can be used. Sessions are possible but I would prefer passing it through querystring.

    Code:
    <script type='text/javascript'>
    document.onscroll = getScrollPos;
    function getScrollPos(e) {document.getElementById('scrollposition').value = (document.body.scrollTop);}
    </script>
    Any tips? Not too experienced in the JS world.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    How is that link activated?

    Is it a simple
    Code:
    <a href="someOtherPage.asp?scrollTop=xx"> go there </a>
    Or are you using location.href = ... in JS code?

    Or are you *always* submitting a <form> to the ASP server?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    How is that link activated?

    Is it a simple
    Code:
    <a href="someOtherPage.asp?scrollTop=xx"> go there </a>
    Or are you using location.href = ... in JS code?

    Or are you *always* submitting a <form> to the ASP server?
    In this case its not submitting a form, just passing some simple info over querystring. I figured I would just add the scroll position to the QS as well.

    I know how to make a link with a QS I just dont know how to make my scroll position function into a variable that I can use in the QS...

    I hope that makes sense..

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Code:
    <script type='text/javascript'>
    document.onscroll = getScrollPos;
    var scrollPosition = document.body.scrollTop; // initial value
    function getScrollPos(e) /* what is the point of e here? */
    {
        /* you don't show what element has id="scrollposition" or why
           so I left it alone...but it may or may not be needed */
        document.getElementById('scrollposition').value = 
            scrollPosition =
            document.body.scrollTop;
    }
    </script>
    ...
    <a href="somePage.asp?scrollPosition=" onclick="this.href += scrollPosition; return true;">
        go do it
    </a>
    Is that what you mean?

    N.B.: In JS (and C and C++ and Java and ...) when you do a = b = c = d the assignment operations proceed right to left. So d is assigned to c which is assigned to b which is assigned to a.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rtown (01-08-2013)

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Code:
    <script type='text/javascript'>
    document.onscroll = getScrollPos;
    var scrollPosition = document.body.scrollTop; // initial value
    function getScrollPos(e) /* what is the point of e here? */
    {
        /* you don't show what element has id="scrollposition" or why
           so I left it alone...but it may or may not be needed */
        document.getElementById('scrollposition').value = 
            scrollPosition =
            document.body.scrollTop;
    }
    </script>
    ...
    <a href="somePage.asp?scrollPosition=" onclick="this.href += scrollPosition; return true;">
        go do it
    </a>
    Is that what you mean?

    N.B.: In JS (and C and C++ and Java and ...) when you do a = b = c = d the assignment operations proceed right to left. So d is assigned to c which is assigned to b which is assigned to a.
    I think this will work.
    About the element ID, its not needed. I dont know what the (e) is for either...
    Ill play around with this. I was not aware you could append and onlick event to a href like this. I think this will work perfectly.
    Thanks so much OP!

  • #6
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Try this to retrieve the scroll position with a reload

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    body {background-color:#ccc}
    #pge{display:block;margin:0 auto;width:300px;background-color:#fff;padding:15px;}
    p{text-align:justify}
    </style>
    </head>
    <body id="bdy">
    <div id="pge"><p>Lorem ipsum dolor sit amet consectetuer dolor adipiscing semper sapien malesuada. Dapibus iaculis lobortis dis Fusce et.</p>
    <p>Pede leo at rhoncus est eget magna elit nibh tellus orci. Volutpat condimentum Aliquam eros Nulla orci tincidunt nulla libero id est. Leo auctor metus tortor ac wisi Cras tristique dui arcu lacus. Metus auctor.</p>
    <p>Id justo congue eu Sed vel Curabitur semper nec libero pellentesque. Nulla Vestibulum Donec eros nascetur ut et Phasellus.</p>
    <p>Donec sed nascetur sed Maecenas metus tortor vitae wisi et quis. Volutpat vitae orci convallis tortor ornare senectus tellus dui Nullam hendrerit. Pellentesque Phasellus pede scelerisque sit sodales sed neque Nulla platea iaculis. Vel convallis pretium fermentum dictum.</p>
    <p>Felis sodales ornare vitae a ipsum amet pretium Cum Donec malesuada. Porttitor Curabitur consectetuer et quis cursus penatibus dignissim nulla et eros. Pede metus urna laoreet tortor laoreet Fusce magna.</p>
    <p>Fames Curabitur Proin egestas nibh dolor Aenean amet a semper a. Suspendisse eros a turpis Nullam felis consectetuer justo ipsum consectetuer Aenean. Ut et eu dictumst Nam lorem est Nunc non vitae metus. Cum malesuada velit et laoreet.</p>
    <p>Pellentesque sapien In at volutpat Quisque tellus interdum est nunc semper. Laoreet ante quam Vestibulum nulla porta est habitasse est tincidunt nibh. Sagittis molestie et consectetuer felis wisi egestas volutpat eleifend in porttitor. Lobortis nibh enim in.</p>
    <p>Facilisis rhoncus nibh nulla tellus natoque wisi id mi nibh vitae. Libero orci leo molestie malesuada ligula est gravida ac laoreet pede. Mauris.</p>
    </div>
    <script type="text/javascript">
    
    // Read the queryString to scroll if any scroll position is given
    var qry=window.location.search.substr(1).split('&');
    i=qry.length-1;while (i && !(/scrTop=/.test(qry[i]))) i--; alert(qry[i].replace(/\D+/,''))
    if (-1<i) window.scrollTo(0,qry[i].replace(/\D+/,''));
    
    // Read and return the scroll Top Position (with an id on the body) 
    function getScrollPos() {return document.getElementById('bdy').parentNode.scrollTop;}
    
    // Reload the page at the same scoll position with a click on it  
    document.getElementById('pge').onclick=function(){var h=window.location.href;
    	window.location=(h.replace(/\?.*/,''))+'?scrTop='+getScrollPos();
    }
    </script>
    </body>
    </html>

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rtown View Post
    I dont know what the (e) is for either
    It is a reference to the event that called the function. When a function is called from an event the event object is always passed as a parameter to the function automatically (except in IE8 which runs jScript instead of JavaScript and so uses a gloval event object instead). Scroll positions are attached to events and you can't get the scroll position at any other time so you need to reference the event object in order to access the scroll position at the time the event occurred.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Well, I of course knew what the e is, but I don't see why he needs it for that code.

    Why does he need to reference the triggering event when the code just does (now, as simplified):
    Code:
    <script type='text/javascript'>
    var scrollPosition = document.body.scrollTop; // initial value
    document.onscroll = 
        function( )
        {
            scrollPosition =  document.body.scrollTop;
        };
    </script>
    That's what *I* meant by "why is e there?" I don't see it being used, at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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