I am examining a js file form Bram Jetten:
Notification.fn = Notification.prototype;
function Notification(value, type, tag) {
this.log(value, type);
this.element = $('<li><span class="image '+ type +'"></span>' + value + '</li>');
if(typeof tag !== "undefined") {
$(this.element).append('<span class="tag">' + tag + '</span>');
}
$("#notifications").append(this.element);
this.show();
}
/**
* Show notification
*/
Notification.fn.show = function() {
$(this.element).slideDown(200);
$(this.element).click(this.hide);
}
/**
* Hide notification
*/
Notification.fn.hide = function() {
$(this).animate({opacity: .01}, 200, function() {
$(this).slideUp(200, function() {
$(this).remove();
});
});
}
...
I assigned a click event one of my buttons and when I click that button it calls a new notification:
new Notification('Hi', 'success');
When I click that notification it closes as well. However if I dont click it after a certain time I want it close by itself. How can I call that hide function or close it after some time later when it appeared?
var that = this;
setTimeout(function() { //calls click event after a certain time
that.element.click();
}, 10000);
that worked for me.
Set a timeout and force the hide.
/**
* Show notification
*/
Notification.fn.show = function() {
var self = this;
$(self.element).slideDown(200)
.click(self.hide);
setTimeout(function() {
self.hide();
// 3000 for 3 seconds
}, 3000)
}
Change lines to
Notification.fn.show = function() {
var self=this;
$(this.element).slideDown(200);
$(this.element).click(this.hide);
setTimeout(function(){
self.hide();
},2000);
}
but you will need an additional internal boolean, so that you cant hide (and therfor destroy) the notification twice.
Notification.fn.hide = function() {
if (!this.isHidden){
var self=this;
$(this).animate({opacity: .01}, 200, function() {
$(this).slideUp(200, function() {
$(this).remove();
self.isHidden=true;
});
});
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With