Tuesday, November 10, 2009

Implementation of fly-out flash message in your application

Now a days usability is one of the major issues for web application. Many web applications with good functionality did not get enough popularity because lack of usability. Flash message is one of the most important things of any application which may improve usability of an application.

Here, I have explain steps for implementing fly-out style flash message like as Twitter, Gmail and Scrumpad etc.

Step 1: Add following JavaScript in your application which is for showing/hiding a message:
function showFlashMessage(message, message_type)
{
 var FMD = document.getElementById('flash_message_div');
 message_type = (typeof(message_type) != 'undefined' && message_type != '') ? message_type : 'success';
 message = message.replace(/^\s+/,""); //remove blank space from left
 message = message.replace(/^\s+|\s+$/g,"");//remove blank space from right

 if(message != '')
 {
   FMD.childNodes[1].innerHTML = message;
   FMD.className = message_type;
   //FMD.slideDown();
   FMD.style.display = 'block';
   window.setTimeout("hideFlashMessage()", 6000);
 }
}

function hideFlashMessage()
{
 var FMD = document.getElementById('flash_message_div');
 //FMD.fade();
 FMD.style.display = 'none';
}
In the above code,
Line 11 is used to set css className for success and failure message to show different type message.
Line 12 and 20 used to add visual effect during show/hiding a message by Prototype library.

Step 2: Add following Css style in your application:
#flash_message_div
{
 left: 0;
 z-index: 999;
 position: absolute;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 font-size: 16px;
 font-weight: bold;
 display: none;

 filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
 -moz-opacity: 0.9;
 opacity:0.9;
}
div#flash_message_div
{
 top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
div > div#flash_message_div
{
 position: fixed;
 top: 0px;
 vertical-align:middle;
}
div.success
{
 background-color: #709397;
 color: #FFFFFF;
}
div.failure
{
 background-color: #709397;
 color: red;
}
div#flash_message_div div
{
 padding:10px;
}
In the above css,
Line 17-26 is used to adjust flash message in any resolution.
.success and .error class is used to show different type message for success and failure.

Step 3: Now add given Html code under top of the body section for flash message:
<div id="flash_message_div" class="success">
 <div>
   <!-- Call showFlashMessage(); method from here by app language(PHP, .Net etc) -->
 </div>
</div>

To use it during Ajax request just call showFlashMessage() method with parameters.
Hopefully it will be very helpful for all to improve usability of your application. Enjoy!


View Demo