jQuery plugin Announcement

Adds a fixed widget at the bottom of your browser screen to display announcements.

Demo

http://baivong.github.io/announcement/

Installation

Get the latest release of this plugin on Release page or use the command line:

Bower

$ bower install jquery.announcement

npm

$ npm install jquery.announcement

Usage

Announcement depends on jQuery. Include Announcement script and stylesheet in your document:

<!-- Add jQuery 1.7+ library -->
<script src="jquery.js" type="text/javascript"></script>

<!-- Add jQuery plugin Announcement -->
<link href="jquery.announcement.css" rel="stylesheet" type="text/css">
<script src="jquery.announcement.js" type="text/javascript"></script>

Create list elements will contain the content you wish to display within the Announcement.

<ul class="newsticker">
    <li>News content 1</li>
    <li>News content 2</li>
    <li>News content n</li>
</ul>

... then in your code do:

$(function() {
    $('.newsticker').announcement();
});

Configuration

| Name | Type | Default | Description | |------------|:--------------:|:--------------:|------------------------------------------------------------------| | title | String | 'Announcement' | Display after the announcement widget is minimized. | | showToggle | Boolean | true | Display maximize/minimize button. | | showClose | Boolean | false | Display close button. | | autoHide | String, Number | 'auto' | Timer minimizes. Can be numeric or 'auto'. Set 0 to disable. | | autoClose | String, Number | 0 | Timer close. Can be numeric or 'auto'. Set 0 to disable. | | position | String | 'bottom-right' | bottom-left or bottom-right | | width | String, Number | 300 | Width of announcement. Can be numeric or 'auto'. | | height | String, Number | 'auto' | Height of announcement. Can be numeric or 'auto'. | | zIndex | Number | 99999 | Set CSS z-index property of the announcement widget. | | speed | Number | 10 | Slideshow speed in seconds. Set 0 to disable. | | effect | String | 'fading' | fading, zoom-in, zoom-out, rotate-left, rotate-right, move-top, move-right, move-bottom, move-left, skew-top, skew-right, skew-bottom, skew-left, random, shuffle |

Publish method

Get plugin instance

var instance = $('.newsticker').data('plugin_announcement');

.active(index)

Show announcement according to index

instance.active(0);

.start()

Start slideshow

instance.start();

.stop()

Stop slideshow

instance.stop();

.toggle()

Minimize/maximize Announcement widget

instance.toggle();

.close()

Remove Announcement widget

instance.close();

.autoResize()

Update size of the widget when window size changes

instance.autoResize();

.getCookie(name)

Get cookie has name is jquery.announcement

instance.getCookie('jquery.announcement');

.setCookie(name, value, exdays, path)

Set cookie to hide Announcement widget

instance.setCookie('jquery.announcement', 'hidden', 1);

Remove cookie

instance.setCookie('jquery.announcement', '', -1);

.detectCSSFeature(name)

Detecting browser supports CSS feature

instance.detectCSSFeature('transform');

Thanks to

jQuery boilerplate team and a bunch of awesome contributors.

License

MIT License © Zzbaivong