loop through array in javascript for wixsite

Question

I am trying to get the effect of a "revolving door" of words coming on to my wixsite, only to be replaced by the next word.

I am thinking the way to do this is to have an array in javascript of the words I want to come on, and then loop through that array, bringing each word on to the screen using my chosen animation for text.

I have code that takes a word, and "typewrites" it on to my wix site, but how can i adapt it to do the same for many words, one after another exits the screen (almost like a slideshow of words being typed on?)

here is my code:

> import wixData from 'wix-data';
> 
> let interval; let timeInterval = 350; let typeStr = "Invest"; 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);
});

score 1 · Accepted Answer · answered Jul 17 '20 at 03:17

1

const $w = document.querySelector.bind(document);

Object.defineProperty($w('#typewriterPage'), 'html', {
  get: function () { return this.innerHTML },
  set: function (html) { this.innerHTML = html }
});
// ignore everything above this comment

const typewriterPage = $w('#typewriterPage');

const carouselWords = ['Invest', 'Finance', 'Borrow', 'Lend'];

typeWords(carouselWords, typewriterPage.html.split('!##!'));

async function typeWords(words, style) {
  while (true) {
    words.unshift(words.pop());
    const [word] = words;
    await typeWord(word, style);
  }
}

function typeWord(word, style) {
  const chars = [...word];
  let stack = '';
  return new Promise(resolve => {
    const interval = setInterval(() => {
      if (!chars.length) {
        resolve();
        clearInterval(interval);
        return;
      }
      stack += chars.shift();
      typewriterPage.html = style[0] + stack + style[1];
    }, 250);
  });
}

<span id='typewriterPage'><u>!##!</u></span>

answered Jul 17 '20 at 03:17

GirkovArpa

4,427
4
14
43

this worked for my code when previewing, however when i publish the site, only the "!##!" is seen, how can i fix this? – elm774 Jul 21 '20 at 03:40
Write `$w("#typewriterPage").html` in your console, hit `Enter`, and share what it says (without the animation code running). – GirkovArpa Jul 21 '20 at 03:42
not sure i understand what you mean, i pasted it under the rest of your code in the console. it didn't give me an error when I pressed enter. Should i be pasting it somewhere else? – elm774 Jul 21 '20 at 03:47
My intent is to find out what the default HTML content is of the element whose `id` is `typewriterPage`. – GirkovArpa Jul 21 '20 at 04:05
i believe it is !##!, that is what is displayed on the website when it is published, and that is not being "triggered" to the array of words – elm774 Jul 21 '20 at 04:18
Are you willing to share a link to your site? – GirkovArpa Jul 21 '20 at 09:44

loop through array in javascript for wixsite

1 Answers1