How to make this javascript text effect work?

Question

Yesterday I was looking for a text effect using javascript. I was pointed to this fiddle: http://jsfiddle.net/vCx6W/1/ and this is where it was posted: https://stackoverflow.com/questions/4074399/what-to-choose-for-typewriter-effect-in-javascript

I am trying to use the same thing. I added the javascript like this:

 <script type="text/javascript" src="http://code.jquery.com/
 jquery-1.4.2.min.js"></script>

 <script type="text/javascript">
 $.fn.teletype = function(opts) {
 var $this = this,
    defaults = {
        animDelay: 50
    },
    settings = $.extend(defaults, opts);

 $.each(settings.text, function(i, letter) {
    setTimeout(function() {
        $this.html($this.html() + letter);
    }, settings.animDelay * i);
 });
 };

 $(function() {
 $('#container').teletype({
    animDelay: 100,
    text: 'Now is the time for all good men to come to the aid of their country...'
 });
 });
 </script>

And this in the HTML:

 <div id="container"></div>

However, I am unable to make the text appear at all. What am I doing wrong?

works fine for me with the corrected jquery path – HashtagMarkus Dec 04 '12 at 14:58 — HashtagMarkus, Dec 04 '12 at 14:58

Arcturus · Accepted Answer · 2012-12-04T15:08:10.443

3

Perhaps use the correct jQuery framework?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Also remove the breakline after http://code.jquery.com/... ;)

Like this:

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

     <script type="text/javascript">
     $.fn.teletype = function(opts) {
     var $this = this,
        defaults = {
            animDelay: 50
        },
        settings = $.extend(defaults, opts);

     $.each(settings.text, function(i, letter) {
        setTimeout(function() {
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
     });
     };

     $(function() {
     $('#container').teletype({
        animDelay: 100,
        text: 'Now is the time for all good men to come to the aid of their country...'
     });
     });
     </script>

    </head>
    <body>

       <div id="container"></div>
    </body>
</html>

edited Dec 04 '12 at 15:08

answered Dec 04 '12 at 14:52

Arcturus

26,677
10
92
107

Remove the newline after http://code.jquery.com/ so that jquery-1.7.2 is connected ;) – Arcturus Dec 04 '12 at 14:56
Sorry I am unable to understand. You are saying there's a spacing issue? – KPO Dec 04 '12 at 14:59
What if i use this javascript in an external file? – KPO Dec 04 '12 at 14:59
Yes.. you have a return character after the `code.jquery.com/`... remove it, and it works... – Arcturus Dec 04 '12 at 14:59
OK i did exactly as you have it here but it still won't render. I am going crazy trying to get this one right. – KPO Dec 04 '12 at 15:04
Copy paste my stuff in a test.html, place the script block back in there, and it should work.. Note that IE does not want to load in scripts on local html files, so enable that, and voila ;) – Arcturus Dec 04 '12 at 15:07
I made it even easier for you.. copy paste my block into test.html, run it and be amazed ;) – Arcturus Dec 04 '12 at 15:08
Hey, yes it worked when i did another file like you suggested. I guess there's something else on my main page where it' snot rendering? I copied other javascript files for other things one by one to see if there was a culprit but not one of them is. Not sure what else can it be. – KPO Dec 04 '12 at 15:12
You can use Chrome development tools to see which javascripts give you errors.. this is not the one though ;) – Arcturus Dec 04 '12 at 15:13
the script when viewed on IE gives me an undefined error for the text effect. You mentioned to enable something. I am a bit lost not sure what to enable... – KPO Dec 05 '12 at 13:40
The letter is undefined.. please check the jquery api for more information on the each function – Arcturus Dec 05 '12 at 14:33

score 1 · Answer 2 · answered Dec 04 '12 at 15:00

1

My guess this isn't a problem with the javascript, but with loading the required resources.

I'm unable to load jquery via the url you provided:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>'

An easy way to find this is with your browser's developer tools (I use Chrome). When I open a page with this code in Chrome, press f12 to open the developer tools, and check the console, I get the error 'Failed to load resource: the server responded with a status of 404 (Not Found) for http://code.jquery.com/%20jquery-1.4.2.min.js

Also, I noticed the fiddle is using jQuery 1.7.2. If you're still having problems, try 1.7.2 instead of 1.4.2.

answered Dec 04 '12 at 15:00

Sean

626
5
12

Hey i updated to 1.7.2. I also used @arcturus's suggestion and it still won't render. – KPO Dec 04 '12 at 15:05
1

Do you have firebug, use google chrome, or anything with a javascript console? There's likely an error in there which will solve the problem. – Sean Dec 04 '12 at 15:18
Yes i have firebug. but after copying what he had above it worked. – KPO Dec 04 '12 at 15:33

How to make this javascript text effect work?

2 Answers2