Scrolling text button in TypeScript

By Sep 21, 2017


Here we explain how to program in Typescript a scrolling text button. We then test this button in an HTML page.


A button to draw attention

In this article, we will create buttons whose text scrolls from left to right in Typescript.

In an HTML page of a Web site, objects are often static. A site visitor may not notice a button to launch an app or to connect to a page on your site. To invite him to click on the button, we will automatically scroll the text of the button.

For the programming part, I chose the Typescript language that requires separating the code from the objects and thus preventing the placing of pieces of code at the top or bottom of each object on the HTML page.

To be able to set the scrolling, we will provide two attributes:

  • data-speed to change the scrolling speed,
  • and data-space to set the number of spacing characters between two passages of the text.

The method we are going to implement is to copy twice the initial text of the button followed by several white characters and then extracting from that string, substrings of the same length as the starting string, and finally placing them in an array. It is enough to run a function at regular intervals that replaces the text of the button with an element of the array, which is traversed cyclically.

But we will encounter a problem displaying the text. Indeed, if you change the text of a button, the width of the button automatically adapts to the width of the displayed text. So even if the substrings we have created in the array all have the same number of characters, not all the characters will have the same width according to the font used. We risk seeing the change in width of the button.

To resolve this issue, we can for example choose a monospace font to display the button text or set the width of the button. But this latter option asks to calculate the maximum width of the button obtained by displaying a string consisting solely of M (one of the widest characters of a font.)

Scrolling Text button implementation

.mono {
HTML code
<input id="button2" class="mono" type="button" data-speed="200" data-space="10" value="Text to click">
Typescript program
class ScrollingTextButton {
    button: HTMLButtonElement;
    speed: number;
    substringNumber: number = 0;
    counter: number = 0;
    text: string[]=[];

    constructor(but: HTMLButtonElement) {
        this.button = but;
        this.speed = Number(but.getAttribute("data-speed"));
        this.speed = (this.speed < 0) ? 100 : this.speed;
        let t: string = this.button.value;
        let spaceNumber = Number(but.getAttribute("data-space"));
        spaceNumber = (spaceNumber < 0) ? 0 : spaceNumber;
        let space: string = Array<string>(spaceNumber+2).join(" ");
        let charNumber = t.length;
        t = t + space + t + space;
        let n = charNumber + spaceNumber ;
        for (let i: number = 0; i < n; i++) {
            this.text.push(t.substring(i, charNumber + i - 1));
        this.counter = 0;
        this.substringNumber = n;
        setInterval(() => { this.ButtonScroll(); }, this.speed);

    ButtonScroll() {
        this.button.value = this.text[this.counter++];
        this.counter %= this.substringNumber;

window.onload = () => {
    let but1: HTMLButtonElement = <HTMLButtonElement>document.getElementById("button1");
    let stb1: ScrollingTextButton = new ScrollingTextButton(but1);
    let but2: HTMLButtonElement = <HTMLButtonElement>document.getElementById("button2");
    let stb2: ScrollingTextButton = new ScrollingTextButton(but2);