Need help with typing text

DooM_MonkeY

06-13-2004, 06:25 PM

Ok, I typed this really quickly and dont know if I did somthing wrong, but is there a way to make this script shorter, but be able to say my own text inside the type('text') tags?

here is the

<script>

function type() {

document.all.span1.innerHTML='H_';
setTimeout('type2()',120);
}
function type2() {

document.all.span1.innerHTML='He_';
setTimeout('type3()',120);
}
function type3() {

document.all.span1.innerHTML='Hel_';
setTimeout('type4()',120);
}
function type4() {

document.all.span1.innerHTML='Hell_';
setTimeout('type5()',120);
}
function type5() {

document.all.span1.innerHTML='Hello_';
setTimeout('type6()',120);
}
function type6() {

document.all.span1.innerHTML='Hello_ ';
setTimeout('type7()',120);
}
function type7() {

document.all.span1.innerHTML='Hello _ ';
setTimeout('type8()',120);
}
function type8() {

document.all.span1.innerHTML='Hello W_';
setTimeout('type9()',120);
}
function type9() {

document.all.span1.innerHTML='Hello Wo_';
setTimeout('type10()',120);
}
function type10() {

document.all.span1.innerHTML='Hello Wor_';
setTimeout('type11()',120);
}
function type11() {

document.all.span1.innerHTML='Hello Worl_';
setTimeout('type12()',120);
}
function type12() {

document.all.span1.innerHTML='Hello World_';
setTimeout('type13()',600);
}
function type13() {

document.all.span1.innerHTML='Hello World';
setTimeout('type12()',600);
}
</script>

<body onload="type();">

<span id="span1"></span>

I know how to make the affect but I want it shorter, I looked at the script on DYNAMIC DRIVE but couldn't figure out how i could put the _ after each letter. And maybe even be able to put that in the status area

Thank you in advance

neofibril

06-13-2004, 07:40 PM

DooM_MonkeY

06-13-2004, 08:04 PM

thank you very much that works great

neofibril

06-13-2004, 08:41 PM

One more thing: it might be better to exclude any "_" characters, other than the last one...

<script>
function type(chars)
{
var el = document.getElementById("span1");
var ih = el.innerHTML.replace(/_$/,"");
ih += chars.shift() + "_";
el.innerHTML = ih;
if(chars.length > 0)
setTimeout(function(){type(chars)}, 120);
else
blink(ih.length - 1);
}
function blink(ln)
{
var el = document.getElementById("span1");
el.innerHTML.length > ln ? el.innerHTML = el.innerHTML.replace(/_$/,"") : el.innerHTML += "_";
setTimeout(function(){blink(ln)}, 600);
}
</script>

<body onload="type('_____________'.split(''));">

<span id="span1"></span>

DooM_MonkeY

06-13-2004, 08:48 PM

THanks a lot, how come whenever I put it as a mouseover tho, it says "object does not support this property or method?"

neofibril

06-13-2004, 08:52 PM

Just change the function name(s)... "type" is the problem; its being interpreted as this.type, I think.

DooM_MonkeY

06-13-2004, 10:47 PM

wow, Works like a charm, thank you very much

neofibril

06-14-2004, 03:50 AM

This one should work better for repeated calls.

<script type="text/javascript">

var busy, blinking;

function typeWrite(el, chars)
{
if(!busy)
{
if(blinking)
clearInterval(blinking);
el = document.getElementById(el);
el.innerHTML = "";
chars = chars.split("");
var str1, str2;
busy = true;
execute();
}
function execute()
{
str1 = el.innerHTML.replace(/_$/,"");
str1 += chars.shift() + "_";
el.innerHTML = str1;
if(chars.length > 0)
setTimeout(execute, 120);
else
{
str1 = str1.length - 1;
blinking = setInterval(blink, 600);
busy = false;
}
}
function blink()
{
str2 = el.innerHTML;
str2.length > str1 ? el.innerHTML = str2.replace(/_$/,"") : el.innerHTML += "_";
}
}
</script>
<body>
<div style="background:windowtext;color:window;text-align:center"
onmouseover="typeWrite('elementId', 'Doom_Monkey')">
Mouse over...
</div>
<span id="elementId"></span>
</body>

The only thing I've noticed that breaks this is a string containing "<", or ">".

If there's a likelihood of those being entered, they should be replaced, before setting innerHTML.

DooM_MonkeY

06-15-2004, 03:23 AM

Thank u very much (again), and now I'm trying to learn the Script so I know what everything means, but what does the .split('')); stuff mean? I don't understand where that comes in?

neofibril

06-15-2004, 03:44 AM

split() is a String object (http://msdn.microsoft.com/library/en-us/script56/html/js56jsobjstring.asp) method that returns an Array object (http://msdn.microsoft.com/library/en-us/script56/html/js56jsobjarray.asp);
shift() is an Array object method, that returns a single character in this case.

DooM_MonkeY

06-15-2004, 04:08 AM

Ok, thank you (yet again lol), I've been teaching myself EVERYTHING!!! And I've yet to become anything more than a traneE when it comes to javascript so people like you (the smart ones) are going to need to help me out a lot.

thanks again

neofibril

06-15-2004, 04:32 AM

Thanks, DooM_MonkeY.
Approaching similar tasks in different ways can be rewarding;
I seem to learn something new with each attempt.
Of course, references are most helpful, as are forums like this.
Well, that's my formula: a work in progress...