Telex demo


Cycle
Showing 1-3 of 3 items.
IdClassContent 
 
m1msg-lightgreenTelex is a scrolling news ticker widget
m2msg-amberTelex can be updated while it is running
m3msg-tealTry 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:

<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)'

More on timing