Telex demo - sjaakpriester.nl

Cycle

Speed 200 pixels/sec

Reverse Ease-in-out Pause on Hover

Showing 1-3 of 3 items.

Id	Class	Content

m1	msg-lightgreen	Telex is a scrolling news ticker widget
m2	msg-amber	Telex can be updated while it is running
m3	msg-teal	Try the options below

Give Telex some time to process changes in the messages.

Telex is a Javascript widget for continuously displaying breaking news, traffic information, stock quotes, and the like. It is free software, distributed under the MIT License.

Using it in your HTML page is easy:

Code

<html>
    <head> ... </head>
    <body>

    <div id="tx"></div>

    <script src=".../jquery.js"></script>
    <script src=".../dist/telex.js"></script>

    <script>
        $(document).ready(function () {
            var qtx = Telex.widget('tx', { /* ...options... */ },
            [   // array of messages
                {
                    id: 'm1',
                    class: 'msg-lightgreen',
                    content: 'Telex is a scrolling news ticker widget'
                },
                {
                    id: 'm2',
                    // ...
                }
                /* ...more messages... */
            ]);
        });
    </script>
    </body>
</html>

Consult the documentation for more options.

A few examples

Trains leaving from Amsterdam

Telex is updated every 2 minutes, using Javascript code like this:

function getData() {
    window.fetch("https://gateway.apiportal.ns.nl/reisinformatie-api...", { /* init */  })
    .then(response => response.json())
    .then(json => json.payload.departures)
    .then(departures =>
        departures.map(dep => {
            /* distill essential data and form message */
            return message;
        }))
    .then(msgs => qns.messages = msgs);
}

getData();
setInterval(getData, 120000);   // 2 * 60 * 1000 ms = 2 minutes

More information at the API-portaal of NS.

Telex displaying pictures

Although Telex is inteded for text use, it can also display pictures.

Here, we set the following CSS-properties:

.telex-pic {
    width: 240px;
    height: 160px;
}
.msg-pic {
    width: 240px;
    padding: 0 !important;
}

Telex has the following options:

speed 40
direction 'reverse'
timimg 'cubic-bezier(0.58, 0.0, 0.42, 1.0)'