typewriterjs
typewriterjs copied to clipboard
Cursor is on next line
I am using this and it works but for some reason the cursor appears on the next line below the text instead of the end of the line as it types out.
Any idea what I did wrong?
Here's the code for reference
`
`const name='{name}';
const amount='{amount}';
const prompt='{prompt}';
const wrapData=(message)=>{
return message.replace(/\b{name}\b/g, '{name}').replace(/{currency}{amount}\b/g, '{currency}{amount}').replace(/\b{amount}{currency}/g, '{amount}{currency}').replace(/\b{amount}\b/g, '{amount}').replace(/{currency}/g, '{currency}');
}
const typewriter = new Typewriter('.text-container', {
//skipAddStyles:true,
delay:50
});
const row1a=wrapData({row1}
);
const row2a=wrapData({row2}
);
const row3a=wrapData({row3}
);
const row4a=wrapData({row4}
);
typewriter.changeCursor('{prompt}')
.typeString(<div class="row1 message">${row1a}</div>
)
.pauseFor(50)
.typeString(<div class="row2 message">${row2a}</div>
)
.pauseFor(50)
.typeString(<div class="row3 message">${row3a}</div>
)
.pauseFor(50)
.typeString(<div class="row4 message">${row4a}</div>
)
.pauseFor(50)
.start();
`
I found a similar issue when messing with <h1>
tags, this caused the cursor to jump to a new line everytime. In order to remedy this for my code I did this: https://jsfiddle.net/ovczLxaj/1/
The key steps being to define the <div>
as a class:
<div id="app" class="cl">
</div>
And then making sure the text is alined in-line:
.cl h1 {
display: inline;
}
.cl span {
font-size: 50px;
}
Personally this feels like more of a trick in order to get it too work, as it means the cursor doesn't resize properly when you change header sizes or anything.. I'd like to see this issue fixed in new updates :)
I hope this helps as a temporary fix though :)
Hey thanks, all I had to do was add the display: inline to my existing class and now it works =D The only downside is there's no like..global CSS so I have to put this in every single CSS for every variation...a real pain but it works so I will take it =D
Woops I lied, that puts all the lines together too (like it doesn't line between each row. hmmm. But I added some
to the output lines and it's good now =D