Stackoverflow Like Notification Bar for jQuery - Howdy-do
File Size: | 13.3Kb |
---|---|
Views Total: | 2023 |
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.