Telex is a horizontal news scroller for text messages. It can be used for continuously displaying breaking news, traffic information, stock quotes, and the like. Messages can be added or removed while scrolling, speed and other options can be updated.
Telex is a Javascript (ES2015) widget. It works with modern browsers supporting the CSS property animation. This includes:
- IE >= 10
- Edge
- Firefox >= 38
- Chrome >= 43
- Safari >= 9
- Opera >= 32
- Android Browser >= 44
A demo of Telex is here.
Here is Telex's GitHub page.
Telex is distributed under the MIT License.
Install Telex with Bower:
bower install telex
You can also manually install Telex by downloading the source in ZIP-format.
From version 2.0, Telex has no external dependencies whatsoever.
- Load
/dist/telex.js. - Create a
<div>with anid. - In the document-ready function, set a Javascript variable with the result of a call to the function
Telex.widgetwith parametersid, options and (optionally) the first messages. Options are in a Javascript Plain Old Object, messages are in a Javascript Array.
A minimum HTML page with a Telex would look like this:
<html>
<body>
<div id="tx"></div>
<script src="/dist/telex.js"></script>
<script>
$(document).ready(function () {
var qtx = Telex.widget("tx", {/* options */}, [/* messages */]);
</script>
</body>
</html>
The Telex-container gets the CSS-class telex. This may also be used for styling purposes.
You may also load the Telex code from a content distribution network (CDN), like so:
<script src="https://unpkg.com/@sjaakp/telex/dist/telex.js"></script>
Messages can be set at create time, but also by assigning a value to Telex's property messages, like so:
qtx.messages: [
{
id: 'msg1',
content: 'This is the first message'
},
{
id: 'msg2',
content: 'This is the second message',
class: 'cls-second'
}
/* more messages... */
]
/* more options... */
});
messages is an Array of Objects, each representing a message, with the following properties:
The content of the message. Can be text, but also a piece of HTML (like a link).
Optional. Id of the message, starting with a word character. It is only used in the remove method. It is not employed as a DOM-id.
Optional. The CSS-class of the message. May be used for styling purposes.
A message may also be represented by a String in stead of an Object.
Telex has the following general options:
integer or float. Scrolling speed in pixels per second. Default: 200.
string. Scroll direction. Can be normal (from right to left) or reverse (from left to right). Default: normal.
string. Determines the way a single message scrolls. Can be any value valid for the animation-timing-function. Default: linear. Another sensible value would be ease-in-out.
boolean. Determines whether the scrolling pauses when the mouse cursor hovers above it. Default: false.
function(tlx). Callback function, called after each completed cycle of newly loaded messages. This may be used as an opportunity to load new (realtime) messages.
Options can (and should) be set at create time, and later simply by assigning a value to the Telex property with the option name:
qtx.speed = <newValue>;
Options can be read with:
<value> = qtx.direction;
Telex has five methods. They can be called like:
qtx.add({
id: "newMsg",
content: "This message will be added while Telex is running"
});
Adds a message to Telex while it is scrolling. Note that it takes some time for the message to appear.
Removes the message with the given id.
Updates the message with the given id.
Pauses the scroller.
Resumes scrolling.
Be sure that npm is installed.
Run npm install.
Run rollup -c.