t.js v0.9 — A lightweight (~2.71cyan,whiteMBKB gzipped+minified) $.Typewriter, cached times grade'ed at GitHubcall_made.

t.js Besides HTML tag support, t.js can deletelay2, mistype,
'paste'
and more. See some examples or repeat this.

v0.9 (Jun 04, 2017) / MIT-licensed
©2014—2017 Mntn® <https://mn.tn/> c/o Benjamin Lips



file_download t.js file_download t.min.js archive zip bundle (incl. demo.htm)





Got jQuery and t.js loaded?

$(elem).t();
subdirectory_arrow_right the most basic init; reads elem's .html(), types

$(elem).t({speed:30[,..]});
subdirectory_arrow_right same as above but with settings

$(elem).t('text to <em>type</em>.'[,{settings}]);
subdirectory_arrow_right types given string (2nd, optionally param: settings)


Adding content, pause typing

$(elem).t('add','<br/>new line added..');
subdirectory_arrow_right adds content to non-paused/non-typing elem

$(elem).t('pause'[,(true/false)]);
subdirectory_arrow_right pauses typing (toggles if 2nd param omitted)
(alt. $(elem).data('pause',(true/false));)





Unlike other typewriter scripts, t.js provides an easy, HTML tag-based solution to perform basic editing ops


delete

<del> — Deleting

Hello! <del>Moon</del>Sun is up.
subdirectory_arrow_right deletes 'Moon' (by default, t.js waits 250ms (0.25s) before removing)


<del>Moon<ins>2.5</ins></del>Sun is up.
subdirectory_arrow_right having an numeric-filled <ins> tag inside <del>: waits 2.5s before removing
(alt.: <del data-ins="2.5">Moon</del>Sun is up.


<del>*</del>
subdirectory_arrow_right '*' clears everything typed before (still stored in case of repeating)


<del>i get selected<s></s></del>
subdirectory_arrow_right having an <s> tag inside <del>: performs deleting by text selection;
by default (empty <s>), selected text highlights to lightyellow, to customize, set your own
color(s) or class name:

    <s>red</s> subdirectory_arrow_right background color: red
    <s>black,#fff</s> / <s>#faff00,#dd19ee</s> subdirectory_arrow_right comma seperated: background, color
    <s>.my_sel</s> subdirectory_arrow_right CSS class 

    You can also combine:
    <del>i get selected<s>blue,white</s><ins>2.5</ins></del>
    (alt.: <del data-ins="2.5" data-s="blue,white">i get selected</del>)



schedule

<ins> — Insert delay, 'paste'

Hold on!<ins>5</ins><br/>OK. (alt.: Hold on!<ins data-ins="5"></ins><br/>OK.)
subdirectory_arrow_right stops typing for five seconds


Very <ins>fast delivery of <u>content</u></ins> here.
subdirectory_arrow_right non-numeric filled <ins>: inserts content instantly



keyboard

<kbd> — keyboard/mistyping

Waiting for user input..<ins>1.5</ins><kbd>hello world!</kbd><br/>OK
subdirectory_arrow_right will apply setting's settingsmistype rate to 'hello world!' (keyboard layout can be defined with settingslocale;
available: en (english/default) and de (german))

Hint: if settingsmistype is defined, though no kbd tag occurrence, mistyping extends to
entire typing content - in reverse, settingsmistype will be set to 10




Notes

info Unset default styles with CSS: ins,del{text-decoration:none;}, kbd{font-family:inherit;}
info Except <ins> and <s> there shouldn't be any other HTML tags inside <del>
info To keep your HTML clean, it's possible to comment-out (A <!--<del>bad</del>-->good day.,
     <!--<ins>-->Hello world<!--</ins>-->) -- t.js will take account







To-type-content flashes on page load

info It's recommended to set your typing elem's CSS to {visibility:hidden;} or
{display:none;} to avoid


Typing activity interrupts, slows down on browser tab/window switch

info A known, common browser 'issue': setInterval (wraps typing activity) weaks on inactive windows; a simple
  workaround is to include HackTimer into your page (on top):
 
  <script type="text/javascript" src="HackTimer.min.js"></script>
<script type="text/javascript" src="HackTimerWorker.min.js"></script>


Typed elements: Events

info Use jQuery's .on to get event handlers (re)attached;
e.g., $(document).on('click','#typing-elem #child_elem',function(){console.log('clicked!');});


pause_on_click and clickable child elems

info To retain typing acitivity with activated settingspause_on_click when clicking specific
child elems, just add data-click="1" attribute to 'em


Block-level elements and caret

info In somes cases, it's advisable to set regarding elements' CSS to {display:inline-block;} to keep caret fitting


Pause typing on inactive window/tab

info Add this to your page:

$(window).on('blur focus',function(e){
if($(elm).data().is_typing)$(elm).data('pause',(e.type=='blur')?1:0);
});


Workaround: custom (delay) inserts, sub dels inside <del>

info  See t-hack.htm.





Examples

~~~~~~~~~~~~~~~
Microsoft(R) Windows 98
    (C)Copyright Microsoft Corp 1981-1998
    
c:\>
2cd tools c:\tools>1weather.exe "miami, fl" -txt Connecting 1.5...2.... It's a rainysunny day in Miami, FL. c:\tools>
$('#demo_1').t({ blink:300, caret:'\u2589', pause_on_click:true });
Hello world! I'm pink,whitedypingtyping.
$('#demo_2').t({ speed:90, blink:300, typing:function(e,char,chars_left,chars_total){ e.prev('h2').text(~~(100-(((chars_left/chars_total)*100)))+'%'); }, fin:function(e){setTimeout(function(){e.prev('h2').text('#2')},500);} });



if(/down/.test($('#c_').text()))$('#c_').trigger('click');
$('html').animate({scrollTop:(~~$('#c__').offset().top)-100},1500);

/*-------------*/

$('#c__').t({ /*'setup' part*/
delay:2,
caret:'\u2589',
pause_on_click:true
});


Tickin'
var txt=[ 'Lawsuit Filed in Death of 72-Year-Old Grandfather', 'Dodgers S.F. Struggles Continue in Blowout Loss to Giants', 'Ramona Woman, Unborn Child Die in Mother\'s Day Crash' ].join(d='1*')+d; $('#demo_4').t(txt, {repeat:true, speed:30, mistype:20, caret:'\u2593', blink:100, pause_on_click:true // data-click="1" attr in <a> prevents pause on click/tap });



if($('#demo_5').data().t) //initialised?
 $('#demo_5').t('add','
'+(~~(Math.random()*1e7))); else $('#demo_5').t('Yay.',{speed:45,speed_vary:true});