Asp.Net C#: JQuery

jQuery Change Image on Mouse Over or Image Src (Source) on Hover

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img id="imgdetails" src="http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/2.jpg" />
</div>
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span><b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Introduction</span></u></b><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">: </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div>
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br />
Here I will explain how to use </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> to </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">change image on
mouseover or </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> change image
source or src on mouse over in </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> or swap images on
mouse over using</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">
</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">jQuery.</span><br />
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">To change
image on mouse over we need to write the code like as shown below</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<a href="https://www.blogger.com/null" name="more"></a><br />
<table border="1" cellpadding="0" class="MsoNormalTable" style="border: dashed brown 1.0pt; mso-cellspacing: 1.5pt; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184;">
 <tbody>
<tr>
  <td style="border: none; padding: .75pt .75pt .75pt .75pt;">
  <div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">title</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">jQuery Change Image on Mouseover<span style="color: blue;"></</span><span style="color: #a31515;">title</span><span style="color: blue;">></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">script</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://code.jquery.com/jquery-1.8.2.js"></</span><span style="color: #a31515;">script</span><span style="color: blue;">></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">script</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: blue;">function</span>()
  {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: #a31515;">"#imgdetails"</span>).hover(<span style="color: blue;">function</span>() {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: blue;">this</span>).attr(<span style="color: #a31515;">"src"</span>, <span style="color: #a31515;">"http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/2.jpg"</span>);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}, <span style="color: blue;">function</span>()
  {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">$(<span style="color: blue;">this</span>).attr(<span style="color: #a31515;">"src"</span>, <span style="color: #a31515;">"http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg"</span>);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">});</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">})</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">script</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">id</span><span style="color: blue;">="form1"></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">img</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">id</span><span style="color: blue;">="imgdetails"</span>
  <span style="color: red;">src</span><span style="color: blue;">="http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg"</span>
  <span style="color: blue;">/></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div>
</td>
 </tr>
</tbody></table>
<b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span></u></b></div>

jQuery Change Image on Mouse Over or Image Src (Source) on Hover

Introduction : Here I will explain how to use jQuery to change image on mouseover or jQuery change image source or src on mouse ov...

Simple form validation using jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
I needed an easy way to do validation for a custom HTML form. Since 
the website was in Drupal which uses jQuery it was natural to look for 
solutions that take advantage of that library. I ended up using the 
jQuery Validation plugin which is simple to implement on any form.<br />

<h2>
The setup</h2>
A rather plain looking newsletter sign-up form with the name and email address as required fields.<br />

<h3>
Form HTML</h3>
<pre class="brush: html; toolbar: false;"><form action="#" method="post" id="signup_form">
 <fieldset>
 <legend>Newsletter sign-up</legend>
  <p>
   <label for="name">Name <span>*</span></label>
   <input type="text" name="name"size="30" />
  </p>
  <p>
   <label for="email">Email <span>*</span></label>
   <input type="text" name="email" size="30" /></p>
  <p>
  <p>
   <label for="company">Company</label>
   <input type="text" name="company" size="30" />
  </p>
   <label for="phone">Phone</label>
   <input type="text" name="phone" size="15" />
  </p>
  <p>
   <input type="submit" value="Submit" name="submit" />
  </p>
 </fieldset>
</form>
</pre>
<h3>
Form CSS</h3>
<pre class="brush: css; toolbar: false;">#signup_form fieldset {
 padding:1em 1.5em;
 border:1px solid #bbb;
}

#signup_form legend {
 font-weight:bold;
}

#signup_form label {
 display:block;
}

#signup_form label span {
 color:#f00;
}
</pre>
<h3>
Form output</h3>
<img alt="Sign-up form" src="http://www.anttivaihia.com/files/pictures/blog/signup_form.jpg" style="height: 300px; width: 461px;" /><br />

<h2>
Validating the form</h2>
In order to make it work you need the following:<br />

<ul>
<li><a href="http://jquery.com/" rel="external">jQuery JavaScript Library</a></li>
<li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation" rel="external">jQuery Validation plugin</a></li>
</ul>
<h3>
Link it up</h3>
Either copy the scripts to your own server or hotlink via a <abbr title="Content delivery network">CDN</abbr>. You also need to initiate the validation to your specified form. Replace the signup_form with whatever your form ID is.<br />

<pre class="brush: html; toolbar: false; highlight: 5"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#signup_form").validate();
});
</script>
</pre>
<h3>
Class it up</h3>
Next up you add specific classes to your form fields depending on how you want them validated. Have a look at the <a href="http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods" rel="external">available validation methods</a>. I set the name and email fields as required and the email field to conform to a valid email address.<br />

<pre class="brush: html; toolbar: false; highlight: [3, 7]"><p>
 <label for="name">Name <span>*</span></label>
 <input type="text" name="name"size="30" class="required" />
</p>
<p>
 <label for="email">Email <span>*</span></label>
 <input type="text" name="email" size="30" class="required email" /></p>
<p>
</pre>
<h2>
Test and polish</h2>
The validation should now be working as expected. To make the error 
messages appear a bit nicer and more obvious you can style it with CSS.<br />

<pre class="brush: css; toolbar: false;">#signup_form .error {
 padding:5px;
 margin:5px 0;
 border:1px solid #f00;
}

</pre>
The final output when testing is looking like this:<br />

And there we have it. A robust form validation using jQuery with just a few simple steps!</div>

Simple form validation using jQuery

I needed an easy way to do validation for a custom HTML form. Since the website was in Drupal which uses jQuery it was natural to look for...

Show jQuery notification pop up message box and hide after 5 seconds in asp.net

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzkRaRo4v4TmcxCvPs0zcMo0uldpqJSGRhtoWPA2J2go2THXumuSz_Prj7zxHVWOTAJRUoPAVrOROHyJExMulMheXfMtGercRIkKxjW5O8QcL5EtG4_5p76U_sUxG2Eo3u9IAFLUqtHFw/s1600/Notification+pop+up+message+box+using+jQuery+in+asp.net.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Notification pop up message box using jQuery in asp.net" border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzkRaRo4v4TmcxCvPs0zcMo0uldpqJSGRhtoWPA2J2go2THXumuSz_Prj7zxHVWOTAJRUoPAVrOROHyJExMulMheXfMtGercRIkKxjW5O8QcL5EtG4_5p76U_sUxG2Eo3u9IAFLUqtHFw/s1600/Notification+pop+up+message+box+using+jQuery+in+asp.net.gif" title="Notification pop up message box using jQuery in asp.net" width="320" /></a><span style="font-size: large;"><b><span style="color: #cc0000; font-family: Trebuchet MS,sans-serif;">Introduction</span></b></span><span style="font-family: Cambria, serif;"><span style="font-size: large;">:</span> <span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;">In this article i
am going to share the trick to show notification pop up message box in asp.net
using jQuery that will hide after 5 seconds after displaying the </span>message.</span></span><br />
<br />
<div class="MsoNormal">
<span style="font-size: large;"><b><span style="color: #cc0000; font-family: Trebuchet MS, sans-serif;">Description:</span></b></span> <span style="font-family: Cambria, serif;"> <span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">While developing web application we need to
show message box or notification pop up frequently. For example to show the
Message like "Record saved successfully", "Record could not be
saved" or "Record deleted successfully" etc. But in web
forms there is no inbuilt feature to show message box. So we need to create our
own custom notification/message box using jQuery that popup and display the
message.</span></span></span></div>
<div class="MsoNormal">
<span style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"><br /></span></div>
<div class="MsoNormal">
<b><span style="color: #cc0000; font-family: Trebuchet MS, sans-serif;"><span style="font-size: large;">Implementation:</span><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b><span style="font-family: Arial,Helvetica,sans-serif;">Let's create a
demo website page to demonstrate the notification pop up message box.</span></div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">First of all we will create style for the
notification message box. So in the solution explorer, right click on your
website and click on "Add New Item" -> select "Style
Sheet" and keep the default name "Stylesheet.css"</span></li>
<span style="font-family: Arial,Helvetica,sans-serif;">
</span>
<li><span style="font-family: Arial,Helvetica,sans-serif;">In the StyleSheet.css paste the
following.</span></li>
<span style="font-family: Arial,Helvetica,sans-serif;">
</span></ul>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: maroon;">.notification</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">{</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">background-color</span>:<span style="color: blue;">#006699</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">min-height</span>:<span style="color: blue;">40px</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">width</span>:<span style="color: blue;">30%</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">margin</span>:<span style="color: blue;">0</span> <span style="color: blue;">auto</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">text-align</span>:<span style="color: blue;">center</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">line-height</span>:<span style="color: blue;">50px</span>; </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">color</span>:<span style="color: blue;">#fff</span>; </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">font-size</span>:<span style="color: blue;">18px</span>; </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: red;">box-shadow</span>: <span style="color: blue;">10px</span> <span style="color: blue;">10px</span> <span style="color: blue;">5px</span> <span style="color: blue;">#888888</span>;</span></span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">}</span></span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">In the <Head> tag of the
design page(default.aspx) paste the following.</span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: blue; mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"><</span><span style="color: maroon; mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">link</span><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"> <span style="color: red;">href</span><span style="color: blue;">="StyleSheet.css"</span> <span style="color: red;">rel</span><span style="color: blue;">="stylesheet"</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"</span> <span style="color: blue;">/></span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"><span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">language</span><span style="color: blue;">="javascript"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">       
$(document).ready(<span style="color: blue;">function</span>(){</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">        $(<span style="color: maroon;">'#<span style="background: yellow; mso-highlight: yellow;"><%</span>=dvMsg.ClientID<span style="background: yellow; mso-highlight: yellow;">%></span>'</span>).fadeOut(5000,<span style="color: blue;">function</span>(){</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">        $(<span style="color: blue;">this</span>).html(<span style="color: maroon;">""</span>);
<span style="color: darkgreen;">//reset label after fadeout</span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">       
});</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">      
});    </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"><span style="color: blue;"><br /></span></span></span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: maroon;"> </span>In the <Body> tag place a
button control and create the <div> tag having label control which will
contain the message as:</span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: maroon; mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"> </span><span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="dvMsg"</span> <span style="color: red;">class</span><span style="color: blue;">="notification"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">visible</span><span style="color: blue;">="false"></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span> <span style="color: red;">ID</span><span style="color: blue;">="lblMsg"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span><span style="color: blue;">></span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnShowMsg"</span>
<span style="color: red;">runat</span><span style="color: blue;">="server"</span>
<span style="color: red;">Text</span><span style="color: blue;">="Show"</span>
</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">           
<span style="color: red;">onclick</span><span style="color: blue;">="btnShowMsg_Click"</span>
<span style="color: blue;">/></span></span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"><span style="color: blue;"> </span> </span></span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: #cc0000; font-size: medium;">Asp.Net C#</span> code to show
notification popup</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">In the code behind file (default.aspx.cs)
write the code on show button click as:</span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: blue; mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">protected</span><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"> <span style="color: blue;">void</span> btnShowMsg_Click(<span style="color: blue;">object</span>
sender, <span style="color: #2b91af;">EventArgs</span> e)</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    {</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">       
dvMsg.Visible = <span style="color: blue;">true</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">       
lblMsg.Text = <span style="color: #a31515;">"This is notification
message demo"</span>;</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    }</span></span><br />
<br />
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"> </span><span style="color: #cc0000; font-size: medium;">Asp.Net VB</span> code to show
notification popup</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">In the code behind file (default.aspx.vb)
write the code on show button click as:</span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: blue; mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">protected</span><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;"> <span style="color: blue;">void</span> btnShowMsg_Click(<span style="color: blue;">object</span>
sender, <span style="color: #2b91af;">EventArgs</span> e)</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    {</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">       
dvMsg.Visible = <span style="color: blue;">true</span></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">       
lblMsg.Text = <span style="color: #a31515;">"This is notification
message demo"</span></span></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-ascii-theme-font: major-latin; mso-bidi-font-family: Consolas; mso-hansi-theme-font: major-latin;">    }</span></span></div>

Show jQuery notification pop up message box and hide after 5 seconds in asp.net

Introduction : In this article i am going to share the trick to show notification pop up message box in asp.net using jQuery that will hid...

Welcome to asp.net

Welcome to new place of asp.net tutorials zone