Tag Archives: jquery alert message

Twitter like Message Alerts using JQuery

Hello Reader, 

Today I am here to share a cool way of showing message alerts on you your websites.  

It is very common to show custom message alerts to users/visitors on a website on the occurence of some events like validation errors on login or sign up forms or on data add/update or delete. Most of the times we use the common javascript alert() function to show such message which shows an ugly message box to the users or try to use a ready made third party tools which does similar task but loads your webpages with JS scripts and hampers the speed of your website and somtimes the performace of your web applications too. 

But why should you show those ugly message box or load your webspage with extra JS files when you have easy solutions with jQuery

jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
 

So here goes the code you implement on your webpages to show smart message alerts to visitor of your website. 

Step 1 

Download (if you dont already have) the latest version of jQuery script from http://jquery.com/ and include it on your webpage. 

Step 2 

Include this div at the top inside the body tag of your webpage 

Step 3 

Include the following CSS style in you stylesheet file. This controls the appearance and position of the Message Alert container. 

#divSlideMessage{
height:40px;width:99.8%;background-color:#ffffff;color:#000;font-family:”Trebuchet MS”, Tahoma; font-size:18px; text-align:center;display: none;border:1px solid #562c2c; margin:0 0 0 0;padding-top:10px;}

Step 4

Include this javascript function in you webpage

function ShowNotification(message, showwait, hidewait) {
$(“#divSlideMessage”).oneTime(showwait, function() {
$(this).html(message);
$(‘#divSlideMessage’).slideDown(“normal”);
$(‘#divSlideMessage’).focus();
}).oneTime(hidewait, “soon”, function() {
$(this).slideUp(“fast”);
});
}

Step 5 (Final Step)

Now use ShowNotification(message, showwait, hidewait) function in place alert() or any other function that you were using to show the message alerts.

ShowNotification accepts three arguments

message – your alert message

showwait – time in milliseconds, after how long the message should be shown

hidewait – time in milliseconds, after how long should it dissappear

Hope this helps, please feel free to contact me in case you find any problem.

Thanks for reading! 🙂