Blink your notification message with javascript and jquery

I was developing an application where I was needing to show some notification messages those should be blink in a time interval, So that the user can easily notice the notice.

Here I’m going to show the simple idea how we can do that :

First we need to have some div for the notification message, for example:

<div class="blink">
 <p>Your notification message</p>
 </div>

You may have css for the div:

 .blink {
      background: none repeat scroll 0 0 rgb(255, 255, 255);
      border: 1px solid #CC9933;
      border-radius: 1em 1em 1em 1em;
      position: absolute;
      width: 300px;
      left:0px; top : -170px
 }

Now the fun with Javascript and jquery:

 $(document).ready(function(){
     $('.blink').each(function() {
         var elem = $(this);
         setInterval(function() {
             if (elem.css('background-color') == 'rgb(255, 255, 255)') {
                 elem.css('background-color', 'rgb(255, 255, 204)'); //I'm changing the background color, you may hide and show the div as well.
             } else {
                 elem.css('background-color', 'rgb(255, 255, 255)');
             }
         }, 1000);
     });
});

Try this ! I hope you enjoy who didn’t do this before.

Cheers!

Advertisements

, , , , ,

  1. #1 by Harshitha Dinesh on August 21, 2014 - 12:44 PM

    Can you please provide me the code in javascript instead of jQuery for the blink notification.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: