Wrote this for an app I'm building that needed a simple, non-intrusive feedback to the user when an AJAX event finished. I've found it incredibly useful so I thought I'd share. It does require jQuery 1.4+
Basic usage:
Code: Select all
Notify.show('This is the message the user will see');Code: Select all
Notify.displayFor = 1000;
Notify.animationDuration:100;Usable example: Copy this to a local HTML file & open it
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Notify example
</title>
<style type = "text/css">
#notify-wrapper{
position:fixed;
right:0;
top:0;
width:200px;
padding:5px;
}
#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;
}
</style>
</head>
<body>
<div>
Type something, then "Enter" <input type = "text" id = "textfield" />
</div>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type = "text/javascript">
//<![CDATA[
var Notify = {
displayFor:2000,
animationDuration:750,
show:function(text){
if($("#notify-wrapper").length == 0)
$('body').append('<div id = "notify-wrapper"></div>');
var notification = $("<div>",{
"class":"notification",
"text":text,
"click":function(){ Notify.hide($(this)); }
}).appendTo($("#notify-wrapper"));
setTimeout(function(){Notify.hide(notification);},this.displayFor);
},
hide:function(notification){
notification.slideUp(this.animationDuration,function(){ $(this).remove(); });
}
};
$(document).ready(function(){
$("#textfield")
.focus()
.keyup(function(e){
if(e.keyCode == 13)
{
Notify.show($(this).val());
$(this).val('');
}
});
});
//]]>
</script>
</body>
</html>
Code: Select all
var Notify = {
displayFor:2000,
animationDuration:750,
show:function(text){
if($("#notify-wrapper").length == 0)
$('body').append('<div id = "notify-wrapper"></div>');
var notification = $("<div>",{
"class":"notification",
"text":text,
"click":function(){ Notify.hide($(this)); }
}).appendTo($("#notify-wrapper"));
setTimeout(function(){Notify.hide(notification);},this.displayFor);
},
hide:function(notification){
notification.slideUp(this.animationDuration,function(){ $(this).remove(); });
}
}Code: Select all
#notify-wrapper{
position:fixed;
right:0;
top:0;
width:200px;
padding:5px;
}
#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;
}