t.js

t.js-0.5

$ t.js-0.5 (Nov 04, 2014) $ MIT-licensed $ ©2016 Mntn® c/o Benjamin Lips (@mntn_srv) ↓ t.js (4.8 KB) → @GitHub

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="t.min.js"></script> ^ <script type="text/javascript"> /*<![CDATA[*/ $(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) }); /*]]>*/ </script> ^ ^ ^

Demos

$('#demo').t('It\'s a <del>rainy</del>sunny day in <mark class="pink">Miami, FL</mark>.',{speed:30,speed_vary:true}); → 1 → 2 / GitHub example ^ ^

Usage

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'); $(elem).t('pause'[,(bool)]); <del> and <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 5s 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, like Foo<!--<del>moo</del>-->bar or, for delaying, set ins{display:none;} • Unset <del>'s strike-through-style with del{text-decoration:none;} Event-handling ^ To (re)attach events on typed content, use $(document).on(event,elem,function(){[...]}); ^ ^ ^