Simple Machines Community Forum

I haven't been able to test this on any other browsers, but it seems IE doesn't like short color codes when it comes to the SMF fader javascript function.

Reference Topic:
http://www.simplemachines.org/community/index.php?topic=412930

I don't know enough about javascript to suggest a fix, but wanted to post for others to verify/test.

It's not only short codes, but named colours too that have this issue.

/me already fixed it in his own code, mostly by rewriting the fader to use jQuery and do it with opacity rather than fudging the colour values.

I'm not sure this is a bug in SMF. The function should be more robust though in the future.

Well, it's not a bug, in that the core software isn't afflicted by it. But it is a problem that it intentionally hinders themer creativity by explicitly requiring to find a background colour in the newsfader area when instead it could just use opacity to hide and not require a colour (which would mean patterned backgrounds aren't affected, while they are now)

"Intentionally" is not accurate.

But yes, it's not as themers-friendly as it should be.

I'd say something that by explicit design requires the themer to specify a single colour is by design flawed, and it is pretty intentional that it's using colours rather than opacity.

But I agree I was too harsh in saying that it's intentional that it makes it harder to theme.

commit 15e122ea81afdf5a03200df082af126712c2a68a
Author: emanuele
Date:   Mon Apr 30 2012

    News fader partially rewritten to make use jQuery, that should fix the problem with IE [Topic 413549]

A workaround for SMF 2.0, a parseColor function is added, and the regular expressions are removed for the color parsing in the init function.


function parseColor(color) {

    var cache
      , p = parseInt // Use p as a byte saving reference to parseInt
      , color = color.replace(/\s\s*/g,'') // Remove all spaces
    ;//var
   
    // Checks for 6 digit hex and converts string to integer
    if (cache = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(color))
        cache = [p(cache[1], 16), p(cache[2], 16), p(cache[3], 16)];
       
    // Checks for 3 digit hex and converts string to integer
    else if (cache = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])/.exec(color))
        cache = [p(cache[1], 16) * 17, p(cache[2], 16) * 17, p(cache[3], 16) * 17];
       
    // Checks for rgba and converts string to
    // integer/float using unary + operator to save bytes
    else if (cache = /^rgba\(([\d]+),([\d]+),([\d]+),([\d]+|[\d]*.[\d]+)\)/.exec(color))
        cache = [+cache[1], +cache[2], +cache[3], +cache[4]];
       
    // Checks for rgb and converts string to
    // integer/float using unary + operator to save bytes
    else if (cache = /^rgb\(([\d]+),([\d]+),([\d]+)\)/.exec(color))
        cache = [+cache[1], +cache[2], +cache[3]];
       
    // Otherwise throw an exception to make debugging easier
    else throw Error(color + ' is not supported by $.parseColor');
   
    // Performs RGBA conversion by default
    isNaN(cache[3]) && (cache[3] = 1);
   
    // Adds or removes 4th value based on rgba support
    // Support is flipped twice to prevent erros if
    // it's not defined
    return cache.slice(0,3 + !!$.support.rgba);
}

smf_NewsFader.prototype.init = function init()
{
var oForeEl, oForeColor, oBackEl, oBackColor;

// Try to find the fore- and background colors.
if ('currentStyle' in this.oFaderHandle)
{
oForeColor = parseColor(this.oFaderHandle.currentStyle.color);
this.oFadeFrom = {
r: parseInt(oForeColor[0]),
g: parseInt(oForeColor[1]),
b: parseInt(oForeColor[2])
};

oBackEl = this.oFaderHandle;
while (oBackEl.currentStyle.backgroundColor == 'transparent' && 'parentNode' in oBackEl)
oBackEl = oBackEl.parentNode;

oBackColor = parseColor(oBackEl.currentStyle.backgroundColor);
this.oFadeTo = {
r: parseInt(oForeColor[0]),
g: parseInt(oForeColor[1]),
b: parseInt(oForeColor[2])
};
}
else if (!('opera' in window) && 'defaultView' in document)
{
oForeEl = this.oFaderHandle;
while (document.defaultView.getComputedStyle(oForeEl, null).getPropertyCSSValue('color') == null && 'parentNode' in oForeEl && 'tagName' in oForeEl.parentNode)
oForeEl = oForeEl.parentNode;

oForeColor = document.defaultView.getComputedStyle(oForeEl, null).getPropertyValue('color').match(/rgb\((\d+), (\d+), (\d+)\)/);
this.oFadeFrom = {
r: parseInt(oForeColor[1]),
g: parseInt(oForeColor[2]),
b: parseInt(oForeColor[3])
};

oBackEl = this.oFaderHandle;
while (document.defaultView.getComputedStyle(oBackEl, null).getPropertyCSSValue('background-color') == null && 'parentNode' in oBackEl && 'tagName' in oBackEl.parentNode)
oBackEl = oBackEl.parentNode;

oBackColor = document.defaultView.getComputedStyle(oBackEl, null).getPropertyValue('background-color');
this.oFadeTo = {
r: parseInt(oBackColor[1]),
g: parseInt(oBackColor[2]),
b: parseInt(oBackColor[3])
};
}

// Did we get our fader items on construction, or should we be gathering them instead?
if (!this.bReceivedItemsOnConstruction)
{
// Get the news from the list in boardindex
var oNewsItems = this.oFaderHandle.getElementsByTagName('li');

// Fill the array that has previously been created
for (var i = 0, n = oNewsItems.length; i < n; i ++)
this.aFaderItems[i] = oNewsItems[i].innerHTML;
}

// The ranges to fade from for R, G, and B. (how far apart they are.)
this.oFadeRange = {
'r': this.oFadeFrom.r - this.oFadeTo.r,
'g': this.oFadeFrom.g - this.oFadeTo.g,
'b': this.oFadeFrom.b - this.oFadeTo.b
};

// Divide by 20 because we are doing it 20 times per one ms.
this.iFadeDelay /= 20;

// Start the fader!
window.setTimeout(this.opt.sSelf + '.fade();', 20);
}