Small News Scroller Plugin with jQuery and jQuery UI - Telex
File Size: | 9.9 KB |
---|---|
Views Total: | 13633 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Telex is a jQuery & jQuery UI based scroller widget which takes an array of text messages and convert them into a horizontal text scroller. Similar to the traditional marquee element and intended for news ticker and horizontal text scroller.
Basic usage:
1. Include the needed jQuery and jQuery UI libraries on the web page.
<link rel="stylesheet" href="/path/to/jquery-ui.css"> <script src="/path/to/jquery-1.11.3.min.js"></script> <script src="/path/to/jquery-ui.min.js"></script>
2. Download the plugin and include the telex.js script after jQuery library.
<script src="dist/telex.js"></script>
3. Create a container for the text scroller.
<div id="news-ticker"></div>
4. Call the function on the container and add an array of text messages you want to scroll through.
$('#news-ticker').telex({ messages: [{ id: 'msg1', // message ID content: 'Breaking News 1', class: 'news-1' // css class },{ id: 'msg2', content: 'Breaking News 2', class: 'news-2' }] });
5. Customization options.
/** * Delay time before scrolling starts in milliseconds */ delay: 1000, /** * integer, time it takes for a message to scroll along main window in milliseconds */ duration: 5000, /** * 'normal' (to left) or 'reverse' (to right) - direction of movement */ direction: 'normal', /** string, timing-function used for the animation; 'ease-in-out' may be another useful value * @see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function */ timing: 'linear', /** * boolean, pause ticker on hover */ pauseOnHover: true, /** * array of messages. * A message is a plain object having the properties: * - content The content of the message. Can be text, but also a piece of HTML (like a link). * - id (Optional). Id of the message, starting with a word character. It is only used in the `remove` method. * - class (Optional). The CSS-class of the message. May be used for styling purposes. */ messages: []
6. Public methods.
// pause the scroller $("#demo").dateline("pause"); // resume the scroller $("#demo").dateline("resume");
7. Change the default CSS styles in the telex.js.
$('<style>').text('.telex{overflow: hidden;white-space: nowrap;}.telex-inner{height: 36px; line-height:36px; padding:10px 0;width: 60000px;}.telex-msg{display: inline-block;height: 100%;}.telex{background-color: #E95546;}.telex-msg{padding-left: 1.5em;padding-right: 1.5em;}').insertBefore($('[rel=stylesheet]').first());
This awesome jQuery plugin is developed by sjaakp. For more Advanced Usages, please check the demo page or visit the official website.