typeright

A simple javascript plugin for creating typewriter effects.

mediastuttgart.github.io/typeright

Code pattern and docs inspired by the wonderful imagesLoaded plugin from David DeSandro

Latest version

0.2.0

Documentation

09/13/13

Install

Get a packaged source file:

• typeright.pkgd.js
• typeright.pkgd.min.js

Or install via Bower:

bower install typeright

Build

First, clone a copy of the main typeRight git repository by running:

git clone git://github.com/mediastuttgart/typeright.git

Install the grunt-cli and bower packages if you haven't before. These should be done as global installs:

npm install -g grunt-cli bower

Make sure you have grunt and bower installed by testing:

grunt -version
bower -version

Enter the typeRight directory and install the Node and Bower dependencies:

cd typeright && npm install && bower install

Then run grunt to build typeRight:

grunt

The built version of typeRight will be put in the dist/ subdirectory, along with the minified copy and packaged version including dependencies.

Usage

typeRight(element, options, callback);

you can use new if you like

new typeRight(element, options, callback);

• element Element, NodeList, Array, or Selector String
• options Object, Object of options passed to the instance
• callback Function - Function triggered after all characters have been processed

Using a callback function is the same as binding it to the always event (see below).

Element

typeRight(document.querySelector('#container'), options, function (instance) {
    console.log(instance);
});

Selector string

typeRight('#container', options, function () {...});

Multiple elements

var buttons = document.querySelectorAll('.button');
typeRight(buttons, options, function () {...});

Type example

typeRight(element, {
    content: 'A simple javascript plugin for creating typewriter effects.',
    append: true,
    delay: 20,
    easing: true
});

Erase example

typeRight(element, {
    erase: true,
    delay: 40,
    easing: true
});

Options

Value	Type	Default	Description
erase	boolean	false	Type or erase characters within the given element
content	string	empty	Content to type within the given element
append	boolean	false	Append characters to an existing content
striptags	boolean	true	Strip HTML-Tags from the given content
delay	integer	100	Delay between each processed character
easing	boolean	false	Enables easing when processing characters

Events

typeRight is an Event Emitter. You can bind event listeners to events.

var typer = typeRight(element, options);
function onAlways (instance) {
    console.log('always');
}

Bind with .on()

typer.on('always', onAlways);

Unbind with .off()

typer.off('always', onAlways);

always

typer.on('always', function (instance) {
    console.log('always - all characters have been processed');
});

Triggered after all characters have been processed.

• instance TypeRight - typeRight instance

done

typer.on('done', function (instance) {
    console.log('always - all characters have been successfully processed');
});

Triggered after all characters have been successfully processed.

• instance TypeRight - typeRight instance

progress

typer.on('progress', function (instance, position, element) {
    console.log('current caret position: ' + position);
});

Triggered after a single character has been processed.

• instance TypeRight - typeRight instance
• position number - current position of the caret
• element object - element with which typeRight operates

jQuery

If you include jQuery, typeRight can be used as a jQuery Plugin.

$('#container').typeRight(options, function () {
  // callback
});

jQuery Deferred

The jQuery plugin returns a jQuery Deferred object. This allows you to use .always(), .done() and .progress(), similarly to the emitted events.

$('#container').typeRight(options)
    .always(function (instance) {
        console.log('always - all characters have been processed');
    })
    .done(function (instance) {
        console.log('always - all characters have been successfully processed');
    })
    .progress(function (instance, position, element) {
        console.log('current caret position: ' + position);
    });

RequireJS

typeRight works with RequireJS.

1. Install typeRight and its dependencies
2. Update your RequireJS paths config so it can find those modules

requirejs.config({
    paths: {
        "eventEmitter": "vendor/eventEmitter"
    }
});

MIT License

typeRight is released under the MIT License.