https://github.com/mathieuloutre/jquery-typewrite
Type character by character the content of an HTML element
https://github.com/mathieuloutre/jquery-typewrite
Last synced: 8 months ago
JSON representation
Type character by character the content of an HTML element
- Host: GitHub
- URL: https://github.com/mathieuloutre/jquery-typewrite
- Owner: MathieuLoutre
- License: mit
- Created: 2014-03-31T17:44:24.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-04-02T17:41:08.000Z (about 12 years ago)
- Last Synced: 2025-09-13T14:36:02.525Z (9 months ago)
- Language: JavaScript
- Size: 164 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery-typewrite
> Type the content of an HTML element, character by character
## Why?
There's a few plugins out there allowing you to type some text character by character, however I haven't been able to find one which would allow my to type HTML elements along with the text. You can even nest the HTML elements inside and it will still work.
## How?
It replaces all the HTML tags inside the element with a placeholder character. When finding this character whilst typing the text, it will insert the element and call `.typewrite()` on it recursively and wait until the context of the element is typed out to continue typing the rest of the text.
## Usage
Install using bower: `bower install jquery-typewrite`
Or using npm: `npm install jquery-typewrite`
Or just by downloading the [tarball](https://github.com/MathieuLoutre/jquery-typewrite/archive/master.zip)
The `.typewrite()` function allows a callback which will be called once all the text has been typed.
```js
$("#my-novel").typewrite();
$("#my-short-story").typewrite(function() { console.log('done'); });
```
There is also a `.stopTypewrite()` which will render all the content immediately and call the callback if one has been set.
```js
$("#my-novel").stopTypewrite();
```
### Options
#### options.delay
Type: `Integer`
Default: `60`
The amount of time, in milliseconds, between each character.
#### options.placeholder
Type: `String`
Default: `¶`
The character used for replacing HTML tags. If you wish to use the default character `¶` in your text, you can choose your own by setting this option.
If you set this option don't forget to set it too if you call `.stopTypewrite()`.
```js
$("#my-novel").typewrite({ delay: 180 }, function () {
console.log("All the text has been typed");
});
```
## Changelog
- 0.1.0 - First release