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
- jQuery
- 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.