Hide and show div when page load

Question

i have a div :

<div id="postreply">
    <asp:Label ID="lbStatus" CssClass="input-large1" runat="server" Text="Close" Width="600px"></asp:Label>
</div>

i try to hide div when page load :

<script type="text/javascript">
window.onload = function() {            
        var x = document.getElementById('lbStatus').innerText;
        if(x == "Close"){
            $("#postreply").hide();
        }
    }</script>

anyone help me hide this div with lbStatus.Text = Close

Answer 1

Can't you simply use CSS for this?

#postreply {
   display: none; /* onLoad your div will be hidden */
}

Answer 2

Try this, once with $(document).ready , it executes when HTML-Document is loaded and DOM is ready where as window.onload executes when complete page is fully loaded, including all frames, objects and images

$(document).ready(function() {
    if($("#lbStatus").val() == "Close"){
        $("#postreply").hide();
    }
});

As you are using Asp.Net try to use ClientId property

$(document).ready(function() {
    if($("#<%=lbStatus.ClientID%>").val() == "Close"){
        $("#postreply").hide();
    }
});

Changed <%=lbStatus.ClientID%> instead of lbStatus

Reference: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

You mix up between pure javascript and jQuery.
If you not include jquery library, use pure javascript.

<script type="text/javascript">
  window.onload = function() {            
    var x = document.getElementById('lbStatus').innerText;
    if(x == "Close"){
      // $("#postreply").hide();
      document.getElementById('postreply').style.display = 'none';
    }
  }
</script>

Answer 4

Looks like you need to remove the # sign.

$('postreply').hide();

Or, vanilla Javascript:

document.getElementById('postreply').style.display = 'none';

Answer 5

You can hide it from the start.

Either with javascript : document.getElementById('lbStatus').style.display = 'none'; and to get it back "visible" use document.getElementById('lbStatus').style.display = "";

or with css : #lbStatus{display: none;}