How to get text in HTML to wrap

Hello!

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!

Anyway, here’s a read-only link to the site: https://preview.webflow.com/preview/michaelcowan?preview=d555e11dc0b9f3d9da52494e917ef89c.

I’m using Chrome.

And here’s a screen shot. You can see that the text ends abruptly on the right margin.

TIA,

Michael

Hey @MickeyChcg

Can you please repose your read only link? It is sending me to a 404 page right now.

See this page for how to share a read only link:

Thank you,

Waldo

1 Like

Sorrry @Waldo!

Try this: https://preview.webflow.com/preview/michaelcowan?preview=fa03714ee81af07f8e4585b75b42f20c

m.

Bueller? Bueller? Bueller? Anyone?

Logging in now and taking a look @MickeyChcg haha :slight_smile:

Hey Michael,

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. :slight_smile:

Here it is in a codepen: http://codepen.io/drocarmo/pen/rsjzp
Here you can download the source files to host on a server: JavaScript Animated Typing with Typed.js | by Matt Boldt
Here’s another codepen: http://codepen.io/jasondavis/full/fHdAt/

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. :smiley:

Please let me know if you have any questions :slight_smile:

Waldo

EDIT: Changed the post to “Embed/Custom Code” :slight_smile:

1 Like

Thank you @Waldo! typer.js looks like a much simpler solution, but it lacks some of the functionality that I liked in t.js:

  • The ability to backspace to delete “mistyped” characters.
  • Changing the typing speed to make it look more uneven (human)
  • I could set a custom cursor and blink speed.

Do you know or have any sense if those things are possible with typer.js?

m.

1 Like

Hey @MickeyChcg see this link from above: JavaScript Animated Typing with Typed.js | by Matt Boldt

All of those functions are possible with this js. :smile:

Thanks,

Waldo

1 Like

@Waldo , cool. I’ll fiddle with it. Thanks!

My pleasure to help @MickeyChcg :slight_smile: let me know if you have any questions anytime.

And welcome to the Webflow Help Pages :smile: and to the Webflow Community :smile: . Excited to see your future Webflow creations.

Sincerely,

Waldo :smile:

1 Like

@Waldo, hi,

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;
});

michaelcowan.webflow.io/:25 Uncaught ReferenceError: $ is not defined

$(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.

Make sure you put that code in the Custom Code fields of before </body>. Also a public link (to published site) would help debugging :)

2 Likes

Thanks @bart!

Got it!

Sometimes the simplest things are the most difficult… for me anyway. :wink:

m.

1 Like

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.

I’ve attached a shared version of my site: https://preview.webflow.com/preview/michaelcowan?preview=fa03714ee81af07f8e4585b75b42f20c.

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!

@MickeyChcg

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.