dknight / jquery-notify-bar

Twitter like notify bar

Please do not use jQuery in 2023

Repo is archived for history.

Try a modern implementations based on Web Components.

---

jQuery Notify bar

Please visit the project page for feedback and other details.

Simple plugin (basically it's not a plugin, but widget) to show notify bar (like on Twitter's webpage). It's very simple to use:

Installation

> bower install jqnotifybar

Usage

jQuery(function () {
  jQuery.notifyBar({
    html: "Thank you, your settings were updated!",
    delay: 2000,
    animationSpeed: "normal"
  })
});

Usage position at bottom

jQuery(function () {
  jQuery.notifyBar({
    html: "Hi from below!",
    cssClass: "Appear at bottom",
    position: "bottom"
  });
});

Options

Option	Description	Type	Default
html	What text will be inside bar. Can be HTML or just text.	String [optional]	"Your message here"
delay	How long bar will be delayed, doesn't count animation time.	Integer [optional]	2000
animationSpeed	How long this bar will be slided up and down.	String | Integer	"normal"
jqObject	Custom jQuery object for notify bar.	jQuery object [optional]	null
cssClass	You can define own CSS class for Notify bar. There are too premade classes "error", "warning" and "success".	String	""
close	If set to true close button will be displayed.	Boolean	false
closeText	Sets the text to close button.	String	"Close [X]"
closeOnClick	If enabled, user can hide notify bar just by click on it.	Boolean	true
closeOnOver	If enabled, user can hide notify bar just by moving mouse cursor on it (suitable for really lazy people).	Boolean	false
waitingForClose	If enabled, notify bar don't close until user presses the close button.	Boolean	true
onBeforeShow	Callback on before show.	function	null
onShow	Callback on show.	function	null
onBeforeHide	Callback on before hide.	function	null
onHide	Callback on hide.	function	null
position	Set the position of notify bar. Possible values are top, bottom.	string	"top"

Please visit the project page for feedback and other details.

jquery-notify-bar's Issues

Cookie option

Could there be a cookie option in the future? That way the notification bar won't show on all pages over and over again. And thank you for making this!

notifyBars should clean up after themselves

when a new notification bar is created, it would be nice to have the old bar remove itself from the dom. on an app with loads of notifications, these can build up pretty fast

Possible to show and hide bar on demand?

Is it possible to show and hide the bar on demand?

Something like:

var bar = $.notifyBar({
  html: 'Hello'
});
bar.show(); // show bar
bar.hide(); // hide bar

Auto close even if "close" is defined

Hello,

First of all, thank you for sharing this amazing plugin.
I think I found a (minor bug?): when the close option is defined, the notification does not disappear as expected. If it is a normal behavior, I suggest you to add another option in order to hide a notification automaticaly even if the close button is present.
What do you think?

Code example

$.notifyBar({html: 'Message', delay: 2000, cssClass: 'notification success', close: 'X'})

My workaround:

var notif = $.notifyBar({html: msg, delay: 2000, cssClass: 'fa-notification success', close: 'X'})
window.setTimeout(() => {
    // When hide is called, there is no animation!
    notif.hide()
}, 2000)

changing bar position and slide

Hi,
I've tried to change css and js to make the bar appera at the bottom of the page, sliding up when open and sliding down when closed :

1. I've used for open :
   bar.slideDown(asTime);

and for close:

if( bar.attr("id") == "__notifyBar") {
  setTimeout("jQuery('#" + id + "').slideUp(" + asTime +", function() {jQuery('#" + id + "').remove()});", notifyBarNS.delay + asTime);
} else {
  setTimeout("jQuery('#" + id + "').slideUp(" + asTime +", function() {jQuery('#" + id + "')});", notifyBarNS.delay + asTime);
}

I've see the bar only when it gets closed.

How to move bar at the bottom, changing top in position: absolute does not anchor the bar at the bottom of the page.

Can you help me?

Thank you very much!
Bye
Giacomo

Is this code correct??

Closure library warns about the following piece of code..

if( bar != 'object'); {
  jQuery("body").prepend(bar);
}

It is from Lie 72-74.. Can you please check it once..