...

View Full Version : Need help with typing text



DooM_MonkeY
06-13-2004, 07: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, 08:40 PM
<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();
}
function blink()
{
var el = document.getElementById("span1");
/_/.test(el.innerHTML) ? el.innerHTML = el.innerHTML.replace(/_/,"") : el.innerHTML += "_";
setTimeout(blink, 600);
}
</script>

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

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

The first code I had above was using an unnecessary function (just for a test); that's been removed now...

DooM_MonkeY
06-13-2004, 09:04 PM
thank you very much that works great

neofibril
06-13-2004, 09: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, 09: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, 09: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, 11:47 PM
wow, Works like a charm, thank you very much

neofibril
06-14-2004, 04: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, 04: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, 04: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, 05: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, 05: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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum