Gmail style Static message box using jQuery

If u want to see a gmail style, “Loading” message box on ur application, its extremely simple using jQuery and CSS. All u need to know is

  1. jQuery
  2. HTML and good CSS, duh!

A ‘fixed’ element

First u need to have a fixed element, so u can define a div and give it css property as position: fixed;

jQuery methods to show, hide messages

U need to take a reference of the element, and then apply jQuery’s fadeIn and fadeOut method. A simple setTimeout can be set to automatically hide the message.

function notify(message, timeOut) {
	// Set the message using text method and chain fadeIn with it
	// apply simple setTimeout to fadeOut the message
	$('#boxd').text(message).fadeIn();
	setTimeout(function(){
		$('#boxd').fadeOut();
	}, timeOut*1000);
}

$(function(){
	// Wait to attach a event handler for the demo button
	$('#btn').click(function(){
		notify(new Date().toString(), 5);
	});
});

Check the attached example.

Leave a Reply

Your email address will not be published. Required fields are marked *