Code Monkey home page Code Monkey logo

t.js's Introduction

jQuery.Typewriter w/ nice features

  • t.js can type HTML, mistype, repeat, insert, delete, pause, delay and 'human-like'
  • Before getting started, checkout a demo (for more examples, visit http://mn.tn/t)
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="t.min.js"></script>

$(function(){
$(elem).t([content,]{

//Basic settings
speed:75,          // typing speed (ms)
speed_vary:false,  // 'human-like' (bool)
delay:false,       // delays start for (N.)Ns
mistype:false,     // mistyping: 1:N per char
locale:'en',       // keyboard layout; 'en', 'de'
caret:true,        // caret (HTML); default (TRUE): ▎
blink:false,       // blink; if TRUE, 10ms or N ms
tag:'span',        // wrapper (.t-container/.t-caret)
repeat:false,      // if TRUE, infinite or N times

//Callbacks
init:function(elem){}, 
typing:function(elem,chars_total,chars_left,char){},
fin:function(elem){}

});});

//Methods
$(elem).t('add',content);         // adds content
$(elem).t('pause'[,true/false]);  // pauses typing (toggles if 2nd param omitted)

//Data/properties
$(elem).data('t');                // TRUE if initialised
$(elem).data('is_typing');        // (bool)
$(elem).data('pause');            // (bool)

Let's type

  • $(elem).t(); ∟ the most basic usage; reads elem's .html(), types
  • $(elem).t({speed:30[,..]}); ∟ same as above but with settings
  • $(elem).t('msg'[,{settings}]); ∟ types 'msg' (2nd, optionally param: settings)

Adding content / pause typing

  • $(elem).t('add','msg'); ∟ adds the string 'msg'
  • $(elem).t('pause'[,(bool)]);

Del/Ins: Special treatment

  • <del>Moon</del>Sun is up ∟ removes/deletes 'Moon'
  • Foobar <del>*</del>Hello! ∟ '*' deletes everything typed before; 'clearing'
  • <del>Moon<ins>2.5</ins></del>Sun is up ∟ waits 2.5s before removing (having an numeric-filled <ins> tag inside <del>)
  • Hold on!<ins>5</ins><br/>OK. ∟ delays typing for 5 seconds
  • Very <ins><strong>fast</strong> delivery</ins> of content. ∟ non-numeric: inserts content instantly

Notes

  • Avoid additional HTML tags -- except <ins> -- inside <del>, instead, for basic styling, wrap or set attributes (<del class="red">text</del>)
  • You can comment-out since t.js also parses for this, e.g. Foo<!--<del>moo</del>-->bar or, for delaying-only-invisibility, set ins{display:none;}
  • Unset <del>'s strike-through-style with CSS > del{text-decoration:none;}
  • Set content-elem's CSS to {visibility:hidden;} or {display:none;} to avoid flashing

Event-handling

  • To (re)attach events on typed content, simply use $(document).on(event,elem,function(){[...]});

t.js's People

Stargazers

Lugo          ·.·.·.·.·.·.·.·.·.·.·.·.·.·.         善  心 .·.·.·.·.·.·.·.·.·.·.·.·.·.  avatar

Watchers

Lugo          ·.·.·.·.·.·.·.·.·.·.·.·.·.·.         善  心 .·.·.·.·.·.·.·.·.·.·.·.·.·.  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.