View on GitHub

Ticker

Add a text ticker to your webpage that scrolls information like on TV news services.

On this page

Overview

Things to know when using the ticker component:

Items to be displayed inside the ticker can be passed on initialization, but can also be updated using ticker.setItems(items) method.
The ticker will be shown/hidden automatically depending on the presence of the items.

Got all that? Great, let’s see how they work with some examples.

Example

Initialize with items

Use the below code to add a sample ticker to your page:

html

<div class="ticker" data-of-ticker='{
  "items": [
    {
      "content": "Warning! The OpenFrontend library is here!"
    },
    {
      "content": "You will love it from the first sight!",
      "cssClass": "bg-success",
      "icon": "<svg><path d=\"m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15\"/></svg>",
      "newWindow": true,
      "url": "https://openfrontend.tourismusweb.site/"
    }
  ]
}'></div>

Fetch items dynamically

You can fetch the items via Ajax request like shown below:

html

<div id="ticker" class="ticker" data-of-ticker></div>

<script>
  const element = document.getElementById('ticker')

  element.addEventListener('initialized.of.ticker', async () => {
    const items = await fetch('ticker.json').then(r => r.json())
    const ticker = await openFrontend.Ticker.then(component => component.getInstance(element))

    ticker.setItems(items)
  })
</script>

Usage

Markup

The required markup for a ticker is only a data attribute and CSS class on the HTML element:

<div class="ticker" data-of-ticker></div>

Options

You can pass extra options as JSON value of the data attribute. Here is the list of all available options (alphabetically):

Option	Type	Default	Explanation
`appendToBody`	`boolean`	`false`	The ticker element will be appended to the `<body>`.
`items`	`array`	`[]`	The items to be displayed. Use the `setItems()` method to dynamically set ticker items.
`pauseOnHover`	`boolean`	`true`	Pause the scroll on mouse hover.
`prependToBody`	`boolean`	`false`	The ticker element will be prepended to the `<body>`.
`speedDesktop`	`number`	`2`	The ticker speed (pixels to move on each iteration) on desktop.
`speedMobile`	`number`	`1`	The ticker speed (pixels to move on each iteration) on mobile devices.
`speedMobileQuery`	`string`	`'(max-width: 767px)'`	The CSS media query determining the ticker speed on mobile.

Methods

Method	Description
`setItems`	Set the array of items. See the item data structure below for details.

const ticker = await openFrontend.Ticker.then(component => component.getInstance('#example')) // Returns a Bootstrap ticker instance

// setItems example
ticker.setItems([])

Item data structure

The ticker accepts multiple items as data source. The only required property is the content of an item. You can pass extra item data as shown below:

const items = [
  {
    content: 'Elit laboris commodo elit dolore', // content of the item (required)
  },
  {
    content: 'Duis aute reprehenderit voluptate',
    cssClass: 'bg-success', // custom CSS class (optional)
    icon: '<svg><path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/></svg>', // custom icon (optional)
    newWindow: true, // open link in a new window (optional)
    url: 'https://domain.tld', // URL of the link (optional)
  }
]

Events

Event	Description
`initialized.of.ticker`	This event is fired immediately when the ticker is ready to be displayed.

const element = document.getElementById('ticker')

element.addEventListener('initialized.of.ticker', async () => {
  const ticker = await openFrontend.Ticker.then(component => component.getInstance(element))
  ticker.setItems([/* ... */])
})

CSS

src/scss/_ticker.scss

--#{$prefix}ticker-bg-color: #{$ticker-bg-color};
--#{$prefix}ticker-color: #{$ticker-color};
--#{$prefix}ticker-color-inherit: #{$ticker-color-hover};
--#{$prefix}ticker-font-size: #{$ticker-font-size};
--#{$prefix}ticker-height: #{$ticker-height};
--#{$prefix}ticker-icon-spacing: #{$ticker-icon-spacing};
--#{$prefix}ticker-item-padding: #{$ticker-item-padding};
--#{$prefix}ticker-item-justify-content: #{$ticker-item-justify-content};
--#{$prefix}ticker-text-decoration: #{$ticker-text-decoration};
--#{$prefix}ticker-text-decoration-hover: #{$ticker-text-decoration-hover};
--#{$prefix}ticker-z-index: #{$ticker-z-index};

Sass variables

src/scss/_variables.scss

$ticker-bg-color:                          var(--#{$prefix}danger);
$ticker-color:                             #fff;
$ticker-color-hover:                       inherit;
$ticker-font-size:                         1rem;
$ticker-height:                            3.5rem;
$ticker-icon-spacing:                      1rem;
$ticker-item-padding:                      3rem;
$ticker-item-justify-content:              center;
$ticker-text-decoration:                   none;
$ticker-text-decoration-hover:             underline;
$ticker-z-index:                           10;