Telex demo


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

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

Use it in your HTML page like this:

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

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

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

    <script>
        $(document).ready(function () {
            $('#tx').telex({
                messages: [
                    {
                        id: 'm1',
                        class: 'msg-lightgreen',
                        content: 'Telex is a scrolling news ticker widget'
                    },
                    {
                        id: 'm2',
                        // ...
                    }
                    /* ...more messages... */
                ]
                /* ...more options... */
            });
    </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() {
    $.get(
        "/software/ns-data",    // url delivers real time data in JSON format
        function(d, s, x) {
            $("#ns").telex("option", "messages", JSON.parse(d));
        }
    );
}

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

Telex displaying pictures


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

Here, we set the following CSS-properties:

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

Telex has the following options:

  • duration 8000
  • delay 0
  • direction 'reverse'
  • timimg 'cubic-bezier(0.58, 0.0, 0.42, 1.0)'

More on timing