This is a simple jQuery notification bar inspired by the stackoverflow.com notification bar and the Hello Bar (www.hellobar.com/ paid service). The notification bar can be set to pop open or remain closed on page load. Delay and auto-hide options are available, as well as keeping the bar open/closed state across the domain. I’ve included positioning options, hover as default. It can scroll down with the page or push the content down – body { margin: 0 } recommended.
Simple
$(‘#myDiv’).hodwyDo(); Advanced
$(‘#mydiv’).howdyDo({ action : ‘hover’, // bar behavior: hover | push | scroll effect : ‘slide’, // howdy-do bar effect: blind | drop | fade | slide easing : ‘easeOutBounce’, // jQuery UI easing duration : 500, // effect duration/speed in milliseconds delay : 500, // delay before autoStart in milliseconds hideAfter : 0, // autoHide delay in milliseconds: 0 (disabled) initState : ‘closed’, // initial bar state: ‘closed’ | ‘open’ keepState : true, // sets cookie to remember previous bar state. autoStart : true, // shows bar on page load barClass : ‘howdydo-style’, // your own customized Howdy-do bar style barStyle : ‘hellobar, // bar style ie stackoverflow | hellobar openAnchor : ’show’, // html element or text closeAnchor : ‘hide’, // html element or text callback : function(){} // callback function });
Tested with jQuery 1.4.2 and jQuery UI 1.8.6 (effects and easing)
-
Add more CSS styles
-
Support for multiple messages on same page
-
Fix conflict w/facebook
0.1.6 (2011.05.8):
Changed code to allow extra functionality:
-
added stackoverflow style functionality as well
-
initState: allows open bar on page load
-
keepState: remembers the bar’s last position (open/closed)
-
0.1.4 (2011.03.18) – Fixed error that prevented functionality in Safari and IE7 (thanks to NioX for the heads up)
Forked from leo.dolcepixels.com/learning/jquery/notification-bar-with-jquery/