TypedJQ-rails

This gem is Typed.js v1.1.4 for rails.

View the live demo and you'll know how awsome it is, let's use it now! 😎

Version Notice

This Gem is provided Typed.js v1.1.4(this ver is still in jquery), but the newest version of Typed.js is .

Maybe take a day to update this 😄

Demo With Rails5 Project

Here is a very simple demo on rails 5.

Installation

1. Add this line to your Gemfile:

gem 'typedjq-rails'

And then $ bundle it, or install it yourself as:

$ gem install typedjq-rails

2. Add require to your application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
...
//= require typed
//= require turbolinks

Usage

HTML tags 💬

# Example in coffeescript
$(".yourelement").typed
    string: ["Typed.js is a <strong>jQuery</strong> plugin."]
    contentType: 'html' # or 'text'

Strings from static HTML (SEO Friendly) 💬

# Example in coffeescript
$("#your-typed-bar").typed
    stringsElement: $("#your-typed-strings")

And you must wrap each string in the typed-strings div with a <p>

Now you can wrap the children element in the typed-strings!

/ Example in haml
#your-typed-strings
    %p= "Typed.js is a <strong>jQuery</strong> plugin."
    %p= "It <em>types</em> out sentences."
    %h1= "This is h1 line, can be typed now."
    %span= "Typed.js is really awesome."
%span#your-typed-bar

Line Breaks 💬

• contentType: 'html'

# Example in coffeescript
$(".yourelement").typed
    strings: ["Sentence with <br>line break."]

• contentType: 'text'

Use white-space: pre in your typed text element, and then \n when typing out the strings.

/ Example in haml
%span#yourelement{ style: "white-space:pre" }

# Example in coffeescript
$("#yourelement").typed
    strings: ["Sentence with \n line break."]

Type Pausing 💬

# Example in coffeescript
$("#yourelement").typed
    strings: ["First ^1000 sentence.", "Second sentence."]
    # Waits 1000ms after typing "First"

Customization 💬

# Example in coffeescript
$("#yourelement").typed
    strings: ["First sentence.", "Second sentence."]
    
    # Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
    stringsElement: null
    
    # typing speed
    typeSpeed: 0
    
    # time before typing starts
    startDelay: 0
    
    # backspacing speed
    backSpeed: 0
    
    # shuffle the strings
+   shuffle: false
    
    # time before backspacing
    backDelay: 500
    
    # loop
    loop: false
    
    # false = infinite
    loopCount: false
    
    # show cursor
    showCursor: true
    
    # character for cursor
    cursorChar: "|"
    
    # attribute to type (null == text)
    attr: null
    
    # either html or text
    contentType: 'html'
    
    # call when done callback function
    callback: function() {}
    
    # starting callback function before each string
    preStringTyped: function() {}
    
    # callback for every typed string
    onStringTyped: function() {}
    
    # callback for reset
    resetCallback: function() {}

And if you really want to get more custom, please check Super Custom in Typed.js.

License

The gem is available as open source under the terms of the MIT License.