Tuesday, May 3, 2011

Jquery Auto Hide

Hi Guys today i come up with some cool example of JQuery. its a "Auto hide button or Div after some interval time "

if you seen in Gmail, when you send a mail or move the mail to any folder or if you do any operation you will see the confirm message and after some interval time it will hide automatically.
like this:

yes here is the source on same.


<html><head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script language="javascript">
(function($){
$(document).ready(function() {
$("[AutoHide]").each(function() {
if (!isNaN($(this).attr("AutoHide"))) {
eval("setTimeout(function() {jQuery('#" + this.id + "').hide();}, " + parseInt($(this).attr('AutoHide')) * 1000 + ");");
}
});
});
})(jQuery);
</script>
</head>
<body>
<center>
<br><br>
<div id="div1Seconds" AutoHide="10" style="background: #ccc; border: solid 1px #333">
<input type="button" value="This Button will be hidden in 10 second.">
</div>
<br><br>
<div id="div3Seconds" AutoHide="15" style="background: #ccc; border: solid 1px #333">
<input type="button" value="This Button will be hidden in 15 second.">
</div>
</center>
</body>
</html>

Demo : (refresh page to view the demo)










Hope it will likes you.