huyipeng / t.js

$.Typewriter w/ nice features like HTML support

jQuery.Typewriter w/ nice features

• t.js can type HTML, mistype, repeat, insert, delete, pause, delay and 'human-like'
• Before getting started, checkout a demo (for more examples, visit http://mn.tn/t)

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="t.min.js"></script>

$(function(){
$(elem).t([content,]{

//Basic settings
speed:75,          // typing speed (ms)
speed_vary:false,  // 'human-like' (bool)
delay:false,       // delays start for (N.)Ns
mistype:false,     // mistyping: 1:N per char
locale:'en',       // keyboard layout; 'en', 'de'
caret:true,        // caret (HTML); default (TRUE): ▎
blink:false,       // blink; if TRUE, 10ms or N ms
tag:'span',        // wrapper (.t-container/.t-caret)
repeat:false,      // if TRUE, infinite or N times

//Callbacks
init:function(elem){}, 
typing:function(elem,chars_total,chars_left,char){},
fin:function(elem){}

});});

//Methods
$(elem).t('add',content);         // adds content
$(elem).t('pause'[,true/false]);  // pauses typing (toggles if 2nd param omitted)

//Data/properties
$(elem).data('t');                // TRUE if initialised
$(elem).data('is_typing');        // (bool)
$(elem).data('pause');            // (bool)

Let's type

• $(elem).t(); ∟ the most basic usage; reads elem's .html(), types
• $(elem).t({speed:30[,..]}); ∟ same as above but with settings
• $(elem).t('msg'[,{settings}]); ∟ types 'msg' (2nd, optionally param: settings)

Adding content / pause typing

• $(elem).t('add','msg'); ∟ adds the string 'msg'
• $(elem).t('pause'[,(bool)]);

Del/Ins: Special treatment

• <del>Moon</del>Sun is up ∟ removes/deletes 'Moon'
• Foobar <del>*</del>Hello! ∟ '*' deletes everything typed before; 'clearing'
• <del>Moon<ins>2.5</ins></del>Sun is up ∟ waits 2.5s before removing (having an numeric ins tag inside del)
• Hold on!<ins>5</ins><br/>OK. ∟ delays typing for 5 seconds
• Very <ins><strong>fast</strong> delivery</ins> of content. ∟ non-numeric: inserts content instantly

Notes

• Avoid additional HTML tags inside <del>, instead--for basic styling--wrap or set attributes (<del class="red">text</del>)
• You can comment-out since t.js also parses for this, e.g. Foo<!--<del>moo</del>-->bar or, for delaying-only-invisibility, set ins{display:none;}
• Unset <del>'s strike-through-style with CSS > del{text-decoration:none;}

Event-handling

• To (re)attach events on typed content, simply use $(document).on(event,elem,function(){[...]});