I am creating a Typing effect using HTML5 , CSS ,Javascript,Typed.js. This is my code=
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<p class ="TypeWirter_effect"></p>
<script src="jquery-ui.min.js>"></script> //This is downloaded from jquery's Website n pasted in same folder
<script src="jquery.js"></script> //This is downloaded from jquery's Website n pasted in same folder
<script src="typed.min.js"></script> //This is downloaded from Typed.js main Website n pasted in same folder
<script>
$(function() {
$("#TypeWirter_effect").typed({
strings: ["Want to learn Coding ?", "Want to learn C++","Java","Python"],
typeSpeed: 0,
loop: true,
backSpeed: 30,
showCursor: true,
backDelay: 500,
startDelay: 1000,
contentType: 'text',
backspace: function(curString, curStrPos) {
setTimeout(function () {
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 3.
if (curString.arrayPos == 20) {
curString.stopNum = 14;
}
//every other time, delete the whole typed string
else {
self.stopNum = 14;
}
}
)
}
});
});
</script>
</body>
</html>
1) When i run this the cursor always appear in the bottom cursor problem, i want the cursor right next to the ? mark at the end of this line but it always stays down.
2) I want the second sentence "Want to learn C++" not to be erased completely and c++ 2 be erased and java to be appended to it .
I have read the documentation .But nothing seems to work Out .Help Link of Documentation==(https://github.com/mattboldt/typed.js/blob/master/README.md)
1)
p tag is a paragraph, change p tag to span tag and your problem will be resolved.
<span class="TypeWirter_effect"></span>
2)
Just add text before your typewritter effect text:
Want to learn <span class="TypeWirter_effect"></span>
And change strings to:
strings: ["Coding?", "C++?", "Java?", "Python?"]
Demo: https://jsfiddle.net/Brownsugar/cncm5w0u/
I use a callback function to start language typewriter and let it loop.
First run the main sentence .TypeWirter_effect, and when it completed, run .lang.
HTML:
<span class="TypeWirter_effect"></span><span class="lang"></span>
javascript:
$(function() {
$('.TypeWirter_effect').typed({
strings: ['Want to learn Coding?', 'Want to learn '],
typeSpeed: 50,
backDelay: 3000,
callback: function(){
showLang(); // run another element
$('.typed-cursor').first().hide(); // hide first cursor
}
});
});
function showLang() {
$('.lang').typed({
strings: ['C++', 'Java', 'Python'],
typeSpeed: 50,
backDelay: 2000,
loop: true
});
}