CMS Development

rachaelshaw7
Colaborador

Trying to use JQuery typeit

Please be nice I am not a coder 🙂

This is what i want to achieve:

I want to ask a question using the TypeIt JQuery Plugin. WAIT. Then display the answer

Making sure all the text in is H1 tags with defined settings.


Im trying to do this:

Need a Digital Copywriter? [WAIT...]

Compelling. Customised Content. Refreshed Weekly.

We Schedule All Copy For You - Easy! [BOLD] Order Now


This is my code: (ive pasted in code from typeit experimenting with having a q and a but thats not the solution it seems.) Ive been fiddling with this code so I dunno where i am at.

 

Got three examples in the code

<h1 id="Question1">Need a Digital Copywriter? Compelling. Customised Content. Refreshed Weekly. We Schedule All Copy For You - Easy! Order Now.</h1>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js">// <![CDATA[

// ]]></script>
<script>// <![CDATA[
$('#Question1').typeIt({ speed: 180, autoStart: false, lifelike:
true})
// ]]></script>
<p id="example4">&nbsp;</p>
<script>// <![CDATA[
$('#').typeIt({ speed: 200, autoStart: false, lifelike:
true}).tiType('Need a Digital Copywriter?') .tiPause(500)
.tiSettings({speed: 700}) .tiType('...') .tiPause(750)
.tiSettings({speed: 50}) .tiType('Compelling.') .tiBreak()
.tiPause(750) .tiType(' Customised Content.') .tiSettings({speed:
700}) .tiType('...') .tiPause(750) .tiSettings({speed: 50})
.tiType('Refreshed Weekly. We Schedule All Copy For You - <strong>Easy! Order Now</strong>');
// ]]></script>
<p>&nbsp;</p>
<h1 id="example4">&nbsp;</h1>
<script>// <![CDATA[
$('#example4').typeIt({ speed: 180, autoStart: false, lifelike: true,callback:secondParagraph}); function secondParagraph(){ $('#example4').typeIt({ speed: 200, autoStart: false, lifelike: true}).tiType('Need a Digital Copywriter?') .tiPause(550).tiSettings({speed: 700, lifelike: true}).tiType(' ...').tiPause(510).tiSettings({speed: 80, lifelike: true}).tiBreak().tiType('Compelling.').tiBreak().tiPause(750).tiType(' Customised Content.').tiSettings({speed: 100, lifelike: true}).tiBreak().tiPause(750).tiSettings({speed: 130, lifelike: true}).tiType('Refreshed Weekly.').tiBreak().tiPause(800).tiSettings({speed: 130, lifelike: true}).tiType ('We Schedule All Copy For You -').tiPause(680).tiSettings({speed: 100, lifelike: true}).tiType(' <strong>Easy! Order Now</strong>'); }
// ]]></script>
<div style="text-align: right;" --=""><!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-dcad7adb-3095-4445-ab32-897114fe1223"><span class="hs-cta-node hs-cta-dcad7adb-3095-4445-ab32-897114fe1223" id="hs-cta-dcad7adb-3095-4445-ab32-897114fe1223" style="visibility: visible;" data-hs-drop="true"><a id="cta_button_762525_5ccfd329-acd0-499e-aa36-f4f0d7acf887" class="cta_button cta_border_button" href="https://cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=5ccfd329-acd0-499e-aa36-f4f0d7acf..." cta_dest_link="http://design-assets.hubspot.com/stratus/two-column-right-landing-page" title="Learn More"><span>Learn More</span></a></span>
<script charset="utf-8" src="https://js.hscta.net/cta/current.js">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
hbspt.cta.load(762525, 'dcad7adb-3095-4445-ab32-897114fe1223', {});
// ]]></script>
</span></div>

 

The last example the one with the settings doesnt show at all.

Why is this??

Im so confused.

 

 

 

0 Me gusta
1 Respuesta 1
rachaelshaw7
Colaborador

Trying to use JQuery typeit

Have been able to make this show:

<p id="example5">&nbsp;</p>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js">// <![CDATA[

// ]]></script>
<script>// <![CDATA[
$('#example5').typeIt({ speed: 180, autoStart: false, lifelike: true,callback:secondParagraph}); function secondParagraph(){ $('#example5').typeIt({ speed: 200, autoStart: false, lifelike: true}).tiType('Need a Digital Copywriter?') .tiPause(550).tiSettings({speed: 700, lifelike: true}).tiType(' ...').tiPause(510).tiSettings({speed: 80, lifelike: true}).tiBreak().tiType('Compelling.').tiBreak().tiPause(750).tiType(' Customised Content.').tiSettings({speed: 100, lifelike: true}).tiBreak().tiPause(750).tiSettings({speed: 130, lifelike: true}).tiType('Refreshed Weekly.').tiBreak().tiPause(800).tiSettings({speed: 130, lifelike: true}).tiType ('We Schedule All Copy For You -').tiPause(680).tiSettings({speed: 100, lifelike: true}).tiType('<strong> Easy! Order Now</strong>'); }
// ]]></script>
<div style="text-align: right;" --=""><!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-dcad7adb-3095-4445-ab32-897114fe1223"><span class="hs-cta-node hs-cta-dcad7adb-3095-4445-ab32-897114fe1223" id="hs-cta-dcad7adb-3095-4445-ab32-897114fe1223" style="visibility: visible;" data-hs-drop="true"><a id="cta_button_762525_5ccfd329-acd0-499e-aa36-f4f0d7acf887" class="cta_button cta_border_button" href="https://cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=5ccfd329-acd0-499e-aa36-f4f0d7acf..." cta_dest_link="http://design-assets.hubspot.com/stratus/two-column-right-landing-page" title="Learn More"><span>Learn More</span></a></span>
<script charset="utf-8" src="https://js.hscta.net/cta/current.js">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
hbspt.cta.load(762525, 'dcad7adb-3095-4445-ab32-897114fe1223', {});
// ]]></script>
</span></div>

 

but will not bold the last bit??

Any Ideas?

0 Me gusta