CodingForums.com - Placing JS Variable in QueryString?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Placing JS Variable in QueryString? (http://www.codingforums.com/showthread.php?t=285490)

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. :)

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?

Quote:

Originally Posted by Old Pedant (Post 1304956)

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.. :o

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.

Quote:

Originally Posted by Old Pedant (Post 1304963)

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>

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!

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>

Quote:

Originally Posted by rtown (Post 1304966)

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.

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.