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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -