Ticker Board

Included features

The features include:

• Vanilla JS
• Styling included
• Auto rotating board
• Manual update methods
• Node package

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

• node package manager

  If you're using node package manager for your project, you can use the node module ticker-board

  npm install --save ticker-board

• minified package

  using the minified version, either downloading it locally or using it directly

  <script src="{{baseUrl}}/ticker-board/dist/ticker-board.js"></script>

• Git repo

  Clone this repository, take a look at the module files, or use the ready-made distribution files.

  git clone https://github.com/rjkerrison/ticker-board.git
  cd ticker-board

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.

document.getElementById('my-board')
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.