Message Script

[TimFA]

I made a script that simply onMouseOver started timers to make a message, with a second to erase it. Problem is it can be activated multiple times and cause issues. I tried many different configurations with same result. I tried the if and else commands to check a hidden field, and the clearTimeout(t) but it wouldn't clear, I tried that on the onMouseOut portion so that when it goes out it clears and then starts up the going in process if the first part had worked I would've had more problems, but it was worth a shot. I know the script is clunky and not very well made, I'm sure with math I could use the message and generate a variable set for each letter or something and have it tack it on, but I suck at JavaScript. Anyways here it is:



function startOpen()
{
t=setTimeout("makeTxt('slogan_holder','(())')",10)
t=setTimeout("makeTxt('slogan_holder','((F))')",60)
t=setTimeout("makeTxt('slogan_holder','((Fsdf))')",110)
t=setTimeout("makeTxt('slogan_holder','((Fsdfs))')",160)
t=setTimeout("makeTxt('slogan_holder','((Fsdf)')",210)
t=setTimeout("makeTxt('slogan_holder','((Fsdf)')",260)
t=setTimeout("makeTxt('slogan_holder','(d')",310)
t=setTimeout("makeTxt('slogan_holder','w.e')",360)
t=setTimeout("makeTxt('slogan_holder','')",410)
t=setTimeout("makeTxt('slogan_holder','(')",460)
t=setTimeout("makeTxt('slogan_holder','()')",510)
t=setTimeout("makeTxt('slogan_holder','(()')",560)
t=setTimeout("makeTxt('slogan_holder','((m))')",610)
t=setTimeout("makeTxt('slogan_holder','((mm))')",660)
t=setTimeout("makeTxt('slogan_holder','((mmm))')",710)
t=setTimeout("makeTxt('slogan_holder','((mmmm))')",760)
t=setTimeout("makeTxt('slogan_holder','((mmmmm))')",810)
t=setTimeout("makeTxt('slogan_holder','((mmmmmm))')",860)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmm))')",910)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmm))')",960)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmm))')",1010)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmm))')",1060)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmmm))')",1110)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmmmm))')",1160)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmmmmm))')",1210)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmmmmmm))')",1260)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmmmmmmm))')",1310)
t=setTimeout("makeTxt('slogan_holder','((mmmmmmmmmmmmmmmm.))')",1360)
}


And the close is the opposite, note that makeTxt is separate. And that clearly that is not what I want written out...

Thanks for the help guys,
Tim

[jscheuer1]

Looks like a giant R. You can't just set a bunch of timeouts in a row like that and expect anything good to happen. Browsers can reliably handle one assigned timed event at a time, all of these events are assigned to t. What are you looking for, a sort of marquee or something like that where each message appears for a certain amount of time to be replaced by the next message, then perhaps starting over?

For that you would need an incrementing or decrementing loop and an array of messages.

[TimFA]

Not exactly something like onMouseOver it begins to appear then at the end after say 10 secs it will begin to disappear but someway to prevent it from messing itself up. I originally was just playing around, but I decided I liked it, so I wanted to use it. I knew that that many timeouts was a bad idea, but it works just fine until you try to mouse off and come back on immediately and things. I tried using arrays, but as I said I can't...

[jscheuer1]

If, as you say, it works until you try to mouse out and back 'too fast', if you were to provide a link to a demo, I would probably be able to figure it out. Timeouts often need to be cleared using the clearTimeout(t) method, but there has to be a way to distinguish between all the various timeouts that you have and to cancel them all when the mouse out occurs. Reducing the number of individual timeouts could probably also be done, making the whole task easier.

Generally if you have so much repetitive code, such as in your post, you are doing it wrong.

[TimFA]

Edit - link removed.

[jscheuer1]

I solved the first problem by using a div tag instead of a span tag, and giving it width. That took care of it because now you are always clearly either over the tag or not, with the span, it kept changing its width as the script ran, making the over/out state change rapidly. I added the border just to illustrate the div tag's width, it isn't required.

The second problem was solved pretty much as I said it would be, except that no array was needed. I was able to use the strings themselves to hold the data.

Feel free to ask questions:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Make Text - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#slogan_holder {
width:20em;
border:1px solid black;
}
</style>
<script type="text/javascript">
function makeTxt(id,txt){
var obj = document.getElementById(id);
obj.firstChild?obj.firstChild.data=txt:obj.appendChild(document.createTextNode(txt))
}

makeTxt.s1='Heres what you mouse over.';
makeTxt.s2='Me you him he??';
makeTxt.c=0;

function startOpen(){
clearTimeout(startClose.t)
if(makeTxt.c<makeTxt.s2.length){
var to=makeTxt.c? 50 : 10;
var t=makeTxt.s2.substring(0,++makeTxt.c);
startOpen.t=setTimeout(function(){makeTxt('slogan_holder',t);startOpen();},to);
}
}

function startClose(){
clearTimeout(startOpen.t);
if(makeTxt.c>1){
var t=makeTxt.s2.substring(0,--makeTxt.c);
startClose.t=setTimeout(function(){makeTxt('slogan_holder',t);startClose();},50);
}
else{
makeTxt.c=0;
startClose.t=setTimeout("makeTxt('slogan_holder',makeTxt.s1)",10);
}
}
startOpen.t=startClose.t=0;
</script>
</head>
<body>
<div><br>
<div onMouseOver="startOpen();" onMouseOut="startClose();" id="slogan_holder">
Heres what you mouse over.
</div>
<br>
<br>
Be sure to mouseover the BEGINNING of "Heres..." or you will see insane flashing.
Lol. - <b>Solved!</b>
<br>
Also note that some is automatic ADs, and that the flashing (from being to far out when ever you mouseover), IS NOT what I'm talking about, mouse on then off then on
again a few times fast and you'll see it. - <b>Solved!</b>
</div>
</body>
</html>

[TimFA]

Thank you very much, however I did not need the DIV fix as the thing to mouseover is small and the text is centered, in order for it to be activated it will be inside a safe zone.