Stackoverflow Like Notification Bar for jQuery - Howdy-do
| File Size: | 13.3Kb |
|---|---|
| Views Total: | 2030 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











