Hide jQuery message div on page load (on asp.net 4.0 page)
<p>jQuery noob here:  </p>

<p>I have the following message div that shows a message on button click and fades after several seconds. This works fine. However, I would like the message div to hide on page load and display on button click. </p>

<p>So far, I've tried adding the hideDiv class to the message div, but then messageDiv doesn't display at all (on load or on button click).  I've also tried hiding/showing a parent wrapping Div (not shown here).</p>

<p>Suggestions?  </p>

<pre><code>&lt;div id="messageDiv" runat="server" class="alert"&gt;Row Deleted&lt;/div&gt;
</code></pre>

<p>.</p>

<pre><code>&lt;style type="text/css"&gt;
.alert{display:block;width:100%;color:#900000;font-size: 1.4em;}
.hideDiv{display:none;}
&lt;/style&gt;
</code></pre>

<p>.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$(document.getElementById('&lt;%= messageDiv.ClientID %&gt;')).addClass("alert"); setTimeout(function () {
$(document.getElementById('&lt;%= messageDiv.ClientID %&gt;')).fadeOut("slow", function () {
$(document.getElementById('&lt;%= messageDiv.ClientID %&gt;')).remove();
});
}, 4000);
});
&lt;/script&gt;
</code></pre>

<p>.</p>

<pre><code>&lt;asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /&gt; 

protected void Button1_Click(object sender, EventArgs e)
{messageDiv.InnerText = "Row Action Completed";}
</code></pre>
