Small News Scroller Plugin with jQuery and jQuery UI - Telex

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.