Typing effect with JavaScript: How to remove cursor once all the text is “typed”
Question
I'm making a personal webpage and I'm using JavaScript to create a typing effect under a header called "My Story". The text types fine, but once it is done typing the cursor remains at the bottom. What do I need to change/add in my code to fix this?
I want the cursor to disappear once the text is type. No error messages are present.
// Displays "My Story" with a typing effect var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _PART_INDEX++; if (text === _CONTENT[_PART]) { _CURSOR.style.display = "none"; clearInterval(_INTERVAL_VAL); setTimeout(function() { _INTERVAL_VAL = setInterval(Delete, 50); }, 1000); } } _INTERVAL_VAL = setInterval(Type, 100);
body { background: dodgerblue !important; color: white !important; } h3 { border-left: 6px solid whitesmoke; background-color: lightslategray; } p5 { text-align: justify; } p4 { text-align: justify; } #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: white; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: white; animation: blink .75x step-end infinite; } @keyframes blink { from, to { background-color: transparent; } 50% { background-color: black; } } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: whitesmoke; } ::-webkit-scrollbar-thumb { background: grey; } ::-webkit-scrollbar-thumb:hover { background: dodgerblue; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row align-items-start"> <div class="col"> <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Me</a> </li> </ul> </nav> <header> <title> Robert Smith </title> </header> <body> <p class="bg-primary text-white"> </div> <div class="col ml-auto"></div> <div class="col"></div> </div> <div class="row"> <div class="col"> <h1> <b> <div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div> </b> </h1> <h2 class="display-4 ml-3"> I want to make a difference. </h2> <h3> <div class="ml-3"> My Story </div> </h3> <divT> <p1> <div id="container"> <div id="text"></div> <div id="cursor"></div> </div> <span class="border border-dark"> <div class = "ml-3" > <br> </div> </span> </p1> <p6> <div class="ml-3"> I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours. </div> </p6> </divT> <h4> Contact me </h4> <p6> <ul3> <li>Email: robertethansmith@yahoo.com</li> <li>GitHub: roberto257</li> </ul3> </p6> </div> <div class="col"> <script language="javascript"> //Changes images when clicked function changeImage() { if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG"; } else { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG"; } } function changeImage2() { if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG"; } else { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG"; } } </script> <p2> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" /> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" /> </p2> </div> <div class="col mt-5"> <p5> <br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own. <br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br> </p5> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python"> <p4> <br> My current skills include but are not limited to: <ul2> <li>Python</li> <li>Web Development</li> <li>JavaScript</li> <li>Java</li> </ul2> I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br> </p4> </div> </div> <div class="row"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
4 answers
solution1
1 2019-05-21 20:05:50
Maybe, try this? I'm adding pseudo-class:after, with content: '|' and removing the class at the end.
(function(){ /* cut the text for demo */ let text = "When I was 15, I took a Robotics Honors course at my high school." let bubu = document.getElementById('bubu'); for( let i = 0; i < text.length; i++ ){ setTimeout( function(){ bubu.innerText += text.charAt(i); }, i*100); } setTimeout(function(){ document.getElementById('bubu').classList.remove('bubu'); }, (text.length)*100); /* Set removing Timeout, synchronous to the end of typing */ })();
#bubu { text-align: center; width: 400px; font-size: 20px; } .bubu:after {content: '|'; color: red;}
<div id="bubu" class="bubu"></div>
Ps I've used text.split('') - to sort each character into array...
Changed → text.charAt(i); due to comment*
solution2
0 2019-05-21 20:06:03
Unless I'm misunderstanding what you are asking for, it looks like you are just missing a Delete function to get triggered, once the typing is done. Something like this should do the trick:
function Delete() {
_CURSOR.style.display = "none";
}
solution3
0 2019-05-21 20:16:19
Just like you are inserting text from array, insert the cursor as well after the text/innerHtml. Try running the snippet, is that what you are expecting? Only change made - _ELEMENT.appendChild(_CURSOR);
// Displays "My Story" with a typing effect var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _ELEMENT.appendChild(_CURSOR); _PART_INDEX++; if (text === _CONTENT[_PART]) { _CURSOR.style.display = "none"; clearInterval(_INTERVAL_VAL); setTimeout(function() { _INTERVAL_VAL = setInterval(Delete, 50); }, 1000); } } _INTERVAL_VAL = setInterval(Type, 100);
body { background: dodgerblue !important; color: white !important; } h3 { border-left: 6px solid whitesmoke; background-color: lightslategray; } p5 { text-align: justify; } p4 { text-align: justify; } #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: white; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: white; animation: blink .75x step-end infinite; } @keyframes blink { from, to { background-color: transparent; } 50% { background-color: black; } } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: whitesmoke; } ::-webkit-scrollbar-thumb { background: grey; } ::-webkit-scrollbar-thumb:hover { background: dodgerblue; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row align-items-start"> <div class="col"> <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Me</a> </li> </ul> </nav> <header> <title> Robert Smith </title> </header> <body> <p class="bg-primary text-white"> </div> <div class="col ml-auto"></div> <div class="col"></div> </div> <div class="row"> <div class="col"> <h1> <b> <div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div> </b> </h1> <h2 class="display-4 ml-3"> I want to make a difference. </h2> <h3> <div class="ml-3"> My Story </div> </h3> <divT> <p1> <div id="container"> <div id="text"> </div> <div id="cursor"></div> </div> <span class="border border-dark"> <div class = "ml-3" > <br> </div> </span> </p1> <p6> <div class="ml-3"> I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours. </div> </p6> </divT> <h4> Contact me </h4> <p6> <ul3> <li>Email: robertethansmith@yahoo.com</li> <li>GitHub: roberto257</li> </ul3> </p6> </div> <div class="col"> <script language="javascript"> //Changes images when clicked function changeImage() { if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG"; } else { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG"; } } function changeImage2() { if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG"; } else { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG"; } } </script> <p2> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" /> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" /> </p2> </div> <div class="col mt-5"> <p5> <br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own. <br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br> </p5> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python"> <p4> <br> My current skills include but are not limited to: <ul2> <li>Python</li> <li>Web Development</li> <li>JavaScript</li> <li>Java</li> </ul2> I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br> </p4> </div> </div> <div class="row"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
solution4
0 2019-05-21 21:28:11
I like OPTIMUS PRIME idea(+1), but it also should better works with setInterval
I have some remarks:
1 - using textContent is more apopriate (if you don't use html tags)
2 - using arrow function to impact local vars
3 - you don't need CSS to set a Blinking Cursor
So I made this (It use html tags) It works also if JS is disabled (no animation, but the text is shown)
Text_Typed('bubu'); function Text_Typed( eID, delay = 100) { let element = document.getElementById(eID), txt = element.innerHTML, Text_Sz = txt.length, sItv_id = null, Text_html = '', loop_i = -1, Cursor_i = 1; element.textContent = '▮'; // or '|'; sItv_id = setInterval(_=>{ loop_i++; if (loop_i < Text_Sz) { let n, inC = txt.charAt(loop_i); switch (inC) { case '<': n = txt.indexOf('>',loop_i); if (n>0) { inC = txt.substring(loop_i,++n); loop_i = --n; } break; case '&': n = txt.indexOf(';',loop_i); if (n>0) { inC = txt.substring(loop_i,++n); loop_i = --n; } break; } Cursor_i = (Cursor_i+1) % 2; Text_html += inC; element.innerHTML = Text_html + ((Cursor_i)?'▮':'▯'); // or '|'   ▉ } else { element.innerHTML = Text_html; clearInterval(sItv_id); } }, delay); }
#bubu { text-align : center; width : 400px; font-size : 20px; }
<div id="bubu" > <p>When I was 15, I took a Robotics Honors course at my high school.</p> <p>We designed and built robots using <span style="color:crimson">VEX robotics kits</span>.</p> <p>To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it.</p> <p>This is what inspired me to code.</p> <p>Before long, I was researching software development and decided the best language for me to start with would be Python.</p> <p>That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer <b>capabilities</b> from this point on.</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript text adventure with typing effect
How to create typing text effect
Simulating text typing effect in JavaScript without setTimeout
Write the text with typing effect using javascript/Jquery
How to capture events in Javascript textarea for recording all typed text
How to replicate a typing effect using jQuery/JavaScript?
How to make Javascript typing effect in loop forever?
Typing text effect with formatting: skip HTML tags, but don't remove
Typing Text effect not working
Javascript typing effect
Related Tags