Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Paccione
Michael Paccione
9,017 Points

Display letters one at a time from array in Jquery

Hi there,

I'm trying to obtain a console effect on a website. I want a sentence("One line at a time") to be displayed letter by letter not all at once. I'm on the right track but need some help.

function codein(){
        var code = ["O","n","e"," ","l","i","n","e"," ","a","t"," ","a"," ","t","i","m","e"];
        for (var i = 0; i < code.length; i++){
            sentence = code[i];
            $('#bg p').text(sentence);
        };
    };

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Michael,

One issue that you have with your code is that your sentence variable is always set to whatever the current character is. Then you overwrite the p text with that current character. Your sentence variable should be a running total of the current substring. You can initialize it to an empty string and then simply concatenate onto the end of it the current character.

Something more like this:

sentence += code[i];

Also, you should set a timer for this so that there can be some delay between characters appearing on the screen. The for loop will happen so fast that it will appear all at once.

Here's a codepen demo showing the basics of how you can set a timer for this: http://codepen.io/anon/pen/azpqmx

Here's the javascript/jQuery from that demo:

var code = ["O","n","e"," ","l","i","n","e"," ","a","t"," ","a"," ","t","i","m","e"];
var sentence = '';
var index = 0;

var intervalId = setInterval(codein, 150);

console.log("text length = " + code.length);

function codein(){
  console.log("index = " + index);
  sentence += code[index];
  $('#bg p').text(sentence);
  index++;
  if (index == code.length) {
    clearInterval(intervalId);
  }
}

The timer is set to go off every 150 milliseconds (change to what you want) and it will call the codein function each time.

At the end of the function it checks to see if the last character has been output and it clears the timer so that function won't be called anymore.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Also, if it's more convenient for you, you can store your text as a string and then use the substring method to get the current substring based on current index.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

Something like:

var code = 'One line at a time';

// and then

sentence = code.substring(0, index + 1);

This is not tested.

Michael Paccione
Michael Paccione
9,017 Points

Thanks a lot Jason! I've learned a bit from this. I had to really play around to get this to work in my animation.

I am not familiar with Interval because I used Timeouts for everything but after testing I had to put the intervalId var inside my function or else it would play the function in the beginning of my animation. Based on that I'm assuming that somehow calls the codein function as well? The other thing I had to do was to wrap the code in an if statement because it would loop and crash without it.

So I got it to work all most 100% like this. There is a problem though that once it reaches the "l" it speeds up and doesn't display each letter at a time. I'm assuming thecodein is being called in more times... What do you think it is?

        var code = ["O","n","e"," ","l","i","n","e"," ","a","t"," ","a"," ","t","i","m","e"];
        var sentence = '';
        var index = 0;

    function codein(){

        if (sentence.length < code.length) {
            var intervalId = setInterval(codein, 500);
            console.log("index = " + index);
            sentence += code[index];
            $('#bg p').text(sentence);
            index++;
              if (index == code.length) {
                clearInterval(intervalId);
              }
            $('#bg p').css('font-size','3em');
        }

        else {
            codeglow();
        }
    };
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Could you explain the animation you're trying to do?

Does the typing effect only start after a certain amount of time?

I think that you want to make sure that you're only calling setInterval once. With this code it's going to be called multiple times inside that if

I'm not sure if something else is going on with the rest of the code but you should not need that if/else.

You must be manually calling codein() somewhere to get it all started. Where are you doing that?

Michael Paccione
Michael Paccione
9,017 Points

Thanks for getting back to me Jason.

I've gone ahead and hosted the files online. You will be able to see the effect we've talked about at the end of the animation.

FIREFOX ONLY http://mpaccione.com/test/index.html

My biggest problem at this point is cross-browser compatibility. This animation only works as intended on Firefox! On Chrome and Safari there are different issues. I'd be willing to pay someone what I could if they could figure out how to deal with the cross-browser issues. I'm using a plugin called animations-tile to flip the background off the screen.

Below is this entire animation file. I'm 6 months into doing any kind of web work - it isn't as well written as it could be.

$(document).ready(function(){

    designin();


    function designin(){
        $('#bgimgbg').fadeTo( 600, 1, function() {
            $('#bgimgfg').fadeTo( 2000, 1, function() {
                $('#bgimgframe').fadeTo( 1000, 1, function() {
                    setTimeout(function(){
                        $('#design').removeClass('hide');
                        $('#design').fadeTo( 500, 1, function() {
                            setTimeout(function(){
                                designout();
                                setTimeout(function(){
                                    developin();
                                    setTimeout(function(){
                                        developout();
                                        setTimeout(function(){
                                            sfin();
                                            setTimeout(function(){
                                                sfout();
                                                setTimeout(function(){
                                                    codein();
                                                }, 3000)//Timeout Codein;
                                            }, 2800)//Timeout Sfout;
                                        }, 2000)//Timeout Sfin;
                                    }, 7200);//Timeout Developout
                                }, 5000);//Timeout Developin
                            }, 1500);//Timeout Designout
                        });
                    }, 1000);//Timeout
                });
            });
        });
    };//function

    function designout(){
        $('#bgimgframe').fadeTo( 500, 0, function(){
            fgbreak();
            setTimeout(function(){
                $('#design').fadeTo( 500, 0, function() {
                }); 
            }, 3200);//Timeouttile 
        });
    };

    function developin(){
        $('#design').addClass('hide');
        $('#develop').removeClass('hide');
        fgassemble();
        setTimeout(function(){
            $('#bgimgbg2').removeClass('hide');
            $('#bgimgbg').fadeTo( 500, 0, function() {
            });
            $('#bgimgbg2').fadeTo( 100, 1, function() {
            });
            $('#bgimgframe2').removeClass('hide');
            setTimeout(function(){
                $('#bgimgframe2').fadeTo( 500, 1, function() {
                });
            }, 500);
            setTimeout(function(){
                $('#develop').fadeTo( 500, 1, function() {
                });
            }, 1000);//Timeout      
        }, 4000);//Timeout  
    };

    function developout(){
        $('#develop').fadeTo( 500, 0, function() {
            setTimeout(function(){
                $('#bgimgframe2').fadeTo( 500, 0, function() {
                });
            }, 500);//Timeout
        });
    };

    function sfin(){
        $('#develop').addClass('hide');
        $('#sf').removeClass('hide');
        $('#sf').fadeTo( 500, 1, function() {

        });
    };

    function sfout(){
        $('#bg').css('background-color', '#000');
        $('#bgimgfg2').removeClass('hide');
        $('#sf').fadeTo( 500, 0, function() {
            $('#bgimgbg2').fadeTo( 1000, 0, function() {

            });
        });
    };

        var code = ["O","n","e"," ","l","i","n","e"," ","a","t"," ","a"," ","t","i","m","e"];
        var sentence = '';
        var index = 0;

    function codein(){

        if (sentence.length < code.length) {
            var intervalId = setInterval(codein, 500);
            console.log("index = " + index);
            sentence += code[index];
            $('#bg p').text(sentence);
            index++;
              if (index == code.length) {
                clearInterval(intervalId);
              }
            $('#bg p').css('font-size','3em').css('margin-left', '-15%');
        }

        else {
            codeglow();
        }
    };

    function codeglow(){
        $('#bgimgfg2').fadeTo( 2000, 1, function() {
        });
        $('#bgimgfg2').fadeTo( 2000, 0, function() {
        });

    };

    function codewave(){
        $('#bgimgfg2').fadeTo( 2000, 1, function() {
        });
        setTimeout(function wave(){
            $('#bgimgfr2').animate('tile', {
              "duration": 2000,
              "cols": 200,
              "effect": "bounce",
              "sequence": "lr"
            });
        console.log('wave')
        }, 3000);//Timeout
    };

    function fgbreak(){
        $('#bgimgfg').animate('tile', {

            //Flake Down & Out
              "duration": 8000,
              "rows": 1,
              "cols": 1,
              "effect": "rotate flipX flyToDown",
              "fillMode": "forwards"
        });
    };

    function fgassemble(){
        var src = "img/citybythebay3.gif";
        $('#bgimgfg').attr('src', src);

        $('#bgimgfg').animate('tile', {

        //Flake Up & In
              "duration": 8000,
              "rows": 1,
              "cols": 1,
              "effect": "rotate flipX flyFromDown",
              "fillMode": "forwards"
        });


    };

}); //Ready
Edgar Gil
Edgar Gil
13,322 Points
Edgar Gil
Edgar Gil
13,322 Points

Why you don't try. I'm not 100% sure but thas what comes to my mind right now :).

function codein(){
        var code = ["O","n","e"," ","l","i","n","e"," ","a","t"," ","a"," ","t","i","m","e"];
        for (var i = 0; i < code.length; i++){
            document.write(code[i]); // This line here
            $('#bg p').text(code); // maybe replace it with code[i] as well.
        };
    };
Michael Paccione
Michael Paccione
9,017 Points

This is a no go but thanks anyways.

Document.write output it on as the document instead of on the page. It also only outputs one letter. I tried $('#bg p').text(code) but that outputs the whole string. I've also tried it with code[i] but it cycles the whole loop first and only outputs one letter either the first or last depending on how I structure things.