Anyone please... This is really making me mad and I have no clue on
how to fix this stupid bug that shouldn't be happening.
If anyone as any idea, please, let me now... :(
Nazgulled wrote:
> 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?
