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.

4 comments:

  1. interesting blog. It would be great if you can provide more details about it. Thanks you



    Web Development

    ReplyDelete
  2. Great well done man...

    ReplyDelete
  3. This is great! Thanks for sharing your works. How do I make it show up again without refreshing the page? Like having a toggle button to trigger the auto-hide buttons.

    ReplyDelete