html - TypeIt JQuery Plugin: Remove cursor when typing has completed -
i'm using typeit.jquery.js plugin, when list of paragraphs start showing 1 after other. works fine, 1 thing couldn't manage: when typing on specific row has completed, remove cursor
.
plugin has attribute
cursor: false
, takes away cursor
beginning. used same attribute in function callback: function(){}
, function executes after typing has completed, doesn't seem work.
any 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>
teuta --
happy this. cursor of each instance of typeit has 'ti-cursor' class, so, hide each cursor after typing, need target class of each instance, , throw additional class on there has display set none.
because cursor has inline styles, you'll need use !important flag.
see example here. notice lines this:
$('.typeit-box3').find('.ti-cursor').addclass('is-hidden');
sorry difficulties -- hope 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
Post a Comment