blink text not working in IE

[Tracey]

Hi

I have managed to scrap together some code to make some dynamically set text blink. I use Firefox to debug by javascript, and did get it working in firefox, however this is required to run in IE (not firefox) and it doesnt work in IE.

Can someone tell my why? the "detailed" error message i get from IE is:
"invalid property value" line 9 char 12

here is the function that is failing:

var off_color = "black";
var blink_onoff = 1;
var blinkspeed= 500;
function blink(oncolor)
{
var on_color = oncolor;
	if( blink_onoff == 1) {
           document.getElementById("riskdiv").style.color = on_color;
	   blink_onoff = 0;   //THIS IS LINE 9 - DONT SEE WHY IT WOULD FAIL
	}
	else {
	   document.getElementById("riskdiv").style.color = off_color;
	   blink_onoff = 1;
	}
}

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[BillyRayPreachersSon]

Can someone tell my why? the "detailed" error message i get from IE is: "invalid property value" line 9 char 12

Line numbers given for errors in IE always seem to be off. I suspect that it relates to a different line, most likely one that uses getElementById.

Can you post the rest of your code, or a URL to it? What are you passing into the function?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Tracey]

yikes ok then

I have this (dynamically generated from my app) function in the head:

<script language="JavaScript">
var arr = new Array();
var colorarr = new Array();
arr[0] = new Array();
colorarr[0] = new Array();
arr[1] = new Array();
colorarr[1] = new Array();
arr[2] = new Array();
colorarr[2] = new Array();
arr[3] = new Array();
colorarr[3] = new Array();
arr[4] = new Array();
colorarr[4] = new Array();
arr[5] = new Array();
colorarr[5] = new Array();
arr[6] = new Array();
colorarr[6] = new Array();
arr[7] = new Array();
colorarr[7] = new Array();
arr[8] = new Array();
colorarr[8] = new Array();
arr[9] = new Array();
colorarr[9] = new Array();
arr[10] = new Array();
colorarr[10] = new Array();
arr[11] = new Array();
colorarr[11] = new Array();
arr[12] = new Array();
colorarr[12] = new Array();
arr[13] = new Array();
colorarr[13] = new Array();
arr[14] = new Array();
colorarr[14] = new Array();
arr[15] = new Array();
colorarr[15] = new Array();
arr[16] = new Array();
colorarr[16] = new Array();
arr[17] = new Array();
colorarr[17] = new Array();
arr[18] = new Array();
colorarr[18] = new Array();
arr[19] = new Array();
colorarr[19] = new Array();
arr[20] = new Array();
colorarr[20] = new Array();
arr[21] = new Array();
colorarr[21] = new Array();
arr[22] = new Array();
colorarr[22] = new Array();
arr[23] = new Array();
colorarr[23] = new Array();
arr[24] = new Array();
colorarr[24] = new Array();
arr[1][5] = "Medium";
colorarr[1][5] = "#FFFF00";
arr[1][4] = "Medium";
colorarr[1][4] = "#FFFF00";
arr[1][3] = "High";
colorarr[1][3] = "#FF0000";
arr[1][2] = "High";
colorarr[1][2] = "#FF0000";
arr[1][1] = "High";
colorarr[1][1] = "#FF0000";
arr[2][5] = "Medium";
colorarr[2][5] = "#FFFF00";
arr[2][4] = "Medium";
colorarr[2][4] = "#FFFF00";
arr[2][3] = "Medium";
colorarr[2][3] = "#FFFF00";
arr[2][2] = "High";
colorarr[2][2] = "#FF0000";
arr[2][1] = "High";
colorarr[2][1] = "#FF0000";
arr[3][5] = "Low";
colorarr[3][5] = "#00FF00";
arr[3][4] = "Medium";
colorarr[3][4] = "#FFFF00";
arr[3][3] = "Medium";
colorarr[3][3] = "#FFFF00";
arr[3][2] = "High";
colorarr[3][2] = "#FF0000";
arr[3][1] = "High";
colorarr[3][1] = "#FF0000";
arr[4][5] = "Low";
colorarr[4][5] = "#00FF00";
arr[4][4] = "Low";
colorarr[4][4] = "#00FF00";
arr[4][3] = "Medium";
colorarr[4][3] = "#FFFF00";
arr[4][2] = "Medium";
colorarr[4][2] = "#FFFF00";
arr[4][1] = "High";
colorarr[4][1] = "#FF0000";
arr[5][5] = "Low";
colorarr[5][5] = "#00FF00";
arr[5][4] = "Low";
colorarr[5][4] = "#00FF00";
arr[5][3] = "Medium";
colorarr[5][3] = "#FFFF00";
arr[5][2] = "Medium";
colorarr[5][2] = "#FFFF00";
arr[5][1] = "Medium";
colorarr[5][1] = "#FFFF00";
function setLevel(val1, val2)
 {
    document.forms["hazard"].elements["riskdiv"].value = arr[val1][val2];
    document.forms["hazard"].elements["basecolor"].value = colorarr[val1][val2];
 }    
</script>

and this function in a .js file:

var off_color = "black";
var blink_onoff = 1;
var blinkspeed= 500;
function blink(oncolor)
{
var on_color = oncolor;
	if( blink_onoff == 1) {
           document.getElementById("riskdiv").style.color = on_color;

	   blink_onoff = 0;
	}
	else {
	   document.getElementById("riskdiv").style.color = off_color;
	   blink_onoff = 1;
	}
}

and here is the relevent html:

 <Form name=hazard action="/cgi-bin/osmos.exe/hazardpost" method=post>
<table width="100%" BGCOLOR="#FFCC66"><tr bgcolor="#FFFFCC"><td bgcolor="#FF9933">
<b>Likelihood:<p/>Consequence:<p/>Significance: </b></td>
<td>
<select name="likelihood"  class="medselect" onchange="setLevel(hazard.likelihood.options[hazard.likelihood.selectedIndex].value, hazard.consequence.options[hazard.consequence.selectedIndex].value);">
<option value="-1" >[SELECT]</option>
<option value="1" >Almost Certain</option>
<option value="2" >Likely</option>
<option value="3" >Possible</option>
<option value="4" >Unlikely</option>
<option value="5" >Rare</option>
</select><p/>
<select name="consequence" class="medselect" onchange="setLevel(hazard.likelihood.options[hazard.likelihood.selectedIndex].value, hazard.consequence.options[hazard.consequence.selectedIndex].value);">
<option value="-1" >[SELECT]</option>
<option value="1" >Catastrophic</option>
<option value="2" >Major</option>
<option value="3" >Moderate</option>
<option value="4" >Minor</option>
<option value="5" >Insignificant</option>
</select><p/>
<input type="hidden" name="basecolor" id="basecolor">
<strong><input type="text" readonly  id="riskdiv" name="riskdiv">
</input></strong></td>
<script>document.getElementById("riskdiv").style.color = off_color;setInterval("blink(document.getElementById('basecolor').value)",blinkspeed);</script>
</tr>
</table>
</form>

Hopefully this will help you help me.. i was avoiding posting all that code...

thanks in advance and cheers

Tracey

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[theboyhope]

alert() your arr[val1][val2] and colorarr[val1][val2] along with your oncolor variable. I haven't tested it but I'm pretty sure you'll have "undefined" flying around all over the place.

If you can't go from there on your own I'm sure someone here will help you.

 

[BillyRayPreachersSon]

Have you thought about replacing the first 52 lines of your script section with a simple loop instead of all that bloat? Something like this:

var arr = new Array();
var colorarr = new Array();
var numColours = 24;
for (var loop=0; loop<numColours+1; loop++) {
	arr[loop] = new Array();
	colorarr[loop] = new Array();
}

All you have to change is the value assigned to "numColours".

You also have an erroneous close input tag:

<input type="text" readonly  id="riskdiv" name="riskdiv">[b]</input>[/b]

However, I would say your main problem lies with this line:

<script>document.getElementById("riskdiv").style.color = off_color;setInterval("blink(document.getElementById('basecolor').value)",blinkspeed);</script>

for two reasons:

1. You are potentially executing the "blink" function before the document has been loaded and parse. I would move all of this to the onload event of the body element:

<body onload="document.getElementById('riskdiv').style.color = off_color; setInterval('blink(document.getElementById(\'basecolor\').value);', blinkspeed);">

And 2: When initally called, the value of the form element "basecolor" has not yet been set, so there will be an undetermined value being used.

I'm sure there must be an easier way to achieve what you are aiming for - if you fancy re-writing it, explain more about what the solution is for, and I'm sure someone will be able to help.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Tracey]

Ok
Firstly, yes i have undefined variables when i load the page, that is known. once both options have been selected we can then know what our values are.

Billy.. I will describe my situation:
I have a form (generated by a Delphi cgi application) where a user enters and event. This form has 2 select combos, one for Likelihood, one for Consequence. I have a 5x5 decision grid mapping these two values to a "Risk" value. These values are mapped in a table of my Database. At current, i access the database within Delphi and dynamically string the javascript function together according to records returned.

When a user selects values in both select combos, i need to calculate the risk (lookup the record for that combination) and show the value of the risk in an <input> or similar. This text is to be red if the risk is high, yellow if the risk is medium, and green if the risk is low. the color values are also held in my database against each combination, just in case the powers that be change their mind about the colors.

Dynamically filling the text is currently working in all browsers, i have even had IE coloring the text (without the blink stuff it works perfectly to here) and blinking once back to black, but continual blinking has so far eluded me in IE, my current code works perfectly as hoped in Firefox.

Billy, i moved that code to the onload as suggested, no change in IE, however the blink STOPPED working in Firefox.



Tracey



Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[trollacious]

You could write the text into a <div> and change the color with the style there. Here's an example of changing color for text in a container other than a text input:

http://www.bigskydrivein.com

I know this text fades from one color to the next, but the principles could be used to make text blink with a setTimeout() call.

Lee

 

[Tracey]

hi troll

had a look at that, the code is practically identical except the setTimeout() method.

I looked on msdn and the only difference between the two is that setInterval is re-evaluated every interval, where the setTimeout is only evaluated once. In light of this, and the fact that using setTimeout() breaks the blinking even in Firefox, i will stick to setInterval().

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[Tracey]

ah, finally i found the problem. All i did was pre-set a "black" value into the hidden field "basecolor" and now all is working fine

thanks for your time guys

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!