Ticker Board

This is the landing page for the ticker board plugin.

A JS plugin for ticker boards

See the project on GitHub. Find the package on npmjs.com.

Included features

The features include:

It's accessible for screen-readers, using a left-of-view element to mimic the text in each row. The rows themselves are aria-hidden="true". User selecting of the rows is disabled, however the screen-reader only text can be selected.

Importing the Ticker Board plugin

You can use this by either of the following methods

Using the Ticker Board plugin

After importing the JS, the simplest way to get set up is with…

new TickerBoard('.my-ticker-board')

This would replace each of the children of any .my-ticker-board matching element with a board which automatically rotates through the inner text of that board. This is exactly how the board showing features works!

You can override settings like size and colour scheme by providing options.

new TickerBoard('.my-ticker-board',
    theme: 'dark',
    size: 24,

Other Examples

For more complicated examples, the generic Board class allows you to manually updateMessages with the updateMessages method.

const board = new Board(element)
board.updateMessages(['Apple', 'Banana', 'Cherry'])

This would just update the board with some fruit names, and then not update again.

Another example usage of updateMessages uses SNCF Live Data to update the board with train times.

You can also seee how it's possible to create a simple rotating board that moves through multiple messages in one or two rows.

React Ticker Board

Using react? There's an react-ticker-board package. Install it with yarn,

yarn add react-ticker-board

or if you're using npm,

npm install react-ticker-board

Take a look at the react ticker board demo to get started.