We Keep Coding

How to get a JavaScript variable from C#

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?

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.

WebPage Render Position Controller

First question but I really am in a jam.
I have a webpage render which is working perfectly. However, I need to be able to control the initial display position (almost like a href #anchors in HTML) but without any access to the site content.
From as far as i can see i have no access to the scrollBars other than the bool to enable / disable..
Is there anything i can do to even force a scroll down of 20% for example, and then I can create a form to adjust later on.
Any assistance would be HUGELY appreciated although from what I have researched it seems unlikely.
I have the regular windows WebBrowser Render
private System.Windows.Forms.WebBrowser m_webBrowser;
Thanks !
--This is for c# standalone application.. Not WebBased.

Have you tried using jquery?
I personally use the animate method from jquery to scroll to certain elemnts in my webpage.
Example:
$('html, body').animate({scrollTop: $('#the-element-you-want-to-scroll-to).offset().top}, 1000);
PS: For the last parameter you can control the time it will use to scroll to destination, that offering you a nice effect.(in milliseconds)

I managed to resolve it using a strange method..
I basically injected some javascript into the rendered HTML manually.. Then the rest was easy.
i used something like this :
string updatedSource = WebBrowser.DocumentText.Replace("Google", "Foogle");
string extraSource =
"<html><body>Script goes here <br/>" +
"<div><p>BLA BLA BLA</p></div></body></html>";
WebBrowser.DocumentText = extraSource + updatedSource;
WebBrowser.Update();
Maybe it will help someone.

C# -> Detetcting Browser Width

I have a web application in C#. I need to be able to detect the user's browser width. How is this possible? I know that you can detect the browsers width using javascript/jquery....but how can I make this available serve-side (from within my C# code).

I would make a hiddenfield and fill it by using jQuery http://api.jquery.com/width/
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
So you can choose window or document and fill a hiddenfield
<asp:HiddenField ID="hf" runat="Server" Value="" ClientIDMode="static" />
Please note that clientidmode is only for asp.net 4 and above
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
$("#<%= hf.ClientID %>").val($(window).width()); //asp.net 3.5 or lower
$("#hf").val($(window).width()); //asp.net 4 or higher
edit another option is to use jquery and do an ajax post to an *.ashx or *.asmx

That's impossible unless you combine client script functionality with server side code.
You could probably use JQuery to get browser width and set it to a hidden field.
http://api.jquery.com/width/
The thing is that you would not have that value on pageLoad, but only after page is rendered, JQuery initialized and postBack created.
Does that help?

The possible solution could be get screen size from javascript and call a method on server (using Jquery) that will save the details in the session.
Can you explain, for what purpose do you want use this value in the Server side code?
If you want to control placement of elements on the page etc. you could use Media Query that will resize your control according to the browser width.

On server side try these three properties
Request.Browser.ScreenCharactersHeight;
Request.Browser.ScreenCharactersWidth;
Request.Browser.ScreenPixelsWidth;

taking a screenshot of some element in the html

So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps

Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).

Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.

Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.

Resize object tag to fit silverlight content

I am having the following problem:
I have a web page hosting silverlight content. The silverlight content is navigation aware, so it will always be the same html page and the same silverlight control. The content however will of course change when the user is navigating from one page inside the control to another.
Different pages have different size requirements and in some cases the final height of the content is unknown because the content is coming from a web service.
I want the height of the silverlight content to be dynamically according to what it actually needs. I saw many solutions to make the silverlight control fit the browser window, but I want the silverlight content to only have the actual height it needs and overflow when necessary, so that I can use the browsers scrollbars.
The page should also have a static background image, which is giving me some problems when the object tag is not exactly the size of the silverlight content.
The effect I want to achieve is more or less like in this web page:
http://www.codegarden.de/
The background should be in the html page when possible and the silverlight control should be the content in the middle part and should scroll with the browser scrollbar.
Can anyone help me? Thanks!

You can have your silverlight application execute javascript commands on the hosting page, that will in turn set the size of the <Object> tag.
Something like that:
using System.Windows.Browser;
// set a global variable
HtmlPage.Window.Eval(String.Format("setSilverlightObjSize({0},{1});",newW,newH));
where setSilverlightObjSize is a javascript function you wrote in the hosting page.
soemthing like:
function SetObjectTagProps(w,h)
{
var obj = document.getElementById("silverlightObj");
obj.width = w;
obj.height = h;
}