Streaming live at 10am (PST)

How to get text in HTML to wrap


#1

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


#2

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


#3

Sorrry @Waldo!

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

m.


#4

Bueller? Bueller? Bueller? Anyone?


#5

Logging in now and taking a look @MickeyChcg haha smile


#6

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. 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: http://www.mattboldt.com/demos/typed-js/
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 smile

Waldo

EDIT: Changed the post to "Embed/Custom Code" smile


#7

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.


#8

Hey @MickeyChcg see this link from above: http://www.mattboldt.com/demos/typed-js/

All of those functions are possible with this js. smile

Thanks,

Waldo


#9

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


#10

My pleasure to help @MickeyChcg 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


#11

@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


#12

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


#13

Thanks @bart!

Got it!

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

m.


#14

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


#15

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