Forum Moderators: open

Message Too Old, No Replies

script won't work in Netscape....... can it be made to?

Yeah, it came from MS, so that's probably the issue!

         

Shadows Papa

6:54 pm on Nov 12, 2003 (gmt 0)

10+ Year Member



DrDoc suggested I post here. Fascinating place. I've already learnt some things.
At issue - a script that I use to cycle the colors of some text on a site I manage works great in IE, but not at all in NS. Not a biggy as at least the text is there in plain black.
Here's the script guts and below that is the text it's coloring (and yes it breaks rules for CSS!):
<!-- Begin of color cycling code -->
<!----------------Global Variable Declarations----------->
var sColor1="white";
var sColor2="gray";
var iColorLoop=0;
var iCurrentCELL=0;
var bAscending=true;
<!------------------------------------------------------->
celColorChange=new Array(iCurrentCELL)
function cycleColors()
{
if (bAscending)
{
with(document.all)
celColorChange[iCurrentCELL].style.color=sColor2;
iCurrentCELL++;
if (iCurrentCELL>9)
{
bAscending=false;
iCurrentCELL=9;
}
}
else
{
with(document.all)
celColorChange[iCurrentCELL].style.color=sColor1;
iCurrentCELL--;
if (iCurrentCELL==0)
{
bAscending=true;
changeColors();
}
}
}

function changeColors()
{
switch (iColorLoop)
{
case 0:
sColor1="yellow";
sColor2="orange";
break;
case 1:
sColor1="hotpink";
sColor2="purple";
break;
case 2:
sColor1="aqua";
sColor2="blue";
break;
case 3:
sColor1="lightgreen";
sColor2="green";
}
iColorLoop++;
if (iColorLoop>8)
iColorLoop=0;
}
<!-- End of color cycling code -->

I have this line later to launch it (is there a better way?)
<SCRIPT LANGUAGE="JavaScript" type="text/JavaScript">setInterval('cycleColors()',100)</script>

The letters it colors (watch for word-wrap here! It's really all on one line on my page):
<span ID="celColorChange">v</span><span ID="celColorChange">a</span><span ID="celColorChange">r</span><span ID="celColorChange">i</span><span ID="celColorChange">e</span><span ID="celColorChange">g</span><span ID="celColorChange">a</span><span ID="celColorChange">t</span><span ID="celColorChange">e</span><span ID="celColorChange">d.</span>

The spans come first in the body, then the script, then the line that starts the script. I note that the spans MUST come before the script or it won't work even in IE. Either way, it won't work in NS.

Thoughts?

Shadows Papa

DrDoc

7:20 pm on Nov 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you tried using document.getElementById() instead of document.all?

document.all is IE proprietary :)

Shadows Papa

7:43 pm on Nov 12, 2003 (gmt 0)

10+ Year Member



I just tried the following which still works in IE, but not NS.....

if (bAscending)
{
document.getElementById()
celColorChange[iCurrentCELL].style.color=sColor2;
iCurrentCELL++;
...............
else
{
document.getElementById()
celColorChange[iCurrentCELL].style.color=sColor1;
.................

At least it's now not IE specific and didn't break it worse, but still no NS....

Shadows Papa

DrDoc

7:50 pm on Nov 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's still IE specific ;)

Try this:

document.getElementById('celColorChange')[iCurrentCELL].style.color

Shadows Papa

8:49 pm on Nov 12, 2003 (gmt 0)

10+ Year Member



Well, doc - still no work in NS, but still works in IE.
This is what I have so far:

if (bAscending)
{
document.getElementById('celColorChange')
celColorChange[iCurrentCELL].style.color=sColor2;
iCurrentCELL++;

if (iCurrentCELL>9)
{
bAscending=false;
iCurrentCELL=9;
}
}
else
{
document.getElementById('celColorChange')
celColorChange[iCurrentCELL].style.color=sColor1;
iCurrentCELL--;
if (iCurrentCELL==0)

Shadows Papa

DrDoc

9:45 pm on Nov 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's because the getElementById lines currently do nothing...

This is what I meant:

if (bAscending)
{
document.getElementById('celColorChange')[iCurrentCELL].style.color=sColor2;
iCurrentCELL++;

if (iCurrentCELL>9)
{
bAscending=false;
iCurrentCELL=9;
}
}
else
{
document.getElementById('celColorChange')[iCurrentCELL].style.color=sColor1;
iCurrentCELL--;
if (iCurrentCELL==0)

Shadows Papa

5:05 am on Nov 13, 2003 (gmt 0)

10+ Year Member



I've tried as many diffrent ways as I could think of - I even copied your example directly (accounting for web code by pasting first into notepad, then recopying and pasting into my real test file) and not a thing. It won't work in IE either.

For example, I replaced my 2 lines:
with(document.all)
celColorChange[iCurrentCELL].style.color=sColor2;

With your one line:
document.getElementById('celColorChange')[iCurrentCELL].style.color=sColor2;

And the same for sColor1 and it didn't work at all.
I even tried variations on that that appeared to make some sense (this is beyond my very simple scripting abilities).
Appreciate the attempts.

Shadows Papa

DrDoc

5:32 am on Nov 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok, this works:


<span ID="celColorChange0">v</span><span ID="celColorChange1">a</span><span ID="celColorChange2">r</span><span ID="celColorChange3">i</span><span ID="celColorChange4">e</span><span ID="celColorChange5">g</span><span ID="celColorChange6">a</span><span ID="celColorChange7">t</span><span ID="celColorChange8">e</span><span ID="celColorChange9">d</span>

<script type="text/javascript">

<!-- Begin of color cycling code -->
<!----------------Global Variable Declarations----------->
var sColor1="white";
var sColor2="gray";
var iColorLoop=0;
var iCurrentCELL=0;
var bAscending=true;
<!------------------------------------------------------->
celColorChange=new Array(iCurrentCELL)
function cycleColors() {
if(bAscending) {
if(document.getElementById) {
document.getElementById('celColorChange'+iCurrentCELL).style.color=sColor2;
}
else if(document.all) {
document.all['celColorChange'+iCurrentCELL].style.color=sColor2;
}
iCurrentCELL++;
if(iCurrentCELL>9) {
bAscending=false;
iCurrentCELL=9;
}
}
else {
if(document.getElementById) {
document.getElementById('celColorChange'+iCurrentCELL).style.color=sColor1;
}
else if(document.all) {
document.all['celColorChange'+iCurrentCELL].style.color=sColor1;
}
iCurrentCELL--;
if(iCurrentCELL==0) {
bAscending=true;
changeColors();
}
}
}

function changeColors() {
switch(iColorLoop) {
case 0:
sColor1="yellow";
sColor2="orange";
break;
case 1:
sColor1="hotpink";
sColor2="purple";
break;
case 2:
sColor1="aqua";
sColor2="blue";
break;
case 3:
sColor1="lightgreen";
sColor2="green";
break;
}
iColorLoop++;
if(iColorLoop>3) {
iColorLoop=0;
}
}

</script>

<script type="text/javascript">setInterval('cycleColors()',100)</script>

Shadows Papa

12:36 pm on Nov 13, 2003 (gmt 0)

10+ Year Member



Doc you are one determined person!
Mega-thanks. IT not only works in NS, it fixes the issue of multiple elements sharing the same ID - a no-no. I wonder - was that the issue Netscape had with it?
Anyway, I THINK I see what was done - it's set to work in IE or NS with the if statements.

I'll have one more script question - but it's going to a seperate thread so others can more easily find it.

thanks again,

Shadows Papa

HarryM

2:37 pm on Nov 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Anyway, I THINK I see what was done - it's set to work in IE or NS with the if statements

"if(document.getElementById)" selects all modern browsers including NS6+ and IE5+.

"if(document.all)" selects all IE4+ browsers, including the ones that also accept "if(document.getElementById)".

To test for NS4 browsers you would use "if(document.layers)".