Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript and Firefox 1

Status
Not open for further replies.
trollacious

trollacious

Programmer
Sep 29, 2004
4,046
US
I just downloaded and installed Firefox last night. Doing some design this morning, I ran into a problem with Firefox (in IE it works fine) not using the value returned from a function, but the actual string that is the function call.

The actual code in the function is, with onediv retrieved with document.getElementById(divid):

var newcolor = rgb(redfrom, greenfrom, bluefrom);
onediv.style.color = newcolor;

alert(newcolor) immediately after these 2 lines produces the correct result, but alert(onediv.style.color) produces the string rgb(9, 9, 9), where 9 is the value of each of the variables passed to the rgb() function.

Any ideas what the cause of this is and what the solution is?

Lee
 
Sort by date Sort by votes
troll,

could you give a little more context, for example, the entire function? I'd like to see what you mean - I've never encountered a problem with FF.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
But I was trying to keep my code a secret from the rest of the world! :)# (bearded smiley face) I usually hate where someone dumps all sorts of code on the forum, but since you asked, here's the affected parts:

Code: 
<script type="text/javascript">
var ti=0, colorincrement=6;
var titlecolor=['#ff0000', '#0000bb', '#ff8833', '#000000', '#00aa00'];

function fadeto(divid, colorto)
{
var onediv = document.getElementById(divid);
var colorfrom = onediv.style.color;
if (colorfrom.length==0) colorfrom ='#000000';

colorfrom = colorfrom.substr(1);

var redfrom = eval('0x' + colorfrom.substr(0,2));
var greenfrom = eval('0x' + colorfrom.substr(2,2));
var bluefrom = eval('0x' + colorfrom.substr(4,2));

if (colorto.indexOf('#') == 0) colorto=colorto.substr(1);

var redto = eval('0x' + colorto.substr(0,2));
var greento = eval('0x' + colorto.substr(2,2));
var blueto = eval('0x' + colorto.substr(4,2));

var reddirection = 1;
var greendirection = 1;
var bluedirection = 1;

if (redto < redfrom) reddirection = -1;
if (greento < greenfrom) greendirection = -1;
if (blueto < bluefrom) bluedirection = -1;

if (Math.abs(redto - redfrom) <  colorincrement)
  {redfrom=redto;}
else
  {redfrom += reddirection * colorincrement;}
  
if (Math.abs(greento - greenfrom) < colorincrement)
  {greenfrom=greento;}
else
  {greenfrom += greendirection * colorincrement;}
  
if (Math.abs(blueto - bluefrom) < colorincrement)
  {bluefrom=blueto;}
else
  {bluefrom += bluedirection * colorincrement;}

var newcolor = rgb(redfrom, greenfrom, bluefrom);
onediv.style.color = newcolor;

//if (onediv.style.color.indexOf('#') == -1)
  {
//  alert(newcolor);
//  alert(onediv.style.color);
  }

var timeout = 50;
if (redfrom == redto && (greenfrom==greento && bluefrom == blueto))
  {
  ti++;
  ti %= titlecolor.length;
  colorto=titlecolor[ti];
  timeout=1000;
  }
setTimeout('fadeto("' + divid + '", "' + colorto + '")', timeout);
}

function rgb(red, green, blue)
{
var rgbcolor='';
var hexdigit='0123456789abcdef';

rgbcolor += hexdigit.charAt(Math.floor(red / 16));
rgbcolor += hexdigit.charAt(red % 16);
rgbcolor += hexdigit.charAt(Math.floor(green / 16));
rgbcolor += hexdigit.charAt(green % 16);
rgbcolor += hexdigit.charAt(Math.floor(blue / 16));
rgbcolor += hexdigit.charAt(blue % 16);

return rgbcolor;
}
setTimeout('fadeto("bigskytitle", "' + titlecolor[0] + '")', 3000);
</script>

<div id="bigskytitle">BIG SKY</div>

"bigskytitle" is the div ID, and dropping this code on a page with a div with text in it and the appropriate ID should give you the results I got. In IE 6 it works fine and changes colors over and over. This is just a first draft, so I haven't taken time to optimize it yet.

Lee

 
Upvote 0 Downvote
For some reason, colorto is not getting changed. Basically, the first time this function runs, colorto is "#ff0000". Then, if you do an alert of your setTimeout clause, you'll still see #ff0000.

Additionally, using the FireFox JavaScript debugger, I occasionally got this error:

[tt]Error: missing ; before statement
Source File: file:///c:/Documents%20and%20Settings/cory.t.arthus/Desktop/test2.html
Line: 21, Column: 2
Source Code:
0xgb[/tt]

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
troll,

you've got my agreement. this is the most baffling problem ever. i see exactly what you mean now. i'll continue researching as well, good luck finding the answer.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I got the error message to. What it means is that the color string assigned to the style.color is somehow converted to the function call text rather than the function call result. The error message is because the first character of the style.color is stripped off - the r - and the next 2 characters - gb - are being converted to a hexadecimal value, which doesn't work. That's why I put the alerts there to see what was being assigned, and discovered that newcolor was the correct value, but the style.color was the function call itself and not the value.

Thanks for checking this out for me.

Lee
 
Upvote 0 Downvote
I just put the rgb function code inline into the fadeto function and commented out the function call, and I STILL get the same error, the div.style.color value is still the string that calls the function that is now commented out. I cleared the cache, too, but that doesn't seem to help.

Code: 
var colorincrement=6;

function fadeto(divid, colorto)
{
var onediv = document.getElementById(divid);
var colorfrom = onediv.style.color;

if (colorfrom.length==0) colorfrom ='#000000';

colorfrom = colorfrom.substr(1);

var redfrom = eval('0x' + colorfrom.substr(0,2));
var greenfrom = eval('0x' + colorfrom.substr(2,2));
var bluefrom = eval('0x' + colorfrom.substr(4,2));

if (colorto.indexOf('#') == 0) colorto=colorto.substr(1);

var redto = eval('0x' + colorto.substr(0,2));
var greento = eval('0x' + colorto.substr(2,2));
var blueto = eval('0x' + colorto.substr(4,2));

var reddirection = 1;
var greendirection = 1;
var bluedirection = 1;

if (redto < redfrom) reddirection = -1;
if (greento < greenfrom) greendirection = -1;
if (blueto < bluefrom) bluedirection = -1;

if (Math.abs(redto - redfrom) <  colorincrement)
  {redfrom=redto;}
else
  {redfrom += reddirection * colorincrement;}
  
if (Math.abs(greento - greenfrom) < colorincrement)
  {greenfrom=greento;}
else
  {greenfrom += greendirection * colorincrement;}
  
if (Math.abs(blueto - bluefrom) < colorincrement)
  {bluefrom=blueto;}
else
  {bluefrom += bluedirection * colorincrement;}

//var newcolor = rgb(redfrom, greenfrom, bluefrom);

var newcolor='#';
var hexdigit='0123456789abcdef';

newcolor += hexdigit.charAt(Math.floor(redfrom / 16));
newcolor += hexdigit.charAt(redfrom % 16);
newcolor += hexdigit.charAt(Math.floor(greenfrom / 16));
newcolor += hexdigit.charAt(greenfrom % 16);
newcolor += hexdigit.charAt(Math.floor(bluefrom / 16));
newcolor += hexdigit.charAt(bluefrom % 16);

onediv.style.color = newcolor;

//if (onediv.style.color.indexOf('#') == -1)
  {
//  alert(newcolor);
//  alert(onediv.style.color);
  }

var timeout = 50;
if (redfrom == redto && (greenfrom==greento && bluefrom == blueto))
  {
  ti++;
  ti %= titlecolor.length;
  colorto=titlecolor[ti];
  timeout=1000;
  }
setTimeout('fadeto("' + divid + '", "' + colorto + '")', timeout);
}

Makes my first experience with Firefox not as sweet as what you've had, huh?

Lee
 
Upvote 0 Downvote
well, it's not actually the call to the function. I changed the function's name, but the rgb(0,0,0) persisted. This is because, if you read the link above, IE stored color values as "#123456" while FireFox stored color values as their rgb values "rgb(00,00,00)". So, you're actually retrieving the correct data, but the data that you're retrieving in FF is a string that says "rgb(......)".

So, most likely you'll need to alter your code slightly to handle this.

You could use replace and split to get the numerical red/green/blue values from that string, and go from there...

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Looks like that's what I'll have to do. Since I had a function named the same as the internal Firefox function, that confused me. I changed my function name, too, and was confused when it came up with the old function name.

Thanks for tracking that down for me. Seems funny that no one else has run across this before around here.

Lee
 
Upvote 0 Downvote
Unfortunately there doesn't seem to be any way to retreive a color value in firefox in hex form, so you have to code around it. This works in both ie and firefox:
Code: 
<script type="text/javascript">
var ti=0, colorincrement=6;
var titlecolor=['#ff0000', '#0000bb', '#ff8833', '#000000', '#00aa00'];

function fadeto(divid, colorto)
{
var onediv = document.getElementById(divid);
var colorfrom = onediv.style.color;
if (colorfrom.length==0) colorfrom ='#000000';

if (colorfrom.substr(0, 3) == 'rgb') {
   colorfrom = colorfrom.replace(/rgb\(/g, "").replace(/\)/g, "");
   hexvalue = false;
}
else {
   colorfrom = colorfrom.substr(1);
   hexvalue = true;
}

var redfrom = (hexvalue) ? eval('0x' + colorfrom.substr(0,2)) : parseInt(colorfrom.split(",")[0], 10);
var greenfrom = (hexvalue) ? eval('0x' + colorfrom.substr(2,2)) : parseInt(colorfrom.split(",")[1], 10);
var bluefrom = (hexvalue) ? eval('0x' + colorfrom.substr(4,2)) : parseInt(colorfrom.split(",")[2], 10);

if (colorto.indexOf('#') == 0) {
   colorto=colorto.substr(1);
   hexvalue = true;
}
else if (colorto.substr(0, 3) == 'rgb') {
   colorto = colorto.replace(/rgb\(/g, "").replace(/\)/g, "");
   hexvalue = false;
}
else {
   hexvalue = true;
}

var redto = (hexvalue) ? eval('0x' + colorto.substr(0,2)) : parseInt(colorfrom.split(",")[0], 10);
var greento = (hexvalue) ? eval('0x' + colorto.substr(2,2)) : parseInt(colorfrom.split(",")[1], 10);
var blueto = (hexvalue) ? eval('0x' + colorto.substr(4,2)) : parseInt(colorfrom.split(",")[2], 10);

var reddirection = 1;
var greendirection = 1;
var bluedirection = 1;

if (redto < redfrom) reddirection = -1;
if (greento < greenfrom) greendirection = -1;
if (blueto < bluefrom) bluedirection = -1;

if (Math.abs(redto - redfrom) <  colorincrement)
  {redfrom=redto;}
else
  {redfrom += reddirection * colorincrement;}
  
if (Math.abs(greento - greenfrom) < colorincrement)
  {greenfrom=greento;}
else
  {greenfrom += greendirection * colorincrement;}
  
if (Math.abs(blueto - bluefrom) < colorincrement)
  {bluefrom=blueto;}
else
  {bluefrom += bluedirection * colorincrement;}

var newcolor = rgb(redfrom, greenfrom, bluefrom);
onediv.style.color = newcolor;

//if (onediv.style.color.indexOf('#') == -1)
  {
//  alert(newcolor);
//  alert(onediv.style.color);
  }

var timeout = 50;
if (redfrom == redto && (greenfrom==greento && bluefrom == blueto))
  {
  ti++;
  ti %= titlecolor.length;
  colorto=titlecolor[ti];
  timeout=1000;
  }
setTimeout('fadeto("' + divid + '", "' + colorto + '")', timeout);
}

function rgb(red, green, blue)
{
var rgbcolor='';
var hexdigit='0123456789abcdef';

rgbcolor += hexdigit.charAt(Math.floor(red / 16));
rgbcolor += hexdigit.charAt(red % 16);
rgbcolor += hexdigit.charAt(Math.floor(green / 16));
rgbcolor += hexdigit.charAt(green % 16);
rgbcolor += hexdigit.charAt(Math.floor(blue / 16));
rgbcolor += hexdigit.charAt(blue % 16);

return rgbcolor;
}
setTimeout('fadeto("bigskytitle", "' + titlecolor[0] + '")', 3000);
</script>

<div id="bigskytitle">BIG SKY</div>

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)
 
Upvote 0 Downvote
Here's what I'm finally using, based on kaht's idea of splitting the FF rgb value into an array. Only one conditional statement to process for Firefox, and any other browsers that use the same format to store colors:

var onediv = document.getElementById(divid);
var colorfrom = onediv.style.color + '';
if (colorfrom == 'undefined') colorfrom='';
else if (colorfrom.indexOf('rgb') == 0)
{
colorfrom = colorfrom.substr(colorfrom.indexOf('(') + 1);
colorfrom = colorfrom.substr(0, colorfrom.indexOf(')'));
colorfrom = colorfrom.split(', ');
colorfrom=rgb(colorfrom[0], colorfrom[1], colorfrom[2]);
}
if (colorfrom.length==0) colorfrom ='#000000';

I haven't worked with regular expressions enough to be able to modify the last code without some research, so converted it to non-regexp string handling.

Thanks for all your help. :)#

Lee
 
Upvote 0 Downvote
*takes a bow*

for the regexp:
ex: rgb(128, 0, 255)

colorfrom.replace(/rgb\(/g, "").replace(/\)/g, "");

this will search the string and replace rgb( with "" (nothing in other words) and then will replace ) with ""

This would leave you with: 128, 0, 255 which is turned into an array easily with the .split(",") method.


-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)
 
Upvote 0 Downvote
Ok, now someone build a colorchoosr like mine that outputs an HSB chart...durn hippies, get a job ;)

barcode_1.gif
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
784
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
387
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
377
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
767
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top