We are always happy to provide help and support, so if you have any questions drop us an email.
Cream Soda's jQuery Ticker is a simple plug and play jQuery plugin, designed to provide you with bags of functionality, out of the box. Simply follow the steps below to achieve a simple implmentation of the jQuery Ticker.
Click here to check out some awesome demos of Cream Soda's jQuery Ticker.
This document serves as a guide for implementing and customising Cream Soda's News Ticker, if you have any questions please email us.
If you are populating your News Ticker with news items from a RSS feed see 1.2 Dynamic News Ticker HTML, otherwise see 1.1 Static News Ticker HTML.
This News Ticker requires a simple HTML structure to be put in place, where each news item is represented by a list item <li> within an unordered list <ul>.
<head>
<link rel="stylesheet" href="stylesheets/creamsoda_ticker.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="js/creamsoda_ticker.js"></script>
</head>
<body>
<div class="demo">
<ul>
<li data-link="URL" data-img="Image URL" data-title="Text Title" data-meta="Text Info" data-featured="true/false">News Item Content</li>
<li data-link="URL" data-img="Image URL" data-title="Text Title" data-meta="Text Info" data-featured="true/false">News Item Content</li>
</ul>
</div>
<script>
$('.containerName').csTicker();
</script>
</body>
Use predefined data attributes, as shown below, within each list item to push information into the news ticker. Data attributes are used to populate the ticker with a title, image and other information.
| Attributes | Required? | Explanation |
|---|---|---|
| data-featured | No | Should contain a true or false value, denoting if the item should have the 'featured' item style treatment applied. |
| data-title | Yes | Should contain the title of the news item |
| data-link | No | Should contain the link to the main article. Ensure the link begins "http...." |
| data-img | No | Should contain an file path reference to the image for a news item, relative to the location of the markup |
| data-meta | No | Should contain any meta information such as author, publish date, etc... |
jQuery Ticker can also display dynamic content from XML RSS feeds.
To acomplish this you need only to create the outter div container for your News Ticker, as shown below.
<div class="demo"></div>
jQuery is a commonly used Javascript library that allows for simpler manipulation of the DOM. This library is required in order to use Cream Soda's News Ticker and is available from here.
You must load the jQuery library before loading Cream Soda's News Ticker. See below.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="js/creamsoda_ticker.js"></script>
</head>
The News ticker Plugin provides all of the News Tickers animation and functionality. Once the plugin file is loaded the following code can be executed to achieve a default News Ticker.
$('.containerName').csTicker();
Your News Ticker can then be customised using the following customisation options, which are further detailed in section 2.3.
$('.containerName').csTicker({
tickerMode: 'vertical',
customCSS: false,
pauseOnHover: true,
delay: 5000,
speed: 300,
autoAnimate: true,
buttons: true,
highlightFeatured: true,
tickerTitle: false,
contentFeed: false,
feedCount: 10,
truncateAt: 200,
linkTarget: '_blank',
addEllipsis: true
backgroundColour: '#ffffff',
titleColour: '#000000',
titleTextColour: 'transparent',
)};
All customisation options are optional and will overright the default behaviour of the ticker. Some options are specific to a particular tickerMode. See below for more details
| Option | Values | Description |
|---|---|---|
| tickerMode | 'Vertical' (default), 'Horizontal', 'Mini' | This option dictates the style of ticker that will be rendered. There are three types of ticker, Vertical, Horizontal or Mini. You can see examples of each here. |
| customCSS | string (defaults to false) | This option allows you to provide an additional CSS file to overright the base styles of the jQuery ticker. This stylesheet is injected directly into the head of the markup. Really useful if you do not have direct access to the markup. |
| pauseOnHover | true (default), false | Prevents ticker animating to the next slide when mouse pointer enters the ticker. |
| delay | in milliseconds (e.g. 500 = 500ms) | Delay is invoked only when autoAnimate is enabled, defining the delay between each tick animation. |
| speed | in milliseconds (e.g. 500 = 500ms | Like delay, speed is also invoked only when autoAnimate is enabled, defining the speed of each tick animation. |
| autoAnimate | true (default), false | This option is defaulted to true, and allows the ticker to scroll automatically. Frequency and speed of scrolling are defined by delay and speed options, respectively. |
| buttons | true (default), false | When enabled, buttons will be injected into the markup to provide the user with the ability to scroll through the ticker. They can be used in conjunction with autoAnimate and easily styled. |
| highlightFeatured | true (default), false | When enabled, will search each list item for the featured attribute and apply a featured class, which can be styled appropriately. This cannot be used in conjunction with contentFeed as content is dynamically generated. |
| tickerTitle | Any String (defaults to false) | This option accepts any string, when a string is present a title is prepended to the jQuery Ticker. |
| contentFeed | Any XML feed (defaults to false) | If a feed URL is present, the jQuery Ticker will disregard any content currently present in the existing container and populate with content from the feed. |
| feedCount | false (default - returns all), int | feedCount determines the number of feed items to return when populating the jQuery Ticker using the contentFeed option. false will return all items |
| truncateAt | int (defaults at 200) | If not set to false, truncateAt will truncate list item content to a desired number of characters, rounding down to each word. An ellipsis can be appended to each item using the addEllipsis |
| linkTarget | '_blank', '_parent' etc | Injects a target into each item link. Leave blank for no target. |
| addEllipsis | true (default), false | Append '...' to each item's content. |
| backgroundColour | 'transparent', any HEX value (e.g. #ffffff) | Overrides the background colour of the News Ticker |
| titleColour | 'transparent', any HEX value (e.g. #ffffff) | Ovverides the background colour of the News Ticker Title |
| titleTextColour | 'transparent', any HEX value (e.g. #ffffff) | Ovverides the text colour of the News Ticker Title |
Cream Soda's News Ticker provides a basic, responsive CSS stylesheet to get you up and running instantly. To load the stylesheet, ensure the following code is present.
<head>
<link rel="stylesheet" href="stylesheets/creamsoda_ticker.css"/>
</head>
For all you CSS gurus, it's easy to customise the look and feel of News Ticker by including your own CSS file after the creamsoda_ticker.css.
You can also change the colours used within News Ticker's default style by using the 'titleColour' and 'backgroundColour' javascript customisation options. See here for more info.