SMF Development > Fixed or Bogus Bugs

News Fader bug with IE

<< < (2/2)

Arantor:
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.

emanuele:
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]

Sunburned Goose:
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.


--- Code: ---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);
}
--- End code ---

Navigation

[0] Message Index

[*] Previous page