Hi there,
I'm having this strange problem with IE that I don't know how to fix.
Tried countless things, but neither worked and I just can't understand
why this is happening, it makes no sense to me.
First things first... To assign a color to some element border I do
the following which works fine:
$('id#element').css('borderColor', '#ff0000');
Now let's say I have a variable with that string, something like this
that also works fine:
var color = '#ff0000';
$('id#element').css('borderColor', color);
Now the real problem. On my original code, I have something like the
above example, the only difference is that the "color" variable is not
manually assigned like in the example. I have a function that grabs
some colors from an external stylesheet, puts them into an array and
returns the array.
That function is called getColorsFromCSS and the code is the
following:
getColorsFromCSS: function(cssElement) {
var cssRules, cssSelector;
var colors = [];
// Which CSS rules are available in the browser?
if (document.styleSheets[0].cssRules) {
cssRules = document.styleSheets[0].cssRules;
} else {
cssRules = document.styleSheets[0].rules;
}
// Double check if the CSS rules are really available
if (cssRules) {
// Loops through each CSS selector
for (var i = 0; i < cssRules.length; i++) {
cssSelector = cssRules[i].selectorText.toLowerCase();
// Get colors from which CSS elements?
if (cssElement == 'links') {
// Gets the color value for a specific selector
switch (cssSelector.replace(/,.+/i, "")) {
case "ul#cp-block-items a:link":
colors[0] =
cssRules[i].style.color;
break;
case "ul#cp-block-items a:hover":
colors[1] =
cssRules[i].style.color;
break;
case "div#content a:link":
colors[2] =
cssRules[i].style.color;
break;
case "div#content a:hover":
colors[3] =
cssRules[i].style.color;
break;
}
//
if(colors.length == 4) return colors;
} else if (cssElement.indexOf('popup') == 0) {
// Gets the color value for a specific selector
switch (cssSelector.replace(/,.+/i, "")) {
case "div#" + cssElement:
colors[0] =
cssRules[i].style.color;
colors[1] =
cssRules[i].style.backgroundColor;
break;
}
//
if(colors.length == 2) return colors;
}
}
}
},
Yes, the function is working, meaning the values are retrieved from
the external CSS and the array is returned with all the values inside
it. I conformed this by doing an alert(popupColors[0]); before trying
to set the border color and the output was a string with the color
value (like the code below).
And my real code goes like this:
var popupColors = $.admin.getColorsFromCSS('popup-notice-error');
alert(popupColors[0]); // This outputs the color value assigned to
this array index
$('div#popup-block').css('borderColor', popupColors[0]); // But this
doesn't work :(
This is only happening in IE6/7, not on Firefox 2.0.0.12, Opera 9.26
and Safari 3.1 (Win).
Any thoughts on this?
