Format JS generated text?

Question

I found the following code:

var index = 0;
var text = 'Hardcode';
// Here you can put in the text you want to make it type.
function type()
{
document.getElementById('intro1').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',200);
// The time taken for each character here is 100ms. You can change it if you want.
}

The problem is that the text only applies to a few attributes in my CSS (marked with //):

#intro1 {
font-family: 'Press Start 2P', cursive; //OK
font-size: 80px; //OK
display: block; //?
text-align: center; //OK
margin-bottom: auto;
margin-top: auto;
top: 50%;
}

I'm trying to get the text appear to the center of the page, but JavaScript ignores my placing. It worked when I typed the text directly in to the div in HTML, but when I made JavaScript do the dirty work, it messed it up.

Also, how can I add an delay to the animation (starts after interval)?

Help, please?

To add a delay use setTimeout( document.getElementById('intro1').innerHTML += text.charAt(index); index += 1; var t = setTimeout('type()',200), 500 //this is the delay); — Cam, Jan 07 '14 at 17:43
Wait, so this is CSS question? I don't see how adding text with JavaScript would make a difference. — cookie monster, Jan 07 '14 at 17:44
@cookiemonster Well it stopped working right after I made JavaScript type the text, instead of just writing it in HTML. — Claudio, Jan 07 '14 at 17:48
That's odd. I'd need to see a demo to understand what's going on. — cookie monster, Jan 07 '14 at 17:49
I tried it: the placement is exactly the same using JS vs. hardcoding. — andi, Jan 07 '14 at 17:49
@Cam Your code made it not work. Copy/pasted it. http://jsfiddle.net/p5D8G/ — Claudio, Jan 07 '14 at 17:56

em_ · Answer 1 · 2014-01-08T14:21:57.267

0

I changed the way you call your type() function in setInterval. Hopefully this answers your question.

http://jsfiddle.net/fenderistic/eHGK8/

JS

var index = 0;
var text = 'Hardcode';
// Here you can put in the text you want to make it type.
var f = setTimeout(function () {
    type()
}, 1000);

function type() {
   document.getElementById('intro1').innerHTML += text.charAt(index);
   index += 1;
   var t = setTimeout(function () {
       type()
   }, 200);
   // The time taken for each character here is 100ms. You can change it if you want.
}

CSS

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#intro1 {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family:'Press Start 2P', cursive;
font-size: 80px;
}

edited Jan 08 '14 at 14:21

answered Jan 07 '14 at 18:09

em_

2,134
2
24
39

But it still doesn't get centered. That was the main question. – Claudio Jan 07 '14 at 18:11
It is getting centered in the main window for me, was that not your question? – em_ Jan 07 '14 at 18:13
It's horizontally centered in Fiddle, but I'd need it vertical as well. – Claudio Jan 07 '14 at 18:18
#intro1 { font-family:'Press Start 2P', cursive; font-size: 80px; display: block; text-align: center; margin-bottom: auto; margin-top: auto; top: 50%; left: 35%; position: absolute; } – Cam Jan 07 '14 at 18:19
It works, tho it's a bit tricky, as for me it's left: 30%... Wonder how it look on smaller/bigger screens. – Claudio Jan 07 '14 at 18:34
@Claudio I updated the CSS, it corresponds to an answer I found here http://stackoverflow.com/a/14124125/2435402 – em_ Jan 07 '14 at 18:44
And where's the delay now? I mean, I want the animation to start after a second, not immediately. – Claudio Jan 08 '14 at 07:02
Ok, @Claudio, I made it so that the animation starts after a second (1000ms), then it will output a letter every 200ms. Is that what you wanted? – em_ Jan 08 '14 at 14:19

Format JS generated text?

1 Answers1