How to get a JavaScript variable from C#

Question

I need to get a JavaScript variable from my code behind without doing a page refresh or a button click event. Here's my code:

aspx:

<asp:HiddenField ID="docLengthValue" runat="server" />
<script type="text/javascript">
var body = document.body,
    html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight);
//alert(height + ": Page length");
document.getElementById("<%=docLengthValue.ClientID%>").setAttribute("Value", height);
</script>

c#:

//Skrollr body tag background parallax animation
string docLengthVar = docLengthValue.Value;
HtmlGenericControl skrollr = (HtmlGenericControl)this.Page.Master.FindControl("bodyBG");
            skrollr.Attributes.Add("data-0", "background-position: 0px -120px;");
            skrollr.Attributes.Add("data-" + docLengthVar, "background-position: 0px 0px;");
            dataAttb.Text = "This is the Document length:  " + docLengthVar;

How can I access the Value field of the <asp:HiddenField ID="docLengthValue" runat="server" />? I know that the JavaScript compiles after the C#, but is there a way to get this variable?

Answer 1

Jeff-

This is not really going to be an answer, and I apologize but I think you may be quite far off course here.

Your recent post history seems to indicate that you want a parallax effect on your web page. The posts I am referencing: 1 and 2.

Have you followed this tutorial? Where along it have you had a problem?

General

I think you have some confusion about how the your web pages are working. WebForms is a ASP technology, or active server page. You can read more about this but basically it provides a platform which you can more easily develop responsive web sites.

The JS you are writing is a technology that runs entirely in the browser. When the JavaScript runs the code has no idea that it is in an ASPX page. It has no idea how to talk to the code behind.

When your page renders it is pure and raw html that the client receives. Through the magic of the platform when the user submits the form or clicks a button your code behind runs. But that is nothing you can't do on your own. All that is happening is your browser is sending properly formatted HTTP requests, and your web server is dispatching those to pages (code / class(es).

Relation to your problem

You are trying to animate a background image on a web page. That is an entirely client side job. You do not want the client to be talking to the web server frequently enough to create a smooth transition. In reality it is likely impossible.

The stuff you are looking at is pure JavaScript and runs entirely in the browser. I highly encourage you to pursue that as the avenue to solve your problem. And then ask questions as you have problems with that.

Edit: Apologies if I have inferred too much. My suggestions are in earnest.