Displaying Messages After Any Action or Event Performed like Gmail using JQuery and CSS

• Download source - 38 KB

Introduction

This is an article on how to display action messages after any action or event is performed successfully or not like Gmail using JQuery and CSS.

Whenever any actions or events are performed like delete, edit, send message by clicking, it is better to display a message relative to that action to the user after success/failure of that action like "Image has been deleted", "Message has been sent", etc.

Let's see some examples in the following screens:

For action completed successfully:

For action not completed, i.e. some error encountered:

For informative messages: 

Using the Code  

It's straightforward and easy to do this. I created one function in the "msgwindow.js" file as follows: 

Function Arguments  

• msgEle: The page element id in which you want to display the message  
• msgText: Text to display as message  
• msgClass: CSS class name  
• msgIcon: Icon path to display with message 
• msgHideIcon: Icon path to hide the message  
• autoHide: True for hide automatically 

$.showmsg = function(msgEle,msgText,msgClass,msgIcon,msgHideIcon,autoHide){
var tblMsg;
        
tblMsg = '<table width="100%" cellpadding="1" cellspacing="0" 
	border="0" class="' + msgClass + '"><tr>
	<td style="width:30px;" align="center" valign="middle">' + 
	msgIcon + '</td><td>' + msgText + '</td><td style="width:30px;" 
	align="center" valign="middle"><a href="javascript:void(0);" 
	onclick="$(\'#' + msgEle + '\').toggle(400);">' + msgHideIcon + 
	'</a></td></tr></table>';
//alert(tblMag);
$("#" + msgEle).html(tblMsg);
$("#" + msgEle).show();
if(autoHide)
{
    setTimeout(function(){
      $('#' + msgEle).fadeOut('normal')},10000    
    );
    }
}	 

Let's see one example so it will more clear. 

The Function Calling 

function deleteImage()
{
	if(confirm("Are you sure?"))
	/*
	code to delete the image
	*/
	$.showmsg('spnMessage','Image has been deleted.','success',
		'<img src="Images/icon_status_success_26x26.gif"/>',
		'<img src="Images/hide-icon.gif" alt="Hide" title="Hide"/>',true);
} 

The HTML Source 

<tr>
    <td>
        <span id="spnMessage" style="display:none;"></span>
    </td>
</tr>   

As shown in the above example, the message will be displayed in the <span> element whose id is 'spnMessage'. You also use label, span, div, any other HTML element which can display text. You can change the timer for the autohide in the function as per your requirements.

Steps 

1. Download the attached zip folder.  
2. Add the jquery.js file in your page (If you have already added, then please ignore this step.) 
3. Add "msgwindow.js" file.
4. Add the CSS file in your page or copy all the classes in your existing CSS file.
5. Copy the images in your project.