Need to install this peice of JQuery, help needed!

B

I wish to install this jquery code (typed.js) for my heading “#lp-pom-text-52”

Can someone identify the way to do this, i have read your instructions but cant fully understand.

thanks!

https://github.com/mattboldt/typed.js/

6 replies

Hristian
Userlevel 7
Badge +3

Hi Brad, 

We’ll need to see your actual page in order to be able to troubleshoot this for you. 

However, I set up a quick demo right here and all seems to work. 

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
B

Thanks for your reply!

I have a heading on my page, same as above. My page is https://app.unbounce.com/1274963/variants/81715733/edit

Not sure if you can see it, with my element id of that heading being #lp-pom-text-52.

Hristian
Userlevel 7
Badge +3

Hi Brad, 

You can’t preview most script changes on an unpublished page. 

You need to publish the page and only that link is shareable. The link above only works, if you are logged in with your own account. 

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
B

http://unbouncepages.com/universitii-lightbox-45/

Trying to do the headline uunder typed.js

Hristian
Userlevel 7
Badge +3

Hi Brad, 

A few things:

  1. You need to properly call the required scripts. Jquery is already being served by Unbounce but you also need to upload and link properly your typed.js script. Upload the typed.js script to your server, since you can’t upload it to Unbounce. 

  2. Once, you’ve linked the scripts, you need to properly call the function. Right now it’s looking for “.element” and since there is no such ID, the function fails. 

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Hristian
Userlevel 7
Badge +3

Hi Brad, 

Once you’ve called the scripts correctly, here is how you should setup the actual headline: 

  1. Insert a text element, style it however you want (font type, size, etc.) 

  2. Now click on view source and replace the headline text with an empty space. 

If you don’t put an empty space, you won’t be able to click on the headline again to edit/move it if needed.

  1. Wrap the empty space with a span tag. It doesn’t matter what you’ll call the span tag as long as you use the same one, when calling the function.

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1393416/RackMultipart20160404-3700-1g9b3lt-Edit A - typed_demo inline.png?1459778245 “Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1393416/RackMultipart20160404-3700-1g9b3lt-Edit__A__-__typed_demo__inlinepng1459778245”)

  1. Now, you are ready to call your funtion. 

       
    (function(){<br />&nbsp; &nbsp; &nbsp; &nbsp; (".typed1").typed({
                strings: [“The first headline you’ll see”, “This is the second headline, you’ll see”, “Last but not least, this is the third headline”],
                loop: true,
                typeSpeed: 10
            });
        });

Since, I used “typed1” as my span class, that’s what I use when calling the function. 

  1. Now, publish the page and you should be all set. 

Best,
Hristian

EDIT: You can see it working with a whole headline here.

Hristian K. → experimentation-as-a-service → https://www.revise.agency/

Reply


Terms & ConditionsCookie settings