I’m a new WF user (and a pretty lightweight coder, in general) using a jQuery script called t.js to simulate text typing. I more or less have that working, but I’m failing to be able to style the text (specifically getting it to wrap) which I’ve placed in an HTML embed.
Maybe I need to manually enter tags? Or, maybe there’s a better approach to accomplish this. I’m certainly open to suggestions!
I recommend using typed.js or typer.js for creating this typed field. Because all you need to do is add some js to your site (just a reference link) and then give some text a span tag or a class and then it’ll type out whatever you have in your reference and will inherit your class styling which you give some dummy text in the design view.
This way you don’t have to use an embed code. You just add this to your header:
<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
$(function(){
$(".elementnamegoeshere").typed({
strings: ["Type anything here to that you'd like it to type out for you", "If you type something here, then it'll get deleted and type this second set of text."],
typeSpeed: 0
});
});
</script>
Then create a div or paragraph with placeholder text, give it the class which says “elementnamegoeshere” or whatever you’d like to name it (keep in mind that it is case sensitive) and publish the page. You can style the text to have whatever look or feel you’d like.
Feeling a bit stupid and challenged. I’ve tried to place a class in div block several different ways and typed.js does not run. When I inspect it with Chrome’s inspector - I see two consistent errors:
typed.js:388 Uncaught TypeError: Cannot read property ‘fn’ of undefined
$.fn.typed = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data(‘typed’),
options = typeof option == ‘object’ && option;
if (!data) $this.data(‘typed’, (data = new Typed(this, options)));
if (typeof option == ‘string’) dataoption;
});
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0
});
});
Don't know if this is something I'm doing or something else is amiss.
TIA!
m.
Thanks @Waldo and @bart for all your help, thus far! I’ve learned a lot about WF in the past few weeks and feeling ever-more comfortable and productive in the environment.
At @Waldo’s suggestion, I used typed.js to create a typewriter effect and it’s working pretty well. However, it has its limitations, or I don’t know quite how to modify it to get it do what I’d like.
Based on the documentation, I can insert a carat “^” and a number of ms to pause the typing and that’s great. I also know that a Backspace function exists in typed.js that, if I can figure out how it works, I can setup to have some characters be backspaced and retyped. But, if I want to do that in a number of places in my very long bit of typing (which you can see in the attached link), I want to know if there’s an easier way to achieve this effect.
Thanks in advance for all your help, WF Community!