Geek Answers Handbook

Typed.js not working for second try

The first attempt to freeze div.logo completed successfully, and typed.js is typing a sentence. After that, when you hover over div.logo again, it does not work and does not enter anything.

<script type="text/javascript"> $( ".logo" ).hover(function() { $(this).toggleClass("clicked"); if ($('.logo').hasClass('clicked')){ $(function(){ $('.logo').css('background-position','-20vmin center'); console.log("n"); $(".logo h3").typed({ strings: ["Phoenix ^250 Programming ^250 Team"], typeSpeed: 75 }); }); } else{ $('.logo').find( "h3" ).text(""); $('.logo span').remove(); $('.logo').css('background-position','center left+1.5vmin'); } }); </script>
+5
source share
2 answers

As you can see in the source code for typed.js , the typed() function assigns some data to the target element and refuses to run if such data is installed:

 var $this = $(this), data = $this.data('typed'), // <<< options = typeof option == 'object' && option; if (!data) // <<< $this.data('typed', (data = new Typed(this, options)));

Therefore, you must disable it before calling typed() twice:

 $('.logo h3') .data('typed', null) // <<< .typed({ strings: ["Phoenix ^250 Programming ^250 Team"], typeSpeed: 75 });
+3
source

I noticed that Andrea responds, working in your case, this will ruin the effect (make it too jagged) when used with an array of strings with multiple elements.

If someone is facing the same problem as me, they can probably do what I did.

I used a counter to check if typed.js is called a second time and .logo h3 is re-added when this is done.

So, I added a wrapper.

 <div class="wrapper"> <div class="logo"><h3></h3></div> <div>

and then implemented

  if(counter==1){ $(".logo h3").typed({ strings: stringArrayWithManyElements, typeSpeed: 75 }); } else{ $('wrapper').html(''); $(".logo h3") .typed({ strings: stringArrayWithManyElements, typeSpeed: 75 }); }
0
source

More articles:


All Articles