I like the idea of this code that creates a "typing effect" on my site, however I don't know how to edit JS very well. I'd like the text to be typed on but not be erased. I'd also like the cursor to remain blinking at the end.

I've fixed some of the CSS to my liking, but I've provided it in case it's necessary to complete the effect.

/***Javascript****/
<
script type = "text/javascript" >
    // function([string1, string2],target id,[color1,color2])
    consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);

function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    target.setAttribute('style', 'color:' + colors[0])
    window.setInterval(function() {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            target.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function() {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                words.push(usedWord);
                x = 1;
                target.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function() {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (waiting === false) {
            target.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function() {
        if (visible === true) {
            con.className = 'console-underscore hidden'
            visible = false;

        } else {
            con.className = 'console-underscore'

            visible = true;
        }
    }, 400)
} <
/script>
@import url(https://fonts.googleapis.com/css?family=Khula:700); 

.hidden {
 opacity:0;
}
.console-container {
 font-family:Khula;
 font-size:4em;
 text-align:center;
 height:30px;
 width:600px;
 display:inline;
 position:relative;
 color:black;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;
}
.console-underscore {
 display:inline-block;
 position:relative;
 left:10px;
}

@media (max-width: 750px) {
  .console-container {  font-size:2em; }
}
<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>

Expected results above, current results can be seen here: https://divinotes.com/typing-text-effect-using-divi-code-modules/

1 Answers

0
Community On Best Solutions

I don't know if i get your idea ... but you can change the case witch is erasing the text.

else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function() {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 1000)
}

The second problem is that it only renders one word at a time... If you want to have more words in different colors at the same moment, you should not write into innerHTML of the target element... Instead create child Elements of that tag and change only the active one....

<script type = "text/javascript" >
    // function([string1, string2],target id,[color1,color2])
    consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text', ['#BD6983', 'tomato', 'lightblue']);

function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    var textElement = document.createElement('span'); //a variable to store the active one
    target.appendChild(textElement); // we append the textElement to the target
    textElement.setAttribute('style', 'color:' + colors[0]) //instead of modifying target we modify textElement
    window.setInterval(function() {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            textElement.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function() {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                // You can remove the repeating by uncommenting the following line
                words.push(usedWord);
                x = 1;
                textElement.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) { // erase case
            waiting = true;
            window.setTimeout(function() {
                letterCount = 0; // start with a new word
                textElement.innerHTML += " "; // apend a space to the old one to get seperation
                textElement = document.createElement('span'); // create a new textElement for the next word
                target.appendChild(textElement); // and append the new element to the target
                waiting = false;
            }, 1000)
        } else if (waiting === false) {
            textElement.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function() {
        if (visible === true) {
            con.className = 'console-underscore hidden'
            visible = false;

        } else {
            con.className = 'console-underscore'

            visible = true;
        }
    }, 400)
} </script>

You can remove the repeating by uncommenting the following line words.push(usedWord); This line adds the active word back to the words Queue.