Click here to Skip to main content
15,077,137 members
Articles / Web Development / XHTML
Posted 14 Sep 2009


26 bookmarked

Gmail Internal Chat Like Message Box

Rate me:
Please Sign up or sign in to vote.
3.90/5 (8 votes)
14 Sep 2009CPOL3 min read
Gmail internal chat like message box


This article provides you with a multi-functional message box window through which the usability of the web-site or any web application increases.


You all might be familiar with using Gtalk / Gmail chat application. Whenever someone sends a message to you, a small window appears at the bottom-right corner of your browser (in case of Gmail / Orkut) or at the bottom-right corner of your desktop. This message window works seamlessly without requiring any kind of user interaction, but still it interacts with the user.

What I have tried to achieve is to implement a similar kind of multi-functional message box window within the web-browser, thereby avoiding all kinds of unwanted clicks and providing all the useful information to the user at any interval of time.

MessageBox - Click to enlarge image


  • Configurable MessageBox window with AJAX Support
  • Can set maximum number of message boxes to be visible
  • Can define the auto reload time, for single message, for all messages or no reload
  • Can create messages through a single function call
  • Can define auto hide time for each message

With this, you can avoid all alert messages / pop-up messages, and still intimate the user about what is going on in the system.

Using the Code

To start with, you are supposed to carry out the following steps:

  1. Include the following CSS and JS files in your HTML page HEAD section:
    <link href="base.css" type="text/css" rel="stylesheet" />
    <link href="theme.css" type="text/css" rel="stylesheet" />
    <script src="MessageBox.js" type="text/javascript"></script>
  2. In the BODY section, create one container to hold the messagebox window and provide a unique ID to it, as given below:
    <DIV ID="MsgContainer" CLASS="MsgContainer"></DIV>
  3. At the end, you need to create an object for message box window.
    • thisObject: Name of the object you are creating
    • msgContainer: ID of the container that holds the messagebox window
    • maxMessages: Maximum number of messages that can be visible at a time
    • autoHideTime: The global auto-hide time for all the messagebox windows that appear
    <SCRIPT LANGUAGE="JavaScript">
    //MessageBox(thisObject, msgContainer, maxMessages, autoHideTime /*milli seconds*/)
    var messagebox = new MessageBox('messagebox', 'MsgContainer', 2, 10000);

How to Create MessageBox Window?

The MessageBox class provides you two APIs for creating messagebox window. These APIs can be accessed using the MessageBox object that is created above, in step 3.

  1. C#
    	(msgHeader, url, minutesBeforeReload, autoHideTime, msgType) 

    Invoke this method if you want to display messagebox using AJAX request. No separate AJAX code is required. Just provide a URL from where data is to be fetched.

    Meaning of the Parameters

    • msgHeader: The header content to be displayed
    • url: The URL from where the data is to be displayed
    • minutesBeforeReload: The reload timing in minutes
    • autoHideTime: The auto-hide time in milliseconds
    • msgType: The type of messagebox to be displayed

    The msgType is classified into 4 categories, which is nothing but change in the background color of the message window. Currently, I have set them to:

    {DEFAULT: -1, INFO: '#FFFF80', ALERT: '#FF7E00', ERROR: '#FF0000'};

    It can be accessed using MessageBox object as:

  2. C#
    messagebox.createMsgBox(msgHeader, msgContent, msgIndex, autoHideTime, msgType) 

    Invoke this method if you want to statically display a messagebox window. For example, you want to intimate a user about "form saved successfully" through messagebox window.

    Meaning of the Parameters

    • msgHeader: The header content to be displayed
    • msgContent: The contents of the message box (either Text or HTML)
    • msgIndex: Set this to null
    • autoHideTime: The auto-hide time in milliseconds, if set to null, the default settings will be applied
    • msgType: The type of messagebox to be displayed, as shown above


Hope all of you will find this article very useful.


  • 14th September, 2009: Initial post


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


About the Author

Niral Soni
Business Analyst Tata Consultancy Services Ltd.
India India
I started my career as Java Developer. But now more inclined towards web designing, JavaScript, HTML and CSS.I have good level of expertise on Java, Oracle and JavaScript. Designing Generic components is my main expertise.

Comments and Discussions

GeneralMy vote of 1 Pin
xxxpandit16-Aug-12 1:04
Memberxxxpandit16-Aug-12 1:04 
GeneralRe: My vote of 1 Pin
Niral Soni20-Aug-12 7:59
MemberNiral Soni20-Aug-12 7:59 
QuestionHow to use in!! Pin
dexters0072-Jan-11 21:24
professionaldexters0072-Jan-11 21:24 
AnswerRe: How to use in!! Pin
Niral Soni3-Jan-11 6:07
MemberNiral Soni3-Jan-11 6:07 
GeneralMy vote of 2 Pin
J Xie26-Sep-10 18:55
MemberJ Xie26-Sep-10 18:55 
QuestionHow to make it like in Gmail Chat Pin
for120629-Apr-10 19:39
Memberfor120629-Apr-10 19:39 
GeneralLooks good! Pin
Sandeep Mewara24-Mar-10 5:20
mvaSandeep Mewara24-Mar-10 5:20 
QuestionHow do i apply this to my application inside eclipse?? Pin
mag_geo82-Nov-09 16:25
Membermag_geo82-Nov-09 16:25 
AnswerRe: How do i apply this to my application inside eclipse?? Pin
Niral Soni4-Nov-09 19:25
MemberNiral Soni4-Nov-09 19:25 
GeneralOther use Pin
Member 663560716-Oct-09 8:39
MemberMember 663560716-Oct-09 8:39 
AnswerRe: Other use Pin
Niral Soni22-Oct-09 7:37
MemberNiral Soni22-Oct-09 7:37 
GeneralGreat job... Pin
mag_geo815-Oct-09 2:13
Membermag_geo815-Oct-09 2:13 
GeneralRe: Great job... Pin
Niral Soni22-Oct-09 7:38
MemberNiral Soni22-Oct-09 7:38 

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.