Type writer text

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';

let interval;

let timeInterval = 300;

let typeStr = "99 bottles of beer on the wall, 99 bottles of beer, if one of those bottles should happen to fall, 98 bottles of beer on the wall.";

let typeIdx;

let htmlStr = '';

let displayStr;

$w.onReady(function () {

// Get the original html string, and split it into two pieces.

// In the process, remove the separator !##!

// By saving the original html, we preserve the style of the text to display.

if (htmlStr.length === 0) { // just get the original html text the first time

htmlStr = $w("#typewriterPage").html;


$w("#typewriterPage").html = ''; // don't show the original text

let strPieces = htmlStr.split("!##!");

displayStr = ''; // init string that we will "type" to

typeIdx = 0; // start at beginning of string we want to "type"

// Declare an interval function that will run in the background.

// This function will be triggered by the defined timeInterval.

interval = setInterval(function () {

// Get next char from string to be typed and concatenate to the display string.

displayStr = displayStr + typeStr[typeIdx++];

// Make a sandwich with the display string in between the original html pieces.

$w("#typewriterPage").html = strPieces[0] + displayStr + strPieces[1];

// Stop the interval from running when we get to the last character to by "typed".

if (typeIdx === typeStr.length) clearInterval(interval);

}, timeInterval);

});// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';


let interval;

let timeInterval = 300;

let typeStr = "99 bottles of beer on the wall, 99 bottles of beer, if one of those bottles should happen to fall, 98 bottles of beer on the wall.";

let typeIdx;

let htmlStr = '';

let displayStr;


$w.onReady(function () {


// Get the original html string, and split it into two pieces.

// In the process, remove the separator !##!

// By saving the original html, we preserve the style of the text to display.

if (htmlStr.length === 0) { // just get the original html text the first time

htmlStr = $w("#typewriterPage").html;


$w("#typewriterPage").html = ''; // don't show the original text

let strPieces = htmlStr.split("!##!");


displayStr = ''; // init string that we will "type" to

typeIdx = 0; // start at beginning of string we want to "type"


// Declare an interval function that will run in the background.

// This function will be triggered by the defined timeInterval.

interval = setInterval(function () {

// Get next char from string to be typed and concatenate to the display string.

displayStr = displayStr + typeStr[typeIdx++];

// Make a sandwich with the display string in between the original html pieces.

$w("#typewriterPage").html = strPieces[0] + displayStr + strPieces[1];

// Stop the interval from running when we get to the last character to by "typed".

if (typeIdx === typeStr.length) clearInterval(interval);

}, timeInterval);