Howdy-do Notification Bar with jQuery

This is a simple jQuery notification bar inspired by the stackoverflow.com 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

Requirements

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

Latest Version

0.1.8 (2012.03.08):

• Added "pushscroll" action. Self-explanatory ;)

0.1.7 (2011.08.24):

• Changed show/hide function method
• Added verification to prevent mulitiple clicks by user
• softClose: allows click outside bar to close it

0.1.6 (2011.06.22):

• Renamed a few classes to avoid conflict with other plug-ins

0.1.5 (2011.03.21):

Changed code to allow extra functionality:

• 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)

Usage

$('#myDiv').hodwyDo();

Options

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
hideAfter	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.
keepState	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

Defaults

	$('#myDiv').howdyDo({
		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.

$('#mydiv').howdyDo({
	autoStart	: false,
 	keepState	: false,
});
 	

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

$('#mydiv').howdyDo({
	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.

$('#mydiv').howdyDo({
	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

Limitations

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

Howdy-do Notification Bar w/ jQuery by Leo Silva is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.