PDA

View Full Version : flashing type, alternating words, I am stuck

chris_angell
09-24-2002, 12:50 PM
Hello.
god, I have just got back from holiday and I have been sat here trying to code... :confused: trying

what I am trying to do is make some normal text flash fast but displaying four alternating words ie, hello my name is chris.. ??

I have

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var msgRotateSpeed = 200; var textStr = new Array();
textStr[0] = "hello";
textStr[1] = "how";
textStr[2] = "are";
textStr[3] = "You";


function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"white");
delay = 1;
link = 0;
vlink = 2;
function textflasher() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
setTimeout("linkDance()",delay*10);
}
textflasher();
// End -->
</script>
</head>

<body>

<FONT><BR><A >my text here</A></FONT>


ok this is as far as i got, I was starting to try to combine the code so it would flash and alternate the text..

can anyone help because I am stuck, there is no way I would be able to do this, well not this year .. ho ho ho

thank you .... help me :eek:
ShriekForth
09-24-2002, 04:43 PM
Hm... something like this?


<script type="text/javascript" language="JavaScript">
var textStr = new Array();
textStr[0] = "Hello,";
textStr[1] = "how";
textStr[2] = "are";
textStr[3] = "you?";
textStr[4] = "&nbsp;";

strLen = textStr.length;

var colors = new Array("red","white");
colorsLen = colors.length;

delay = 50;
loops = 0;
maxLoops = 2;
stopFlash= false;

function wordRotate(idx,loops){
if (idx > strLen-1){
idx=0;
loops++;
}
if(loops < maxLoops){
document.getElementById('Message').innerHTML = textStr[idx];
idx++;
setTimeout("wordRotate("+idx+","+loops+")",delay*10);
}
else{

document.getElementById('Message').innerHTML = "Final Message";
stopFlash = true;
}
}

function colorFlash(idx){
if (idx > colorsLen-1){
idx=0;
}
document.getElementById('Message').style.color= colors[idx];
idx++;
if(!stopFlash){
setTimeout("colorFlash("+idx+")",delay*5);
}
}

function startFlash(){
wordRotate(0,0);
colorFlash(0);
}
</script>
</head>
<body onLoad="startFlash();">

<div id="Message" style="background-color: #CCCCCC; font-size:13pt;">This Message</div>



This will only work in newer browsers. ie 5.5+ and NS6+. It could be modified to work with older browsers if someone were interested.

startFlash starts two function wordRotate, wich takes an index for the textStr, and a loop index. This is so that you can keep it from looping indefintely. That can be pretty annoying. The second function colorFlash takes an index as well that it uses on the colors array. Add colors, and words to the arrays as needed, the array lenght will be calcualted and stored as the page loads.

You can set the delay to whatever suits you, the color will change twice as fast as the delay currently. Also you can set the loop counter, currently set to 2. Also there is a final message that can be set just so that it does not end on a single word.

Anyway, play with it, and modify it to your needs if that is not quite what you were asking for.

ShriekForth



ShriekForth
ACJavascript
09-24-2002, 04:53 PM
I see shriek beat me to the finish line hehehehe :D:D

I'll put mine up to just for fun :D


---------------------------------

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var count=0;
var count2=0;
var msgRotateSpeed = 200;
var textStr = new Array();
textStr[1] = "hello";
textStr[2] = "how";
textStr[3] = "are";
textStr[4] = "You";

var totalTextStr=4

var colors=new Array()
colors[1]="red"
colors[2]="blue"
colors[3]="green"
colors[4]="purple"

var totalColors=4

function initiate(){

if(count==totalTextStr){
count=1
}else{
count=count+1
}
if(count2==totalColors){
count2=1
}else{
count2=count2+1
}
document.all.text.innerHTML="<font color='"+colors[count2]+"'>"+textStr[count]+"</font>"

setTimeout("initiate()",1000)
}

window.onload=initiate
</script>
</head>

<body>

<div id="text"></div>
-----------------------------

It pretty much does the same thing as shreik but its a little different...