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.