Click here to Skip to main content
14,769,372 members
Articles » Web Development » Client side scripting » General
Article
Posted 14 Mar 2009

Stats

37.4K views
517 downloads
39 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.44/5 (9 votes)
17 Mar 2009CPOL
Article on how to display action messages after any action or event performs successfully or not like Gmail using JQuery and CSS

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:

success1.JPG

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

fail.JPG

For informative messages: 

info.JPG

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Prakash Hirani
Technical Lead IndiaNIC Infotech Ltd.
India India
• 3.6 years of experience in IT industry
• 3.6 years of Experience in Web technologies including ASP.net.
• Hands-on experience in Technologies including DotNet 2003/2005 (C# & VB.net) – MVC Framework, MS SQL server 2003/2005/2008, java script, jQuery, Ajax, CSS, SVN, VSS.
• Hands on experience on working in N-Tire Architecture.
• Experience in HTML, DHTML, XML, CSS.
• A quick learner and good management, analytical and database designing skill.
• Experience in Application Servers including IIS 5.0/6.0/7.0

Comments and Discussions

 
GeneralHi Pin
Vivek Thakur13-Nov-09 3:09
professionalVivek Thakur13-Nov-09 3:09 
Hi,

Kindly send me an email at vivekthakur(a)gmail.com to discuss an interesting opportunity.

thanks,

Vivek

http://www.vivekthakur.com

Generalworking example please Pin
Member 43704239-Apr-09 21:47
MemberMember 43704239-Apr-09 21:47 
GeneralPlease provide working example Pin
bmwz919-Mar-09 4:00
Memberbmwz919-Mar-09 4:00 
GeneralRe: Please provide working example Pin
Prakash Hirani20-Mar-09 0:43
MemberPrakash Hirani20-Mar-09 0:43 
GeneralRe: Please provide working example Pin
webooth24-Mar-09 6:42
Memberwebooth24-Mar-09 6:42 
GeneralImprovement Pin
Neetflash17-Mar-09 1:28
MemberNeetflash17-Mar-09 1:28 
GeneralRe: Improvement Pin
Mike Puddephat17-Mar-09 3:10
MemberMike Puddephat17-Mar-09 3:10 
GeneralRe: Improvement Pin
Prakash Hirani17-Mar-09 3:28
MemberPrakash Hirani17-Mar-09 3:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.