Flashing Alert Message Box using JQuery

Advertisement

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

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

12 Comments on “Flashing Alert Message Box using JQuery”

  • subesh wrote on 3 July, 2008, 4:09

    I think you missed the side… the box appears on the left top side… on MOZ-3

  • Christoph wrote on 3 July, 2008, 5:27

    Same thing in Firefox 2, left top ;)

  • Roshan wrote on 3 July, 2008, 6:57

    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 wrote on 4 July, 2008, 0:24

    Why not just use jquery growl? It’s far better.

  • Roshan wrote on 4 July, 2008, 5:01

    @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…

  • Kshitij Parajuli wrote on 7 February, 2009, 18:25

    dami. I will use it in my portfolio n best of luck Roshan dai, ur blog is amazing. subscribe garchu!

  • Bill wrote on 25 March, 2009, 1:27

    I’m not able to get this to work in a WordPress theme? The JavaScript loads and so does the alert bar, but the close function does not work. Any suggestions? Thanks!

  • dess wrote on 11 March, 2010, 5:24

    what are the codes in making our own websites..?

    thanks!!!!!!!!

  • Wilson wrote on 24 April, 2010, 19:19

    Very nice post.

    Thanks!

  • anand wrote on 16 August, 2010, 5:44

    i used this script as html/javascript widget in my blog, its nice but iam not able to close the message box. how can i add this script as html/javascript widget in blogger.

  • sunil wrote on 20 August, 2010, 11:36

    I want to display message that automatically fade away after some time

Trackbacks

  1. “The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.