Delay between fadein and fadeout in fader.js

[T-Bone225]

Hello people, I ve been trying to make this piece of code delay between a fadein and a fadeout of news texts (so that people would have enough time to read a text, because otherwise it would fadein and fadeout without any delay at all), but I just don't get what needs to be changed/added here, since the only way in JS it's via setTimeout function... I do however believe it's something in the smf_NewsFader.prototype.fade = function fade() function which is already a function, right? 

entire fader.js file

Code Select Expand


function smf_NewsFader(oOptions)
{
this.opt = oOptions;

this.oFaderHandle = document.getElementById(this.opt.sFaderControlId);

// Fade from... what text color? Default to black.
this.oFadeFrom = 'oFadeFrom' in this.opt ? this.opt.oFadeFrom : {
r: 0,
g: 0,
b: 0
};

// To which background color? Default to white.
this.oFadeTo = 'oFadeTo' in this.opt ? this.opt.oFadeTo : {
r: 255,
g: 255,
b: 255
};

// Surround each item with... anything special?
this.sItemTemplate = 'sItemTemplate' in this.opt ? this.opt.sItemTemplate : '%1$s';

// Fade delay (in milliseconds).
this.iFadeDelay = 'iFadeDelay' in this.opt ? this.opt.iFadeDelay : 5000;

// The array that contains all the lines of the news for display.
this.aFaderItems = 'aFaderItems' in this.opt ? this.opt.aFaderItems : [];

// Should we look for fader data, still?
this.bReceivedItemsOnConstruction = 'aFaderItems' in this.opt;

// The current item in smfFadeContent.
this.iFadeIndex = -1;

// Percent of fade (-64 to 510).
this.iFadePercent = 510

// Direction (in or out).
this.bFadeSwitch = false;

// Just make sure the page is loaded before calling the init.
setTimeout(this.opt.sSelf + '.init();', 1);
}

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

// Try to find the fore- and background colors.
var modern_browser = 'MozOpacity' in this.oFaderHandle.style || 'Opacity' in this.oFaderHandle.style || 'filter' in this.oFaderHandle.style;
if ('currentStyle' in this.oFaderHandle && !modern_browser)
{
oForeColor = this.oFaderHandle.currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
this.oFadeFrom = {
r: parseInt(oForeColor[1]),
g: parseInt(oForeColor[2]),
b: parseInt(oForeColor[3])
};

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

oBackColor = oBackEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
this.oFadeTo = {
r: eval('0x' + oBackColor[1]),
g: eval('0x' + oBackColor[2]),
b: eval('0x' + oBackColor[3])
};
}
else if (!('opera' in window) && 'defaultView' in document && !modern_browser)
{
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);
}

// Main fading function... called 50 times every second.
smf_NewsFader.prototype.fade = function fade()
{
if (this.aFaderItems.length <= 1)
return;

// A fix for Internet Explorer 4: wait until the document is loaded so we can use setInnerHTML().
if ('readyState' in document && document.readyState != 'complete')
{
window.setTimeout(this.opt.sSelf + '.fade();', 20);
return;
}

// Starting out?  Set up the first item.
if (this.iFadeIndex == -1)
{
setInnerHTML(this.oFaderHandle, this.sItemTemplate.replace('%1$s', this.aFaderItems[0]));
this.iFadeIndex = 1;

// In Mozilla, text jumps around from this when 1 or 0.5, etc...
if ('MozOpacity' in this.oFaderHandle.style)
this.oFaderHandle.style.MozOpacity = '0.90';
else if ('opacity' in this.oFaderHandle.style)
this.oFaderHandle.style.opacity = '0.90';
// In Internet Explorer, we have to define this to use it.
else if ('filter' in this.oFaderHandle.style)
this.oFaderHandle.style.filter = 'alpha(opacity=100)';
}

// Are we already done fading in?  If so, fade out.
if (this.iFadePercent >= 510)
this.bFadeSwitch = !this.bFadeSwitch;

// All the way faded out?
else if (this.iFadePercent <= -64)
{
this.bFadeSwitch = !this.bFadeSwitch;

// Go to the next item, or first if we're out of items.
setInnerHTML(this.oFaderHandle, this.sItemTemplate.replace('%1$s', this.aFaderItems[this.iFadeIndex ++]));
if (this.iFadeIndex >= this.aFaderItems.length)
this.iFadeIndex = 0;
}

// Increment or decrement the fade percentage.
if (this.bFadeSwitch)
this.iFadePercent -= 255 / this.iFadeDelay * 2;
else
this.iFadePercent += 255 / this.iFadeDelay * 2;

// If it's not outside 0 and 256... (otherwise it's just delay time.)
if (this.iFadePercent < 256 && this.iFadePercent > 0)
{
// Easier... also faster...
var tempPercent = this.iFadePercent / 255, rounded;

if ('MozOpacity' in this.oFaderHandle.style)
{
rounded = Math.round(tempPercent * 100) / 100;
this.oFaderHandle.style.MozOpacity = rounded == 1 ? '0.99' : rounded;
}
else if ('opacity' in this.oFaderHandle.style)
{
rounded = Math.round(tempPercent * 100) / 100;
this.oFaderHandle.style.opacity = rounded == 1 ? '0.99' : rounded;
}
else
{
var done = false;
if ('alpha' in this.oFaderHandle.filters)
{
try
{
this.oFaderHandle.filters.alpha.opacity = Math.round(tempPercent * 100);
done = true;
}
catch (err)
{
}
}

if (!done)
{
// Get the new R, G, and B. (it should be bottom + (range of color * percent)...)
var r = Math.ceil(this.oFadeTo.r + this.oFadeRange.r * tempPercent);
var g = Math.ceil(this.oFadeTo.g + this.oFadeRange.g * tempPercent);
var b = Math.ceil(this.oFadeTo.b + this.oFadeRange.b * tempPercent);

// Set the color in the style, thereby fading it.
this.oFaderHandle.style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
}
}

// Keep going.
window.setTimeout(this.opt.sSelf + '.fade();', 20);
}



[Illori]

which version of SMF are you using?

[T-Bone225]

which version of SMF are you using?

I'm using 2.0.13 sir, I think I figured something out, it seems like whatever is set in the "Fading delay between items for the news fader" in theme options, not only affects the delay between texts, but also animation time of both fadein and fade out, so fades become longer along with delays, and if you set it to wait 10 sec before next text will be shown again, animations become crazy long too