jQuery: HEX to RGB calculation different between browsers?

Question

The following piece of code works perfectly in all browsers, bar IE. As usual. This is what needs to happen:

1. When hovering over a link, get that link colour.

Answer 1

Don't have IE to test it, but if the issue shows only for the first time, try using setTimeout with a very small timeout (10ms or so) to call your code the second time.

Also, it might be worth just finding out what part of the code is not working - I suppose $oldColour = $(this).css('color');, but add some console.log and find out, it will probably help and you might even find out something else is happening that you don't see right now.

EDIT: Something like this:

$oldColour = $(this).css('color');
var rgb;
if($oldColour.substring(0, 3) == 'rgb') {
   rgb = getRGB($oldColour);
} else { // it's a hex
   rgb = getFromHex($oldColour);
}

where getFromHex can be something like the one from http://www.richieyan.com/blog/article.php?artID=32, modified to work as you expect:

function hex2rgb(hexStr){
    // note: hexStr should be #rrggbb
    var hex = parseInt(hexStr.substring(1), 16);
    var r = (hex & 0xff0000) >> 16;
    var g = (hex & 0x00ff00) >> 8;
    var b = hex & 0x0000ff;
    return [r, g, b];
}

Answer 2

With icyrock's help, this is what the final code looks like:

function getRGB(color) {
    var result;

    // Look for rgb(num,num,num)
    if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

    // Look for rgb(num%,num%,num%)
    if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];

    // Look for #a0b1c2
    if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];

    // Look for #fff
    if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)];
}


var $oldColour;

$('a').not('aside.meta a.notes_link, aside.meta ul li a, section.social_media a, footer a').hover(function() {
    //code when hover over
    $(this).stop(true, true);
    $oldColour = $(this).css('color');

    var rgb;

    function hex2rgb(hexStr){
        // note: hexStr should be #rrggbb
        var hex = parseInt(hexStr.substring(1), 16);
        var r = (hex & 0xff0000) >> 16;
        var g = (hex & 0x00ff00) >> 8;
        var b = hex & 0x0000ff;
        return [r, g, b];
    }


    if($oldColour.substring(0, 3) == 'rgb') {
       rgb = getRGB($oldColour);
    } else { // it's a hex
       rgb = hex2rgb($oldColour);
    }

    for (var i = 0; i < rgb.length; i++)
        rgb[i] = Math.min(rgb[i] + 30, 255);
        var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';

    $(this).animate({'color': newColor}, 500);

}, function() {
    //code when hovering away
    $(this).stop(true, true);
    $(this).animate({'color': $oldColour}, 500);
});