Today, Matt posted a cool progressbar widget using jQuery.UI. He gave a good introduction and explanation about how to build a widget using jQuery.UI.
Here, I'm following his sample to build my own one, which is Messenger\Outlook like message notification [view demo]. So for reference and how to build one please return to jQuery.UI ProgressBar Widget by Matt Berseth.
Messenger like message notification widget is something I wished to do long time ago, and was lazy to think and code it, because I thought it would take to much coding. And I read Bilal's article How to Show Messenger-Like Popups Using AJAX but it wasn't a reusable component. So I just used his styles for demonstration.
After going through Matt's post, I decided to build it up right away. So Let's dive into the code. Below is the init method for the widget, I just initialize some local variables with to store current bottom position and height of the popup message element.
init: function() {
$.ui.notificationmsg._bottompost=this.element.css("bottom");
$.ui.notificationmsg._height=this.element.css("height");
}Next I decided to build only 2 methods show & hide. show method checks if the popup element is hidden, if so it initializes the desired animation defined in the options and shows the message.
show: function(){
var o = this.options;
if(this.element.is(":hidden")){
this.element.queue(function(){$.ui.notificationmsg.animations[o.animation](this, o);}).dequeue();
}
}hide method does the reverse, it checks if the popup element is visible, if so it initializes the desired animation defined in the options and hides the message. But it also stops all animations; this action I made because the popup element can disappear automatically based on period option which I'm going to discuss later.
hide: function(){
this.element.stop(true);
var o = this.options;
if(this.element.is(":visible")){
this.element.queue(function(){$.ui.notificationmsg.animations[o.animation](this, o);}).dequeue();
}
}I'm going to laugh, this is just copy and past of Matt's post. Anyway, it works. So next is all about animation, as Matt did, I also wished to proved out of the box animations, basically 3 types, Slide, Fade and Slidethru. Also the widget support automatic hide of the popup element using period option. But this required a trick which I learned from Effect Delay Trick post by Karl on http://www.learningjquery.com/.
I'm going to take piece by piece, first the options which are declared and initialized with default values. They are 3 options, speed for animation speed, period which is the amount of time for the popup message to be visible and finally animation which define the animation algorithm to be used and it can be slide, fade or slidethru. Of course you can extend that and provide your own animations. And this is the beauty about the whole subject.
$.extend($.ui.notificationmsg, {
defaults: {
// provide a speed for the animation
speed: 1000,
// provide a period for the popup to keep showing
period: 2000,
// default the animation algorithm to the basic slide
animation:'slide'
},
.....Now time to explore animation methods, Nothing fancy, just if/else and copy/paste from Matt's post with few tweaks.
animations: {
slide: function(e, options) {
if($(e).is(":hidden")){
// animate
$anim = $(e).animate({height: "show"}, options.speed)
if(options.period && options.period > 0){
$anim.animate({opacity: 1.0}, options.period)
.animate({height: "hide"}, options.speed);
}
}
else{
$(e).animate({height: "hide"}, options.speed)
}
$(e).css("height",$.ui.notificationmsg._height);
},
fade: function(e, options) {
if($(e).is(":hidden")){
// animate
$anim = $(e).animate({opacity: "show"}, options.speed);
if(options.period && options.period > 0){
$anim.animate({opacity: 1.0}, options.period)
.animate({opacity: "hide"}, options.speed);
}
}
else{
$(e).animate({opacity: "hide"}, options.speed);
}
$(e).css("opacity",1.0);
},
slidethru: function(e, options) {
// set the position and left
var b = $.ui.notificationmsg._bottompost;
var h = $.ui.notificationmsg._height;
if($(e).is(":hidden")){
// animate
$anim = $(e).animate({height: "show"}, options.speed);
if(options.period && options.period > 0){
$anim.animate({opacity: 1.0}, options.period)
.animate({height: "hide", bottom: h}, options.speed)
.animate({bottom: b}, 1);
}
}
else{
$(e).css({height:h,bottom:b});
$(e).animate({height: "hide", bottom: h}, options.speed)
.animate({bottom: b}, 1);
}
}That was it all about. You can download the demo or view it here to see how it works. Below is the full code of this widget.
/*
* jQuery UI Notification Message
*
* Depends:
* ui.core.js
*/
(function($) {
$.widget("ui.notificationmsg", {
init: function() {
$.ui.notificationmsg._bottompost=this.element.css("bottom");
$.ui.notificationmsg._height=this.element.css("height");
},
show: function(){
var o = this.options;
if(this.element.is(":hidden")){
this.element.queue(function(){$.ui.notificationmsg.animations[o.animation](this, o);}).dequeue();
}
},
hide: function(){
this.element.stop(true);
var o = this.options;
if(this.element.is(":visible")){
this.element.queue(function(){$.ui.notificationmsg.animations[o.animation](this, o);}).dequeue();
}
}
});
$.ui.notificationmsg._bottompost = "0px";
$.ui.notificationmsg._height;
$.extend($.ui.notificationmsg, {
defaults: {
// provide a speed for the animation
speed: 1000,
// provide a period for the popup to keep showing
period: 2000,
// default the animation algorithm to the basic slide
animation:'slide'
},
animations: {
slide: function(e, options) {
if($(e).is(":hidden")){
// animate
$anim = $(e).animate({height: "show"}, options.speed)
if(options.period && options.period > 0){
$anim.animate({opacity: 1.0}, options.period)
.animate({height: "hide"}, options.speed);
}
}
else{
$(e).animate({height: "hide"}, options.speed)
}
$(e).css("height",$.ui.notificationmsg._height);
},
fade: function(e, options) {
if($(e).is(":hidden")){
// animate
$anim = $(e).animate({opacity: "show"}, options.speed);
if(options.period && options.period > 0){
$anim.animate({opacity: 1.0}, options.period)
.animate({opacity: "hide"}, options.speed);
}
}
else{
$(e).animate({opacity: "hide"}, options.speed);
}
$(e).css("opacity",1.0);
},
slidethru: function(e, options) {
// set the position and left
var b = $.ui.notificationmsg._bottompost;
var h = $.ui.notificationmsg._height;
if($(e).is(":hidden")){
// animate
$anim = $(e).animate({height: "show"}, options.speed);
if(options.period && options.period > 0){
$anim.animate({opacity: 1.0}, options.period)
.animate({height: "hide", bottom: h}, options.speed)
.animate({bottom: b}, 1);
}
}
else{
$(e).css({height:h,bottom:b});
$(e).animate({height: "hide", bottom: h}, options.speed)
.animate({bottom: b}, 1);
}
}
}
});
})(jQuery);Few things might be added, such as pause method. This can be used to pause the animation so the automatic hide don't work while you hover over the the popup element. Or it can be an option to apply pause on hover or not.
