Notify bar
Wednesday, May 27, 2009
‘Notify Bar’ plugin
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:
$(function () {
$.notifyBar({
html: "Thank you, your settings were updated!",
delay: 2000,
animationSpeed: "normal"
});
});
and to your html page stylesheet:
<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen" />
$.notifyBar can pass next parameters:
| Parameter | Description | Type | Default |
|---|---|---|---|
| html | What text will be inside bar, can be HTML | 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 [optional] | “normal” |
| jqObject | Own jquery object for notify bar | jQuery object [optional] | null |
| cls | You can set own CSS class for ‘Notify bar’. There is too premade clasess “error” and “success” | String |
Your demo isn’t working for me on IE8 or Chrome (I haven’t tried other browsers yet).
Your plugin looks nice. If you fix your demo, then I will tweet about it.
Shoot me an email if you get it fixed. Thanks!
http://twitter.com/elijahmanor
Comment by Elijah Manor — Wednesday, May 27, 2009 @ 15:00
Thank you that you notified this, the link to JS file was broken
Comment by Dmitri — Thursday, May 28, 2009 @ 13:56
The notification always appears at the top of the PAGE and as such, if the page is scrolled towards the bottom of its contents and the notification bar is activated, one will never see it!!
How about making it always appear at the top of the browser instead?
Comment by Soup — Thursday, May 28, 2009 @ 18:00
Soup, this is a good idea, thank you that you noticed it. I will put this into my TODO list.
Comment by Dmitri — Friday, May 29, 2009 @ 08:43
Nice tool!
I’d suggest to place the CSS for the bar in an external file—makes it much easier to customize.
And on a more general level—passing all CSS attributes in JSON format at once onto the css() method will most likely bring you performance improvements in the long run.
e.g.:
.css({
‘margin-top’ : ‘10px’,
‘border-color’: ‘#900′
)}
Take care,
trice
Comment by trice22 — Thursday, July 2, 2009 @ 08:48
I have no time.
—————————————
signature: nizoral 200mg e8gg9e9898gkejijijilmeoroio
Comment by balePheve — Wednesday, August 5, 2009 @ 15:25
[...] shows a notify bar (like on Twitter’s webpage) Plugin Page [...]
Pingback by CoryMathews.com » 12 Slick jQuery Plugins — Monday, August 17, 2009 @ 14:41
Nice widget, Dmitri. I made a little change to have the notifyBar remove itself from the dom upon completion as multiple calls were adding multiple divs.
http://pastie.textmate.org/594518
Comment by John Lannon — Tuesday, August 25, 2009 @ 21:42
Is it possible to make the notification bar sticky? Perhaps with a close button ? Appreciate clues.
Comment by manoj — Thursday, October 15, 2009 @ 11:58
Is it all right to comment setTimeout – that makes the notification sticky. How about inserting a close button?
Comment by manoj — Thursday, October 15, 2009 @ 12:01
manoj, you can place close button using CSS and HTML and add command. In jQuery application:
$(“#close”).click(function() {
$(“#notifyBar”).slideUp(“fast”);
});
Or someting like that. When I will have time I will think about close button. Now I haven’t
Comment by Dmitri — Thursday, October 15, 2009 @ 13:12
Does anyone know how to tie this in with a submit in an ASP.NET MVC Preview 2 application and load the different .css based on the POST action result?
Comment by Ray Linder — Monday, October 19, 2009 @ 06:43
Nice work. If tou want the bar to stay ontop of browser add this line in the plugin code where the other css properties are:
.css(‘top’,$(window).scrollTop()+’px’)
and then, just before the slideDown call enter this line:
$(window).scroll(function(){bar.css(‘top’,$(window).scrollTop()+’px’);});
Comment by RobertM — Friday, October 30, 2009 @ 13:29
Hey Dmitri. Great plugin. I did notice, however, that in using ‘this’ for your settings, you clobber some of jQuery’s internal variables. i.e. jQuery uses the object this.className when running $(selector).addClass. Since notify bar alters this to its own string, addClass/removeClass began throwing exceptions.
I changed all instances of ‘this’ to ‘notifyBarNS’ and the problem went away.
Thanks,
Josh
Comment by Joshua Nankin — Sunday, January 3, 2010 @ 23:00
Also, it looks like your word press comments are throwing php exceptions.
Comment by Joshua Nankin — Sunday, January 3, 2010 @ 23:01
Your settings WERE updated. Proper English will give your example more credibility.
Comment by Jerry — Friday, January 8, 2010 @ 21:33