Stackoverflow Like Notification Bar for jQuery - Howdy-do

File Size: 13.3Kb
Views Total: 2019
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stackoverflow Like Notification Bar for jQuery - Howdy-do

Howdy-do is a jQuery plugin that helps you create a Stackoverflow-Like Notification Bar on the top of your page. It  can be set to pop open or remain closed on page load.

Features:

  • Easily create your own botification bar
  • Delay and Auto Hide supported
  • Press 'ESC' or click the 'x' button to hide the bar

How to use it:

1. Include jQuery Library, jQuery UI and Howdy-do.js on your page

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.howdydo-bar.js" type="text/javascript"></script>

2. Include Howdy-do CSS

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.howdydo-bar.js" type="text/javascript"></script>

3. Call the plugin

<script type="text/javascript">
$(document).ready( function(){
$( '#howdy' ).howdyDo({
action: 'push',
easing: 'easeInOutExpo',
duration: 500,
openAnchor: '<img src="images/down-arr-16x16.png" border=0 />',
closeAnchor: '<img src="images/close-16x16.png" border=0 />'
});
});
</script>

4. More Options

$('#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
	});

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.