CODEWITHSUNDEEP
javascriptjquery
beginerdeveloper
beginerdeveloper

Reputation: 845

Hide and show div when page load

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

Upvotes: 2

Views: 52474

Answers (5)

Satpal
Satpal

Reputation: 133453

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/

Upvotes: 4

Ben
Ben

Reputation: 57318

Looks like you need to remove the # sign.

$('postreply').hide();

Or, vanilla Javascript:

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

Upvotes: 1

Sergio
Sergio

Reputation: 28845

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;}

Upvotes: 0

diewland
diewland

Reputation: 1915

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>

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157434

Can't you simply use CSS for this?

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

Upvotes: 6

Related Questions