Teuta Koraqi Teuta Koraqi - 5 months ago 16
jQuery Question

TypeIt JQuery Plugin: Remove cursor when typing has completed

I'm using typeit.jquery.js plugin, when a list of paragraphs start showing one after the other. Everything works fine, just one thing I couldn't manage: when typing on specific row has completed, remove

cursor
.

Plugin has an
attribute
cursor: false
, but it takes away
cursor
from the beginning. I used same attribute in the function
callback: function(){}
, a function that executes after typing has completed, but it doesn't seem to work.

Any help would be appreciated!



$('.typeit-box3').typeIt({
strings: 'First Paaragraph',
typeSpeed: 100,
autoStart: true,
callback: function() {
$('.typeit-box4').typeIt({
strings: 'Second paragraph',
typeSpeed: 100,
autoStart: true,
callback: function(){
$('.typeit-box5').typeIt({
strings: 'Third Paragraph',
typeSpeed: 100,
autoStart: true

})
}

});
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script>
<ul>
<li class="list" focus-next>
<div class="typeit-box3"></div>
</li>
<li class="list" focus-next>
<div class="typeit-box4"></div>
</li>
<li class="list" focus-next>

<div class="typeit-box5" contenteditable></div>

</li>
</ul>




Answer

Teuta --

Happy to help with this. The cursor of each instance of TypeIt has a 'ti-cursor' class, so, to hide each cursor after typing, you just need to target the class of each instance, and throw an additional class on there that has the display set to none.

Because the cursor has inline styles, you'll need to use an !important flag.

See my example here. Notice the lines like this:

$('.typeit-box3').find('.ti-cursor').addClass('is-hidden');

Sorry for the difficulties -- I hope this helps!

$('.typeit-box3').typeIt({
  strings: 'First Paaragraph',
  typeSpeed: 100,
  autoStart: true,
  callback: function() {
  
    $('.typeit-box3').find('.ti-cursor').addClass('is-hidden');
    $('.typeit-box4').typeIt({
      strings: 'Second paragraph',
      typeSpeed: 100,
      autoStart: true,
      callback: function() {
      
      	$('.typeit-box4').find('.ti-cursor').addClass('is-hidden');
        $('.typeit-box5').typeIt({
          strings: 'Third Paragraph',
          typeSpeed: 100,
          autoStart: true

        })
      }
    });
  }
});
.is-hidden {
  display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script>
<ul>
  <li class="list" focus-next>
    <div class="typeit-box3"></div>
  </li>
  <li class="list" focus-next>
    <div class="typeit-box4"></div>
  </li>
  <li class="list" focus-next>
    <div class="typeit-box5" contenteditable></div>
  </li>
</ul>

Comments