JSFiddle - React, Tailwind, and code Playground
by Bhumika107
HTML
<div id="container"></div>
CSS
#container
{
border: 1px solid;
color: black;
font-size: 30px;
width: 100px;
height: auto;
}
JavaScript
$(document).ready(function(){
var zeroWidthSpan = document.createElement('span');
$(zeroWidthSpan).addClass("zeroWidthSpan");
$(zeroWidthSpan).css({
'padding':'0px',
'width':'0px',
'position': 'relative',
'display': 'inline-block',
'width':'10px',
'height':'10px'
});
var trial = document.createElement("div");
trial.innerHTML = content;
var number = 0;
var divLength = $(">div",trial).length;
var string1 = '';
var replacers = {
};
while(number < divLength)
{
var test1 = $('>div', trial)[0];
var test2 = $(('div', test1)).replaceWith('#'+number+'07#')[0];
var index = trial.innerHTML.indexOf('#'+number+'07#');
replacers[index] = test2;
string1 = trial.innerHTML.replace('#'+number+'07#','7');
trial.innerHTML = string1;
number++;
}
$.fn.writeHTML2 = function (content, callback) {
var elem = this;
var contentArray = string1.split(""),
inTags = '';
elem.html("");
for (var key in replacers) {
if (replacers.hasOwnProperty(key)) {
contentArray[key] = replacers[key].outerHTML;
}
}
var current = 0;
var str1 = "";
isWriting = true;
elem.append(zeroWidthSpan);
setTimeout(function(){
intervalTimeoutIds2 = window.setInterval(function () {
firstCallOfShowText=false;
count++;
if(count%2 == 0)
{
setTimeout(function(){
if($(zeroWidthSpan).position().left == 0 && $(zeroWidthSpan).offset().top <= elem.offset().top)
{
return;
}
},0);
}
else
{
setTimeout(function(){
if($(zeroWidthSpan).position().left == 0 && $(zeroWidthSpan).offset().top <= elem.offset().top)
{
return;
}
},0);
}
if (current < contentArray.length) {
if (contentArray[current] == "&") {
while (contentArray[current] != ";") {
inTags += contentArray[current];
current++;
...