Small, short code snippets that other people may find useful. Do you have a good regex that you would like to share? Share it! Even better, the code can be commented on, and improved.
I wanted a Growl-like notification system for an app I'm building, but.. for some reason I can't think of right now I didn't like jGrowl - likely the styling options.
Anyway, I rolled my own. This isn't a proper jQuery plugin, but it does use jQuery to simplify specifying elements & doing animations.
var Notify = {
displayFor:2000,
animationDuration:750,
show:function(text){
if($("#notify-wrapper").length == 0)
$('body').append('<div id = "notify-wrapper"></div>');
var date = new Date();
var id = "notifier-"+date.valueOf()+'-'+text.replace(/\W/g,'_');
$("#notify-wrapper").append('<div id = '+id+' class = "notification">'+text+'</div>');
$("#"+id).click(function(){ Notify.hide($(this).attr('id')); });
setTimeout("Notify.hide('"+id+"')",this.displayFor);
},
hide:function(id){
$("#"+id).slideUp(this.animationDuration,function(){ $(this).remove(); });
}
}
/* This is the container the notifications get placed into */
#notify-wrapper{
position:fixed;
right:0;
top:0;
width:200px;
padding:5px;
}
/* Each "Growl"/notification gets the .notification class */
#notify-wrapper .notification{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#000;
background-color:rgba(0,0,0,0.7);
color:#FFF;
padding:5px;
cursor:pointer;
margin-bottom:5px;
}
Actually, I think there is. In Firefox (and in most of the examples of setTimeout() I've seen online), the first argument to setTimeout() must be a string. Therefore the argument passed to hide() must be representable by a string.
Substituting the first argument to setTimeout() for a function like you've done apparently doesn't work in IE.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
I didn't test it because all I'd seen led me to believe what I wrote above. Plus, testing it requires me to fire up a Windows box (blech).
However, you are certainly write - it works. Below is the updated code. I made a couple changes from what you wrote. Namely, I don't use "self", use the new jQuery 1.4 syntax for creating elements, and don't wrap "notification" in another $() wrapper, as it's already a jQuery object.
Thanks for the advice - it does clean up the code a bit.
self is a reference for the container object. Just in case you decide to rename 'Notify' you don't have to update explicit references to it. It's proven useful in my experience, but it's just my preference of course
and don't wrap "notification" in another $() wrapper, as it's already a jQuery object.
Notice that inside the click event, 'this' is the HTML element and not a jQuery object, so you'd have to wrap it there instead if you remove it from the hide() function
and don't wrap "notification" in another $() wrapper, as it's already a jQuery object.
Notice that inside the click event, 'this' is the HTML element and not a jQuery object, so you'd have to wrap it there instead if you remove it from the hide() function
Duh - of course. Code has been updated.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.