Web Ticker

Maze Digital · 16 July 2016 · V3.0.0

Web Ticker v3.0.0

Web Ticker - what is it for?

Web Ticker is a jQuery plugin that allows you to have items scrolling indefinitely across the screen. It uses some fancy calculations to ensure smooth continuous transitions. The Web Ticker content, can be varied, including text, image lists or even custom styled items. The Web Ticker API can also be used to control the scrolling, and content programatically.

Install & Configure

Installation

All you should need to do is look at a few of our simple examples to get started. Continue reading for step by step instructions.

  1. Make sure that jQuery is available on your page, if you do not have jQuery you can include a Google hosted version by copying the code below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    
  2. Download the standalone jquery.webticker.min.js or install via npm

    npm install webticker
    

    and include it like this:

    <script src="./path/to/jquery.webticker.min.js"></script>
    
  3. Make sure you have a valid list(s) in HTML and that you can identify and select

    <ul id="webTicker">
        <li>This List Item will scroll infintely</li>
        <li>And this one will follow it</li>
        <li>Finally when it goes out of screen, it will queue again at the end</li>
    </ul>
    
  4. In your Javascript file, select with jQuery the list you want to convert to a ticker, and run the webTicker function.

    $('#webTicker').webTicker();
    

WebTicker is now activated on the list with id ‘webTicker’.

Settings

When initializing the web ticker you may pass parameters to modify the settings of the web ticker. This is completely optional and used to meet your specific needs.

Setting Description Default
speed The movement speed in pixels per second 50
moving Defines if the WebTicker should start in moving state or a paused state true
startEmpty Defines whether the elemtents should start outside of the visible area true
duplicate Indicates that items should be duplicated if necessary to remove any white space false
hoverpause Pauses the animation if the user hovers over the ticker true
rssurl The URL of the RSS Feed (pay attention to cross domain restrictions) false
rssfrequency The time (in minutes) it takes to refresh the RSS Feed. 0 means no update 0
updatetype Defines if the data update will reset the ticker including only new items or update items inline reset
transition The easing function used throughout for transitions linear
height The height of the ticker element. The string value needs to include the unit ‘30px’
maskleft The image to be used for overlay masking on the left side
maskright The image to be used for overlay masking on the right side
maskwidth Defines the width of the Mask (used for fade-in and fade-out) 0

Methods

Methods can be called using javaScript on the element of the web ticker. The below table illustrates the available methods.

Method Description Example
stop Stops the elements of the ticker in the current position Stop Example
cont Continues scrolling the elements from the current position. Continue Example
update The update functionality supports two modes ‘swap’ and ‘reset’ which are set accordingly when the ticker is started. The swap functionality uses data-update attributes to identify uniquie items in the list. When a node value is changed this is just ‘swapped’ leaving it in the same positions. Items not in the ‘update’ list are not removed whilst new ones would be added at the end. This behaviour can be altered by passing the last two parameters, insert & remove. A boolean value of true would indicate new items to be added/removed respectively. The default values for ‘insert’ is true whilst ‘remove’ is false. Update Example
transition Defines which of the transitions to use. The available transisions are ‘linear’, which scrolls at a normal and steady speed, and ‘ease’ which slows down as an item exits the edge of the ticker border. Transition Example

Styling

Styling the WebTicker is pretty much up to you as a developer, however the WebTicker does alter the dom slightly, and

Markup Explained

The final mark up would look something like the below:

<div class="tickercontainer">
    <div class="mask">
        <ul id="WebTicker">
            <li class="ticker-spacer"></li>
            <li>This List Item will scroll infintely</li>
            <li>And this one will follow it</li>
            <li class="last" >Finally when it goes out of screen, it will queue again at the end</li>
        </ul>
        <span class="tickeroverlay-left">&nbsp;</span>
        <span class="tickeroverlay-right">&nbsp;</span>
    </div>
</div>

Elements Explained:

Class Description
tickercontainer wraps the ticker, setting the height and width.
mask primarily used when masking/overlays are required, is another container wrapper
ticker-spacer Used when there is not sufficient space to fill the ticker with items (white space)
tickeroverlay-left a class which can be used to define an overlay on top of the webticker (used when defining a left overlay image)
tickeroverlay-right a class which can be used to define an overlay on top of the webticker (used when defining a right overlay image)
last used when adding new items, as a refernece to the last initialized item