Got jQuery and t.js loaded?*js* $(elm).t();
|_ most basic usage; reads elm's .html(), types
*js* $(elm).t({speed:30[,...]});
|_ with custom settings
*js* $(elm).t('text/html to type'[,{...}]);
|_ types given string (2nd param: settings)
Add content / pause typing*js* $(elm).t('add','<br/>new line added.');
alt.: $(elm).a(...);
|_ adds content to non-paused/non-typing elm
*js* $(elm).t('pause'[,bool]);
alt.: $(elm).p([bool]);
|_ pauses typing (toggles if TRUE/FALSE omitted)
<del>, <ins>, <kbd> and <s> (arrow_forwardHypertyping Markup Language)
Unlike other typewriter scripts, t.js provides an easy,
HTML tag-based solution to perform basic editing ops
undo Deleting*html* Hello! <del>Moon</del>Sun is up.
|_ deletes 'Moon' (by default, t.js delays 0.25s before removing)
*html* Hello! <del>Moon<ins>2</ins></del>Sun is up.
|_ custom del-delay: numeric-filled <ins> inside <del>
*html* <del>Highlighted text<s>red,white</s></del>
|_ text selection: <s> inside <del>
(comma seperated background/forground values)
*html* <del>*</del>
|_ '*' clears everything typed before
(still stored in case of settingsrepeating)
---
Note:
Except <s> and <ins>, <del> doesn't handle nested HTML (dropped)
watch_later Delaying/Inserting*html* Please wait a few seconds..<ins>5.5</ins>Thanks!
|_ delays/pauses typing for five and a half second
*html* Very <ins>fast delivery of <u>content</u></ins> here.
|_ non-numeric filled <ins>: inserts content instantly
keyboard Mistyping*html* <kbd>typing errors here</kbd>
|_ will apply setting's settingsmistype rate
(if settingsmistype is defined, though no <kbd> occurrence,
mistyping extends to entire typing content — in reverse,
settingsmistype will be set to 10)
restore Speed change*html* Yay! <s>10</s> Fast typing now.
|_ sets typing speed to 10ms (numeric-filled <s> tag outside <del>)
(or, via method: *js* $(elm).t('speed',ms) resp. *js* $(elm).s(ms))
Hints / tips* Unset default/unwantend styles with CSS:
*css* ins,del{text-decoration:none;}
kbd{font-family:inherit;}
s{display:none;}* To avoid flashing of to-type-content on page load,
it's recommended to set elm's style to
*css* {visibility:hidden;} or {display:none;}
(also, for block elements, it's recommended to set their
*css* display property to *css* inline-block
to keep caret fitting - if necessary)
* To avoid typing activity slow down on browser
tab/window switch, just include HackTimer (see Issue #1)
into your page (on top of all other scripts):
<script type="text/javascript" src="HackTimer.min.js"></script>
<script type="text/javascript" src="HackTimerWorker.min.js"></script>
Note: You can also force typing activity to
pause by setting settingspause_on_tab_switch* Event handlers: Use jQuery's .on to have event handlers
(re)attached:
*js* $(document).on('click','#typing-elm #child_elm',
function(){console.log('clicked!');});*settingspause_on_click and clickable child elms:
To retain typing acitivity with activated settingspause_on_click
when clicking specific child elms, just add
data-click="1" attribute to 'em
How to?* Stop caret blinking / hide caret at run-time
See Issue #5* Stop beeping at run-time
*js* $(elm).data('beep',false);