Occasionally, and especially during the debugging phase of a development effort, I like to be able to create a message that appears in the web page on which I'm working, one that disappears after a few seconds. A flash message.
In the past, I've accomplished this in a variety of ways, including timeouts and so on. And some frameworks (Tapestry, e.g.) provide this kind of thing from the server as a built-in mechanism. But I'm just interested in doing this from within javascript.
Anyway, I was recently fooling around with prototypes and extending the javascript String object, and it occurred to me that a String extension to flash a message would be trivial to do, epsecially with JQuery to handle the timing parts. So I wrote this:
String.prototype.flash = function(){
$(".flash").html(this).fadeIn("fast");
setTimeout(function(){
$(".flash").fadeOut("slow");
}, 3500);
}
Coupled with a
element in the HTML in which to display the message
I am able to write flash messages off typical JS Strings:
("This is COOOOOL...").flash();
Which will show that message inside the DIV, then get rid of it after 3.5 seconds. I could extend it to parameterize the time and even the fade effects. But sometimes simpler is bester.
https://gist.github.com/scarton/98aa2588f1e66e022f64