Flashing Alert Message Box using JQuery

Posted on July 2, 2008
Filed Under how-to, jquery, tutorial

As you can see in the poll running on this blog, jQuery is leading among the other JavaScript framework by a good margin. And, this blogger is also a great fan of jQuery.This time, I’ve come up with another tutorial of jquery. In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser using jQuery. This alert box gets displayed with animation when the page is loaded for the first time.

Live Demo

Let’s start looking at the HTML, CSS and JavaScript Code in jquery to make the animated alerting message box using jQuery.

HTML code for Flashing Alert Message using jQuery

<div id="object" class="message">
  <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
  <strong>Massive Offer </strong>
  <p>The detail of this offer goes here dude just Grab this offer !!!!!!! </p>
</div>

As you the message box which I want to display is inside the “div” element with id “object”. And there is an image inside of this box with id “close_window”, when this image is clicked the message box gets vanished with fading effect.

CSS code for Flashing Alert Message Box using jQuery

.message{
border:1px solid #CCCCCC;
position:absolute;
width:150px;
border:1px solid #c93;
background:#ffc;
padding:5px;
left:0px;
top : -170px;
}

As you know, I’m very poor in selecting good colors, please forgive me for the bad design of the alert box.

Above is the class which I’ve used for flashing message box. The position property must be “absolute” and the top property should be choosen such a way that the message box gets hidden in the top part of the browser. The other part property of CSS is straightforward you can change them according to your need.

JavaScript code in jQuery for Flashing Alert Message Box

$(document).ready(function()
{
  //first slide down and blink the message box
  $("#object").animate({
  top: "0px"
  }, 2000 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

  //close the message box when cross red image is clicked
  $("#close_message").click(function()
  {
     $("#object").fadeOut("slow");
  });
});

As you know, we’ve placed the message box in the top of the browser in such a way that it is not visible in the browsers. Now, the above jQuery code is used this message box to get slide down and gets flashed in the browser. For this, I’ve used animate() and fadeOut() and fadeIn() functions of jQuery.

And, when the close image of the message box is clicked, the alert box gets vanished with the fading effect.

Download Full Source Code

Popularity: 16% [?]

Follow me on twitter at http://twitter.com/roshanbh.

» Blink and bounce effect on image or object using jquery
» Top Floating message box using jQuery
» Help me to become the first Blogging Idol
» Block Shuffling effect using jquery

Comments

6 Responses to “Flashing Alert Message Box using JQuery”

subesh on July 3rd, 2008 4:09 am

I think you missed the side… the box appears on the left top side… on MOZ-3
Christoph on July 3rd, 2008 5:27 am

Same thing in Firefox 2, left top
Roshan on July 3rd, 2008 6:57 am

It is in the top left corner in any browser guyz sorry for the misunderstanding in the demo page…Thanks to subesh and Christoph for having the close look

But, it is mentioned in the first paragraph of this post….

“In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser”
Jason Palmer on July 4th, 2008 12:24 am

Why not just use jquery growl? It’s far better.
Roshan on July 4th, 2008 5:01 am

@Jason - There is no doubt that jQuery growl is much better than this example. Growl is a nice jquery plugin and this is just a example to show you how can we use pure jquery to populate the alert message box…
“The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption on August 19th, 2008 2:41 am

[...] Flashing Alert Message Box using JQueryShow a sliding and animated alert message. [...]