typed.js
Version:
A JavaScript Typing Animation Library
2,188 lines (922 loc) • 44.4 kB
HTML
<html>
<head>
<meta charset='utf-8' />
<title> | Documentation</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link href='assets/bass.css' type='text/css' rel='stylesheet' />
<link href='assets/style.css' type='text/css' rel='stylesheet' />
<link href='assets/github.css' type='text/css' rel='stylesheet' />
</head>
<body class='documentation'>
<div class='max-width-4 mx-auto'>
<div class='clearfix md-mxn2'>
<div class='fixed xs-hide fix-3 overflow-auto max-height-100'>
<div class='py1 px2'>
<h3 class='mb0 no-anchor'></h3>
<div class='mb1'><code></code></div>
<input
placeholder='Filter'
id='filter-input'
class='col12 block input'
type='text' />
<div id='toc'>
<ul class='list-reset h5 py1-ul'>
<li><a
href='#defaults'
class=" toggle-sibling">
defaults
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#defaults.strings'
class='regular pre-open'>
.strings
</a></li>
<li><a
href='#defaults.typeSpeed'
class='regular pre-open'>
.typeSpeed
</a></li>
<li><a
href='#defaults.startDelay'
class='regular pre-open'>
.startDelay
</a></li>
<li><a
href='#defaults.backSpeed'
class='regular pre-open'>
.backSpeed
</a></li>
<li><a
href='#defaults.smartBackspace'
class='regular pre-open'>
.smartBackspace
</a></li>
<li><a
href='#defaults.shuffle'
class='regular pre-open'>
.shuffle
</a></li>
<li><a
href='#defaults.backDelay'
class='regular pre-open'>
.backDelay
</a></li>
<li><a
href='#defaults.fadeOut'
class='regular pre-open'>
.fadeOut
</a></li>
<li><a
href='#defaults.loop'
class='regular pre-open'>
.loop
</a></li>
<li><a
href='#defaults.showCursor'
class='regular pre-open'>
.showCursor
</a></li>
<li><a
href='#defaults.attr'
class='regular pre-open'>
.attr
</a></li>
<li><a
href='#defaults.bindInputFocusEvents'
class='regular pre-open'>
.bindInputFocusEvents
</a></li>
<li><a
href='#defaults.contentType'
class='regular pre-open'>
.contentType
</a></li>
<li><a
href='#defaults.onBegin'
class='regular pre-open'>
.onBegin
</a></li>
<li><a
href='#defaults.onComplete'
class='regular pre-open'>
.onComplete
</a></li>
<li><a
href='#defaults.preStringTyped'
class='regular pre-open'>
.preStringTyped
</a></li>
<li><a
href='#defaults.onStringTyped'
class='regular pre-open'>
.onStringTyped
</a></li>
<li><a
href='#defaults.onLastStringBackspaced'
class='regular pre-open'>
.onLastStringBackspaced
</a></li>
<li><a
href='#defaults.onTypingPaused'
class='regular pre-open'>
.onTypingPaused
</a></li>
<li><a
href='#defaults.onTypingResumed'
class='regular pre-open'>
.onTypingResumed
</a></li>
<li><a
href='#defaults.onReset'
class='regular pre-open'>
.onReset
</a></li>
<li><a
href='#defaults.onStop'
class='regular pre-open'>
.onStop
</a></li>
<li><a
href='#defaults.onStart'
class='regular pre-open'>
.onStart
</a></li>
<li><a
href='#defaults.onDestroy'
class='regular pre-open'>
.onDestroy
</a></li>
</ul>
</div>
</li>
<li><a
href='#htmlparser'
class="">
HTMLParser
</a>
</li>
<li><a
href='#initializer'
class="">
Initializer
</a>
</li>
<li><a
href='#typed'
class=" toggle-sibling">
Typed
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Instance members</span></li>
<li><a
href='#Typed#toggle'
class='regular pre-open'>
#toggle
</a></li>
<li><a
href='#Typed#stop'
class='regular pre-open'>
#stop
</a></li>
<li><a
href='#Typed#start'
class='regular pre-open'>
#start
</a></li>
<li><a
href='#Typed#destroy'
class='regular pre-open'>
#destroy
</a></li>
<li><a
href='#Typed#reset'
class='regular pre-open'>
#reset
</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class='mt1 h6 quiet'>
<a href='http://documentation.js.org/reading-documentation.html'>Need help reading this?</a>
</div>
</div>
</div>
<div class='fix-margin-3'>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='defaults'>
defaults
</h3>
</div>
<p>Defaults & options</p>
<div class='pre p1 fill-light mt0'>defaults</div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></code>:
Typed defaults & options
<div class='py1 quiet mt1 prose-big'>Static Members</div>
<div class="clearfix">
<div class='border-bottom' id='defaults.strings'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>strings</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>strings</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>strings</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a>)</code>
: strings to be typed
</div>
<div class='space-bottom0'>
<span class='code bold'>stringsElement</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: ID of element containing string children
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.typeSpeed'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>typeSpeed</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>typeSpeed</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>typeSpeed</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
: type speed in milliseconds
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.startDelay'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>startDelay</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>startDelay</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>startDelay</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
: time before typing starts in milliseconds
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.backSpeed'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>backSpeed</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>backSpeed</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>backSpeed</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
: backspacing speed in milliseconds
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.smartBackspace'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>smartBackspace</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>smartBackspace</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>smartBackspace</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: only backspace what doesn't match the previous string
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.shuffle'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>shuffle</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>shuffle</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>shuffle</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: shuffle the strings
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.backDelay'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>backDelay</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>backDelay</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>backDelay</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
: time before backspacing in milliseconds
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.fadeOut'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>fadeOut</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>fadeOut</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>fadeOut</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: Fade out instead of backspace
</div>
<div class='space-bottom0'>
<span class='code bold'>fadeOutClass</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: css class for fade animation
</div>
<div class='space-bottom0'>
<span class='code bold'>fadeOutDelay</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: Fade out delay in milliseconds
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.loop'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loop</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loop</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>loop</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: loop strings
</div>
<div class='space-bottom0'>
<span class='code bold'>loopCount</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
: amount of loops
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.showCursor'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>showCursor</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>showCursor</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>showCursor</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: show cursor
</div>
<div class='space-bottom0'>
<span class='code bold'>cursorChar</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: character for cursor
</div>
<div class='space-bottom0'>
<span class='code bold'>autoInsertCss</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: insert CSS for cursor and fadeOut into HTML
<head>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.attr'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>attr</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>attr</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>attr</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: attribute for typing
Ex: input placeholder, value, or just HTML text
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.bindInputFocusEvents'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>bindInputFocusEvents</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>bindInputFocusEvents</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>bindInputFocusEvents</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
: bind to focus and blur if el is text input
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.contentType'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>contentType</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>contentType</div>
<div class='py1 quiet mt1 prose-big'>Properties</div>
<div>
<div class='space-bottom0'>
<span class='code bold'>contentType</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
: 'html' or 'null' for plaintext
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onBegin'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onBegin(self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Before it begins typing</p>
<div class='pre p1 fill-light mt0'>onBegin(self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onComplete'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onComplete(self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>All typing is complete</p>
<div class='pre p1 fill-light mt0'>onComplete(self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.preStringTyped'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>preStringTyped(arrayPos, self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Before each string is typed</p>
<div class='pre p1 fill-light mt0'>preStringTyped(arrayPos: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>arrayPos</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onStringTyped'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onStringTyped(arrayPos, self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>After each string is typed</p>
<div class='pre p1 fill-light mt0'>onStringTyped(arrayPos: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>arrayPos</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onLastStringBackspaced'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onLastStringBackspaced(self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>During looping, after last string is typed</p>
<div class='pre p1 fill-light mt0'>onLastStringBackspaced(self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onTypingPaused'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onTypingPaused(arrayPos, self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Typing has been stopped</p>
<div class='pre p1 fill-light mt0'>onTypingPaused(arrayPos: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>arrayPos</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onTypingResumed'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onTypingResumed(arrayPos, self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Typing has been started after being stopped</p>
<div class='pre p1 fill-light mt0'>onTypingResumed(arrayPos: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>arrayPos</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onReset'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onReset(self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>After reset</p>
<div class='pre p1 fill-light mt0'>onReset(self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onStop'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onStop(arrayPos, self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>After stop</p>
<div class='pre p1 fill-light mt0'>onStop(arrayPos: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>arrayPos</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onStart'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onStart(arrayPos, self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>After start</p>
<div class='pre p1 fill-light mt0'>onStart(arrayPos: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>arrayPos</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
<div class='border-bottom' id='defaults.onDestroy'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>onDestroy(self)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>After destroy</p>
<div class='pre p1 fill-light mt0'>onDestroy(self: <a href="#typed">Typed</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>self</span> <code class='quiet'>(<a href="#typed">Typed</a>)</code>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='htmlparser'>
HTMLParser
</h3>
</div>
<p>TODO: These methods can probably be combined somehow
Parse HTML tags & HTML Characters</p>
<div class='pre p1 fill-light mt0'>new HTMLParser()</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='initializer'>
Initializer
</h3>
</div>
<p>Initialize the Typed object</p>
<div class='pre p1 fill-light mt0'>new Initializer()</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='typed'>
Typed
</h3>
</div>
<p>Welcome to Typed.js!</p>
<div class='pre p1 fill-light mt0'>new Typed(elementId: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, options: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>): <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>elementId</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
HTML element ID
<em>OR</em>
HTML element
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>options</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>)</code>
options object
</div>
</div>
</div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></code>:
a new Typed object
<div class='py1 quiet mt1 prose-big'>Instance Members</div>
<div class="clearfix">
<div class='border-bottom' id='Typed#toggle'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>toggle()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Toggle start() and stop() of the Typed instance</p>
<div class='pre p1 fill-light mt0'>toggle()</div>
</section>
</div>
</div>
<div class='border-bottom' id='Typed#stop'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>stop()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Stop typing / backspacing and enable cursor blinking</p>
<div class='pre p1 fill-light mt0'>stop()</div>
</section>
</div>
</div>
<div class='border-bottom' id='Typed#start'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>start()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Start typing / backspacing after being stopped</p>
<div class='pre p1 fill-light mt0'>start()</div>
</section>
</div>
</div>
<div class='border-bottom' id='Typed#destroy'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>destroy()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Destroy this instance of Typed</p>
<div class='pre p1 fill-light mt0'>destroy()</div>
</section>
</div>
</div>
<div class='border-bottom' id='Typed#reset'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>reset(restart?)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Reset Typed and optionally restarts</p>
<div class='pre p1 fill-light mt0'>reset(restart: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?= nser)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>restart</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?= nser)</code>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src='assets/anchor.js'></script>
<script src='assets/site.js'></script>
</body>
</html>