Invisible DIV Not Available To JavaScript

Im sure the answer to my question is here somewhere but I cannot find it. I apologise if I have duplicated. I have a DIV that I set its visiblity on page load depending on the dat

Solution 1:

this.divMyDiv.Visible = false

...will prevent the div from being rendered at all and Javascript can't find it. If you still want to render it and use display:none to hide it, you'll want to do;

this.divMyDiv.Style["display"] = "none";

Solution 2:

Setting an aspx control to Visible = false on the server side means that the control won't be rendered at all in the Html Response, and thus it isn't available at all client-side for javascript to use. You'll need to render it (Visible=true) but then Hide the control using css, e.g. style='display:none' or similar. See also Question regarding Visible=false and display:none;

Solution 3:

If this property is false, the server control is not rendered. You should take this into account when organizing the layout of your page.

If you want the control to be rendered but not visible, you should leave Visble = true and hide the control using script or css.

div.style.display = 'none';

See http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible.aspx

Solution 4:

in code behind use

instead of this.divMyDiv.Visible = false use this divMyDivAttributes.Add("display", "none");

It will then be rendered by javascript and your other java script function will run properly too