mattboldt/typed.js

A JavaScript Typing Animation Library

Hi there 👋

typed.js's Issues

Not possible to use for populating <input>s?

Hi there! Great plugin, however, it would be nice if I could edit content of input text tags. I guess, it is not possible without plugin modifications?

Blinking cursor is on a new line when the typed element is `p` (paragraph)

If I'm initializing the plugin on a

element, the blinking cursor is always on a line below the text

<p id="a"></p>
$("#a").typed({ strings : ["test"] });

Make into a Bower Package

Can we make this into a bower package?

Activating Typed.js on Scroll

How can i initiate the effect, when user scrolls on that particular parameter....??

stop always false

this.stop is always false, no stop method
this.stop = false;

IE issues

In IE 10, console error:

SCRIPT5042: Variable undefined in strict mode
typed.js, line 8 character 3

Removing "use strict"; causes another error...

SCRIPT65535: Argument not optional
typed.js, line 87 character 8

Any ideas?

Initialize with existing text.

It would be great if the plugin could have an option to initialize with an existing text. For example, if the following element would be blessed with typed.js plugin, it would notice that the attr option is not specified and the element contains text.

<span class="typed-text">This text will not be typed!</span>

$('.typed-text').typed({
    strings: ['This text will be typed'],
    attr: null,
    ...
});

As such, it would jump to the backspace timeout and the first action would be is to erase the default text and type out the text specified in the strings array.

Add typedjs to cdnjs

Because this library is awesome and should be available at http://cdnjs.com/

https://github.com/cdnjs/cdnjs

single < or > in strings with contenttype: html crashes browser

Hey I just discovered that when you type a single < or > sign with contentType: 'html' in one of your strings it crashes the browser (makes it freeze and makes your computer go into overdrive like the usual infinite loop bugs do). Not a big deal, just thought it would've been nice if this was stated on the README.md until it gets fixed.

Callback clears timeouts -- why?

This took me forever to debug (working around #12)

      $(".type-code").typed
        callback: ->
          setTimeout ->
            console.log("why u no fire?")
          , 1000

This never fires because Typed clears the callback (because my callback happens to return the callback ID). Explicitly returning true afterward resolves the issue, but that was really difficult to figure out.

Text direction

Hi, Thank you, this is great!
I tried to find a way for the text to be writen from right-to-left q left-to-right but not from the center to the edge.
This way I can theme this nicely with a label ahead.

Support for IE8

Which browsers are compatible?

Option to delay initial typing

It would be nice to include an option for a delayed start to the typing (just show a blinking cursor for a few seconds).

How to reinitiate the plugin?

Hi there,
I am using the plugin in multiple sections of my page,and each section has a different text and it works fine on load.Now user can see each section at a time in the page and on scroll next or previous section is shown to user. and I have to show typing effect when each section is shown but I am not able to reinitiate it.
Can you please help me out for how to reinitiate the plugin ?

Cheers
Nisar

Typed and CSS Animation performance conflicts

We've got a background that uses CSS3 transitions and keyframes to infinitely scroll it, but when we add Typed JS to the page both the Typed animation and the CSS3 animation begin to stutter. There are occasional moments where the effects are smooth, but the majority of the time the animation suffers.

I was hoping someone might have had a similar issue and found a way to overcome it?

Thanks!

Line breaks

How would we go about adding line breaks to the text? I've tried adding \n and it creates the line break in the code side (when i do inspect element in chrome) but no line break in the browser? I understand it's hard to implement full html support but line breaks seems such a simple but needed feature in comparison

Add a callback for when each string is complete

Styling typed content? Bold? Underline? etc.

How easy/difficult would it be to enable styling of typed content? i.e. change colour of words; bold words; underline words etc?

I've come across an interesting situation where this would be useful.

Remove backspace

After a lot of playing around it was quite simple to do this, just change the backspace code to the following:

backspace: function(curString, curStrPos) {

    if (this.stop === true) {
        return;
    }

    var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
    var self = this;

    self.timeout = setTimeout(function() {

        var nextString = curString.substr(0, curStrPos);
        self.el.text(nextString);

        curStrPos=0

        if (curStrPos <= self.stopNum) {
            self.arrayPos++;
            self.typewrite(self.strings[self.arrayPos], curStrPos);
        }

    }, humanize);
}

typespeed value

I wanted to create a very fast text, but I saw that after a certain value the type speed doesn't increase anymore... how can I fix the problem?

Html tags

Hello,

Thanks for this plugin, it looks great. I have one question though:
Is it possible to use html tags like
in the string?

I would like to cut off some sentences in the string that I'm typing.

Thanks a lot,
Maarten

Calls of typewrite() is unstoppable

Proof: http://jsfiddle.net/albburtsev/8CbL2/

Or try to select text after typing (double click in element).
I can't modify text after typing in element. It's bug.

Entities are not recognized until complete sequence is typed (ex. &amp; or &nbsp;)

Try using the string "Non-breaking Space" - it will show "& n b s p" then change ito a non-breaking space.

Error on Bower Install

Installed with bower packaged manager and got this error:

bower invalid-meta typed.js is missing "ignore" entry in bower.json

Here's the complete output:

bower not-cached git://github.com/mattboldt/typed.js.git#*
bower resolve git://github.com/mattboldt/typed.js.git#*
bower checkout typed.js#master
bower invalid-meta typed.js is missing "ignore" entry in bower.json
bower resolved git://github.com/mattboldt/typed.js.git#702d281ba1
bower install typed.js#702d281ba1

Install was successful but worth noting.

How use backspace() without altering the original code?

I really don't understand how to use backspace without altering the original code. The options are now well described in the readme so I guess there is no option to override it outside of the plugin code?

Help how to hide the cursor when the sentence finishes?

nocscript-fallback, alternative text for blocked javascript

I managed to do so by adding a second and hiding it within the script, maybe there could be a default value / function assigned?

Repeat Function (infinite loop)

Is there any way to create an infinite loop? I opened a discussion on StackOverflow regarding this issue, but can't figure it out.

View here:
http://stackoverflow.com/questions/19071466/repeating-js-function

Cheers,
Mike

Callback fires a bit too early

In every experiment I've run, the callback is fired just before typing completes. As a result when I try to mutate the content of the element being typed into (during the callback), the final keystroke from Typed will fire just after my callback, undoing my changes.

Trigger typing possible?

Hey! Is it somehow possible to retype the text for example on a button click?
I didn't get it work...
Something like this:

<button onClick="doFunc()">Yo</button>

function doFunc() {
    $("#yo").typed({
        strings: ["First sentence"],
        resetCallback: function() {
            $("#yo").empty();
        }
    }); 
};

Stop the cursor from blinking while typing

Hi,
Awesome plugin!
Tell me please, is there a way to disable the blinking animation of the cursor for the time while the text is being typed? It would be more like real text editors work, I guess. Thanks!

Stop/Pause typing

Hi Matt,

is there a way to stop/pause the typing on an event, for example click or mouseover?

Cheers,
Krzysztof

Line-breaking issues

When I am typing a sentence that goes outside of the parent container, Typed.JS stretches my page horizontally. I see that the project's homepage doesn't have this issue, but I can't figure out how to implement it myself.

Is it SEO friendly ?

Will the sentence be recognised correctly by google

Problem when var $j = jQuery.noConflict(); is implemented.

As title. I just found there is a problem(might be a bug?) when I was trying to plugin it. One of javascript script called "jQuery.custom.js" in my Wordpress theme(I'm not the author), and it doesn't work unless I invalid the fist line in that package. The line is 'var $j = jQuery.noConflict();'.

I think 'var $j = jQuery.noConflict();' is really common in jQuery usage. Is anyone know how to solve this problem? I appreciate =)

Cant clear text from element

I have an instance of your plugin where I am trying to have it type something out, delay for so long then do a callback that clears the box changes the line heights and then starts typing agian.... for some reason it will not clear out the box with empty() or text('') im not sure what else to try... Ive looked at your plugin and I understand it for the most part but I just dont know whats going wrong in actuality...

here is a snipit of the script.

 $('#cutSceneBlock').append("<div class='sceneBackDrop' id='HQbackDrop'>     </div>"+
                    "<div class='actorTalkBox top flexText' id='captianTalk'></div><div class='actorBox topleft' id='captianPort'></div>");
       $('.flexText').flexText({lR: 1, ratio:1});
        $("#cutSceneBlock").fadeIn(function(){
            $("#wrapFix").css("display","none");
            $(music_track1).animate({volume: 0}, 1000, function(){
                    music_track1.pause();
                    music_track1.currentTime = 0; 
                    music_track2.play();
                    $(music_track2).animate({volume: 1}, 1000);
                        $("#HQbackDrop").fadeIn(function(){
                            $("#captianTalk").fadeIn();
                            $("#captianPort").fadeIn();
                            sfx_captian_talking.play();
                            $('#captianTalk').flexText({lR: 3, ratio:3});


                            //CAPTIAN SAYS HI
                            $("#captianTalk").typed({
                                strings: ['Welcome to C.O.R.P.S. I am Captian Rynhardt!'],
                                backDelay: 600,
                                callback : function(){
                                sfx_captian_talking.pause();
                                sfx_captian_talking.currentTime = 0;
                                $("#captianTalk").text('');
                                sfx_captian_talking.play();
                                $('#captianTalk').delay(600).empty().flexText({lR: 3, ratio:1.5});
                                    $("#captianTalk").typed({
                                        strings: ['C.O.R.P.S. stands for Corperate Owned Rescue and Personal Search... I am the head of operations and will help you to success!'],
                                        callback : function(){
                                        sfx_captian_talking.pause();
                                        sfx_captian_talking.currentTime = 0;
                                        $("#captianTalk").empty();
                                        sfx_captian_talking.play();


                                        }
                                    });  

                                }
                            });




                        });

Custom stuff is not working

I'm trying this code from the website:

setTimeout(function() {

        // check string array position
        // on the first string, only delete one word
        // the stopNum actually represents the amount of chars to
        // keep in the current string. In my case it's 3.
        if (self.arrayPos == 1){
            self.stopNum = 3;
        }
        //every other time, delete the whole typed string
        else{
            self.stopNum = 0;
        }

But it's not working. It's not keeping the characters defined by stopNum and picking up where it left off.

Here is an example:

http://codepen.io/Joe_Temp/pen/yEgiz

Loop

How can I have typed loop over and over again?

operate inside HTML input placeholder tag

Is there a way I can use typed.js inside a HTML input placeholder tag? or a process to mimic the effect?

cant call it a second time

Hello,
very nice Plugin.
But i have a little problem to use it like i have to.
If i run it once, i cant call it a second time.
I want to use it on different times to different elements.
Is there a way to do that?

Cursor doesn't work with placeholder

Hi, using the plugin with the 'placeholder' attribute it doesn't create the cursor

Could you (Matt) host this script on cdnjs.com?

It'd be nice because I'm trying to build a Watch_Dogs-esk website and I wish to use the entire website with only one .html file. I'm pulling my fonts and also a jQuery library from Google but your code isn't hosted anywhere else publicly. I believe that http://cdnjs.com/ would be a good choice because it's also backed by CloudFlare and has some nice features (like automatic pulling of updates from a github repository). I'll stop now, before I sound like a advertisement but could you please upload it there? D:

Thanks in advance (if you can),
Francois.

Add feature to delete whole words instead letters.

Hey, that would be nice to see settings which will allow you switch between words and letters backspace.

For example i want to delete long sentence faster, it would be better to delete everything by words instead by letters.

[enhancement] loop function

updated code in the answer of the following stackoverflow question
http://stackoverflow.com/questions/19071466/repeating-js-function/19071753#19071753

reset() changes the element it's called on

this doesn't really make sense to me... if i have an element with a class and i attach typed to it, and then call reset.. that element gets replaced with a span with an id of undefined... is there another way to reset typed to write another string, without calling reset? or should the reset function work differently?

[request]

would like to have more options and methods:

1)destroy,pause,play, next,prev methods
2)using data attributes to set the text strings
3)load strings from json file (ajax)
4)more callback options: onbefore, onnextstring,...

Minimized version?

Is it possible to include a minification in your build process as well?

Thanks 😄

Multiple instances

Hi, when i try to use multiple instances on the same site, it doesn't work and i get strange effects. Is there a sample how to do that?
Thanks, Axel

Problems using requirejs

Hi,

I noticed there is a problem with the plugin when you're using require.js because the wrapper function tries to access a jQuery instance from the window (which does not exist in this case). I think it'd be better to keep it AMD compatible. I fixed the issue by changing the wrapper function, a simple thing.

Thanks,
Jorge L

Finish sentences on click?

So say the user doesn't feel like reading through all of it and wants the text to display on click. Kind of like when you play a game, you can press X/A or click to have all the text in the box at once. Is there anything like this implemented? I'm not sure if there is a callback function I can implement or not to have it complete on click.

Thank you!