jQuery plugin Announcement

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

Demo

https://lelinhtinh.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