Howdy-do Notification Bar with jQuery

This is a simple jQuery notification bar inspired by the notification bar and the Hello Bar.

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


Tested with jQuery 1.4.2 and jQuery UI 1.8.6 (effects and easing)

Latest Version

0.1.8 (2012.03.08):

0.1.7 (2011.08.24):

0.1.6 (2011.06.22):

0.1.5 (2011.03.21):

Changed code to allow extra functionality:

0.1.4 (2011.03.18):

Fixed error that prevented functionality in Safari and IE7 (thanks to NioX for the heads up)




action hover - display bar over content
scroll - hovers over content and scrolls down with page
push - pushes content down - Attention - works best with: body {margin: 0}
pushscroll - pushes content down and scroll up/down with page
effect slide | blind | drop | fade - easing on fade disabled
easing "easeOutBounce" - jQuery UI easing.
duration 500 - Effect duration in milliseconds.
delay 500 - Shows the Howdy-do bar xxxx milliseconds after page load. Ignored if autoStart: false

0 (disabled) - Hides the Howdy-do bar after xxxx milliseconds.
Requires autoStart: true (default) and initState: "closed" (default)

It works the first time only if keepState: true or until the cookie is deleted or expires

initState "closed" | "open" - The initial state of the Howdy-do Bar.

true | false - sets a site wide cookie and records the Howdy-do Bar's last state. Set it to false to ignore the cookie and the bar's previous state.

This option overrides all the other options (initState, hideAfter, autoStart) until the cookie is deleted or expires (24hrs).

autoStart true | false - Shows the Howdy-do bar on page load. Ignored if initState: "open"
softClose false | true - Closes the Howdy-do bar when a click is detected outside of it. (on $(document) )
barClass The class of your choice. Default: "howdydo-style", which can be edited to your liking.
openAnchor Text or image. Default: "open". Use <img src="path/image.ext" /> for images
closeAnchor Text or image. Default: "close". Use <img src="path/image.ext" /> for images
callback callback function


		action		: 'hover',		// bar behavior: hover | push | scroll | pushscroll
		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
		softClose	: false,		// closes the bar on a document click (outside the bar)
		barClass	: 'howdydo-style',	// your own customized Howdy-do bar style
		openAnchor	: 'show',		// html element or text
		closeAnchor	: 'hide',		// html element or text
		callback	: function(){}		// callback function

Keeping it simple

By default, the Howdy-do Bar will start out collapsed/closed, and will animate once the page loads. If you close it, it will remain closed on the subsequent pages of the same website. It should "remember" its last open/closed state by using a very simple cookie.

More samples

I would like to keep the bar closed on all pages until the user opens it manually.

	autoStart	: false,
 	keepState	: false,

I would like to show the bar already open (no animation) on every page.

	intState	: 'open',
	keepState	: false

I would like to show the bar 5 seconds after the page has loaded and go away by iteself after another 10 seconds, but on the first page only and not the subsequent pages.

	delay		: 5000;
	hideAfter	: 10000;

Testing and deleting cookies

This script relies on a cookie to keep its previous state. In order to test and retest it, you may need to delete the cookie a few times.
I recommend using Firebug in conjunction with Firecookie to easily change or delete the cookie.

Cookie name: HowdydoBarState
Accepted values: open / closed


I've tested it with FF 3.6, Opera 11, IE 7+, Chrome 8, Safari 5.0.3 and it seems to work without any problems.

I could not get it to work with Safari (windows)
If you have a fix for it or can point me in the right direction I'll be glad to implement it.

last update: 2012.03.08

Creative Commons License
Howdy-do Notification Bar w/ jQuery by Leo Silva is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Hello! I am the Howdy-do Bar. Press Esc or click on the X to the right to dismiss me!


Howdy-do Bar v. 0.1.8 (2012.03.08)