Examples
Television News Ticker allows you to provide real time news to your users from different sources: from a database table, from manually generated JSON data, from an RSS feed or from a Twitter account.
From your database or from JSON data
Retrieve the news from a custom database table with PHP by using the included script or manually generate the JSON data.
World News
Sliding News with Stock Market Data
Premier League Results
From an external source (RSS feed or Twitter)
Retrieve the news from an RSS feed or from a Twitter account. In this demo the news are updated each time the page is loaded but you can even update the news at every news cycle if you want, you can control the behavior of the news ticker with the customization options.
BBC News (updated from the BBC News – World RSS feed )
CNN Arabic with RTL layout (updated from the CNN Arabic – World RSS feed)
Customization Options
This product has a total of 61 customization options. To use a customization option set its value during the initialization process of the news ticker.
This example demonstrates how to define a custom number of displayed news with the numberOfNews option.
<script>
newsTicker.initialize({
newsDataJson: 'data.json',
numberOfNews: 20,
});
</script>
Use this table to understand how each option should be used:
| Name | Type | Default | Description |
| newsDataJson | String | ‘source/static.json’ | The URL to the news data in JSON format. |
| cachedCycles | Number | 0 | The number of cycles that should be performed without retrieving the news. |
| tickerClosedInitial | Boolean | False | This option determines the initial status of the news ticker (Open or Closed). Please note that the cookie used to store the status has priority over this option. |
| layout | String | ‘ltr’ | The layout of the news ticker. ‘ltr’ defines a left to right layout and ‘rtl’ defines a right to left layout. |
| moveInterval | Number | 10 | This value determines the interval in milliseconds used to move the sliding news. A low value increases the speed, a high value reduces the speed. |
| token | Number | 0 | Set this token if you plan to verify server-side the AJAX request with your custom mechanism before returning the news ticker data. The server-side generation of the token should be manually implemented based on your needs. |
| hideFeaturedNews | Boolean | False | This option determines if the featured news are displayed or not. |
| numberOfNews | Number | 10 | This option determines the number of news displayed in the news ticker. |
| rssUrl | String | ” | This option should be used to set the URL of the RSS feed. |
| twitterUsername | String | ” | The Twitter username for which you want to retrieve the news. |
| twitterStripLinks | Boolean | False | This option determines if the links should be removed from the imported tweets. |
| twitterStripHashtags | Boolean | False | This option determines if the hashtags should be removed form the imported tweets. |
| twitterStripUsernames | Boolean | False | This option determines if the usernames should be removed from the imported tweets. |
| featuredNewsBackgroundColor | String | ‘#c90016’ | The color of the featured news background. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| featuredNewsTitleColor | String | ‘#eee’ | The color of the featured news title text. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| featuredNewsTitleColorHover | String | ‘#111’ | The color of the featured news title text in hover state. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| featuredNewsTitleFontSize | Number | 38 | The font size of the featured news title text in pixels. |
| featuredNewsTitleFontWeight | Number | 700 | The font weight of the featured news title text. |
| featuredNewsTitleFontFamily | String | “‘Open Sans’, sans-serif” | The font family of the featured news title text. |
| featuredNewsTitleFontStyle | String | ‘normal’ | The font style of the featured news title text. (possible values are ‘normal’, ‘italic’ and ‘oblique’) |
| featuredNewsTitleTextTransform | String | ‘uppercase’ | The text transform value of the featured news title text. (possible values are ‘none’, ‘capitalize’, ‘uppercase’, ‘lowercase’) |
| featuredNewsTitleMaxLength | Number | 255 | The maximum number of characters displayed for the featured news title. If the actual title is longer than the limit imposed with this option the title will be truncated with final ellipsis. |
| featuredNewsTitleEnableLinks | Boolean | True | Whether to enable or not the link associated with the featured news title. |
| featuredNewsTitleOpenLinkTab | Boolean | False | Whether to open in a new tab or not the link associated with the featured news title. |
| featuredNewsExcerptColor | String | ‘#eee’ | The color of the featured news excerpt text. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| featuredNewsExcerptFontSize | Number | 28 | The font size of the featured excerpt title text in pixels. |
| featuredNewsExcerptFontWeight | Number | 700 | The font weight of the featured news excerpt text. |
| featuredNewsExcerptFontFamily | String | “‘Open Sans’, sans-serif” | The font family of the featured news excerpt text. |
| featuredNewsExcerptFontStyle | String | ‘normal’ | The font style of the featured news excerpt text. (possible values are ‘normal’, ‘italic’ and ‘oblique’) |
| featuredNewsExcerptTextTransform | String | ‘none’ | The text transform value of the featured news excerpt. (possible values are ‘none’, ‘capitalize’, ‘uppercase’, ‘lowercase’) |
| featuredNewsExcerptMaxLength | Number | 255 | The maximum number of characters displayed for the featured news excerpt. If the actual excerpt is longer than the limit imposed with this option the title will be truncated with final ellipsis. |
| slidingNewsBackgroundColor | String | ‘#000000’ | The color of the sliding news background. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| slidingNewsColor | String | ‘#eee’ | The color of the sliding news text. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| slidingNewsColorHover | String | ‘#aaaaaa’ | The color of the sliding news text in hover state. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| slidingNewsFontSize | Number | 28 | The font size of the sliding news text in pixels. |
| slidingNewsFontWeight | Number | 700 | The font weight of the sliding news text. |
| slidingNewsFontFamily | String | “‘Open Sans’, sans-serif” | The font family of the sliding news text. |
| slidingNewsFontStyle | String | ‘normal’ | The font style of the sliding news text. (possible values are ‘normal’, ‘italic’ and ‘oblique’) |
| slidingNewsTextTransform | String | ‘uppercase’ | The text transform value of the sliding news text. (possible values are ‘none’, ‘capitalize’, ‘uppercase’, ‘lowercase’) |
| slidingNewsPadding | Number | 112 | The padding between the sliding news in pixels. |
| slidingNewsMaxLength | Number | 255 | The maximum number of characters displayed for the sliding news text. If the actual sliding news text is longer than the limit imposed with this option the sliding news text will be truncated with final ellipsis. |
| slidingNewsEnableLinks | Boolean | True | Whether to enable or not the link associated with the sliding news. |
| slidingNewsOpenLinksNewTab | Boolean | False | Whether to open in a new tab or not the link associated with the sliding news text. |
| showClock | Boolean | True | Whether to show or not the clock. |
| clockColor | String | ‘#111’ | The color of the clock text. Should be provided as a string with the color in HEX format (eg. ‘#ff0000’) or in RGBA format. (eg. ‘rgba(255, 0, 0, 0.8)’) |
| clockFontSize | Number | 28 | The font size of the clock text in pixels. |
| clockFontWeight | Number | 700 | The font weight of the clock text. |
| clockFontFamily | String | “‘Open Sans’, sans-serif” | The font family of the clock text. |
| clockFontStyle | String | ‘normal’ | The font style of the clock text. (possible values are ‘none’, ‘capitalize’, ‘uppercase’, ‘lowercase’) |
| clockUpdate | Number | 1000 | This value determines how frequently the clock should be updated in milliseconds. |
| clockBackgroundImage | String | The value is too long to be displayed in this reference | The image used as a background for the clock provided in base64 format. The recommended dimensions are 80×40 pixels. |
| showOpenCloseButton | Boolean | True | Whether to show or not the Open/Close button. |
| openButtonBackgroundImage | String | The value is too long to be displayed in this reference | The image used as a background for the open button provided in base64 format. The recommended dimensions are 80×40 pixels. |
| closeButtonBackgroundImage | String | The value is too long to be displayed in this reference | The image used as a background for the close button provided in base64 format. The recommended dimensions are 80×40 pixels. |
| enableMobileDevices | Boolean | False | This option determines if the news ticker should be enabled with mobile devices. The actual detection is performed via PHP with the Mobile Detect PHP library. |
| enableTabletDevices | Boolean | False | This option determines if the news ticker should be enabled with tablet devices. The actual detection is performed via PHP with the Mobile Detect PHP library. |
| enableDevices | Array[string] | [] | This option allows to enable the news ticker with specific mobile devices. The identifiers of the mobile devices should be provided as an array of strings. |
| hideFeaturedNewsMaxWidth | Number | 0 | This option should be used to hide the featured news (with a media query that uses the max-width property) when the browser viewport width goes below the specified value in pixels. |
| hideFeaturedNewsMaxDeviceWidth | Number | 0 | This option should be used to hide the featured news (with a media query that uses the max-device-width property) when the device full screen size width goes below the specified value. |
| hideFeaturedNewsLandscape | Boolean | False | This option should be used to hide the featured news when the device orientation is ‘landscape’. |
| hideFeaturedNewsPortrait | Boolean | False | This option should be used to hide the featured news when the device orientation is ‘portrait’. |