enavu webdevmania tutsvalley psdestination
visit the enavu network
No Comments Article Title Overlay Article Title

Create a Disappearing jQuery Dialog Message (Growl Like)

Create a simple Message Dialog Box that disappears after a certain amount of seconds. Simple Growl Like Notification System.

I was creating a notification box for fzilla, and it took me 30 minutes to find a good tutorial, or at least code to do this, so i thought why not make a tutorial about it.
First lets [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Create a simple Message Dialog Box that disappears after a certain amount of seconds. Simple Growl Like Notification System.

Message Box PreviewI was creating a notification box for fzilla, and it took me 30 minutes to find a good tutorial, or at least code to do this, so i thought why not make a tutorial about it.

First lets start the page with some simple code, i’m going to add a div with out message in it.

Here we say something very important!

The class name is straight forward, it’s messageBox. Once we have the div in our html let’s add the styling.

.messageBox {
width:150px;
padding:10px;
border:1px solid #666;
position:fixed; right:2%;
top:2%;
z-index:999;
-webkit-border-radius: 6px; -moz-border-radius: 6px;}

Let me explain some of those styling properties. First the width of 150px seems about right, this can be easily changed. Padding is important so the message looks pretty and clean. The border really helps the message stand out. Then the important part the positioning, first we need to position it either absolute or fixed, then we add the specific location of the element, the reason i use 2% from top and from the right is because the bigger the resolution you have the further away the message will be. I use a high z-index so that our message is above anything else on the page. And then finally i use some css3 (which will work on all browsers except IE) to make the message even prettier. Now let’s add the javascript.








We add the jQuery library, then we add the actual meat. the setTimeout function will basically timeOut for the specified time, which is 1000milliseconds (1 second). And we are done! You have a pretty message box that will disappear in a second. View the demo for full code sample.

View Demo

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Create an AMAZING contact form with no ready made plugins.
  2. Centering a Div Vertically and Horizontally via pure CSS or with JS
  3. Easy jQuery Sticky Sub Header Solution
  4. Curtains Opening Animation with jQuery
  5. Making an infinite JQuery carousel

Did you absolutely LOVE this article... share it!

Comments

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting