Advertisement:

Author Topic: Fire Rock customing: visualization error  (Read 1480 times)

Offline Woden88

  • Semi-Newbie
  • *
  • Posts: 35
  • Gender: Male
Fire Rock customing: visualization error
« on: December 12, 2010, 12:41:31 PM »
I customizing template Fire Rock here url:
magmamagicmachine.it/forum

I changed only the logo image (but the name and the file position is the same of original), I don't change code or styles.
Iexplorer page debug report me one errore in page visualization:


Dettagli errore pagina Web

Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET CLR 1.1.4322)
Timestamp: Sun, 12 Dec 2010 17:34:08 UTC

Messaggio: '1' è nullo o non è un oggetto
Linea: 54
Carattere: 3
Codice: 0
URI:
Code: [Select]
http://www.magmamagicmachine.it/forum/Themes/default/scripts/fader.js[/i]

I try to exame the fader.js, but I don't understand the problem. I report you fader code:

Code: [Select]
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.
if ('currentStyle' in this.oFaderHandle)
{
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)
{
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);
}

Someone can help me pls?

Woden
Nunc per ludum dorsum nudum fero tui sceleris

Online IchBin™

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 10,930
  • Gender: Male
  • I don't speak German.
    • IchBin.us
Re: Fire Rock customing: visualization error
« Reply #1 on: December 13, 2010, 12:31:19 PM »
It looks to me like the Javascript is looking for a color code with 6 characters. If the colors being used are the shortcut color codes like #333, then maybe it throws this error. As a test, I would look at the index.css and go through and change all the short color codes to their proper long code and see if that makes the error go away. For instance, if you find any codes that look like #000 or #C00 they would be #000000 and #CC0000 respectively.
Brad "IchBin™" Grow        TinyPortal        Themes
Coding Guidelines       

Offline Woden88

  • Semi-Newbie
  • *
  • Posts: 35
  • Gender: Male
Re: Fire Rock customing: visualization error
« Reply #2 on: December 14, 2010, 06:03:35 PM »
Thanx for help me.
In the index.css I find this short codes:

#000 --> #000000
#444
#333
#FFF
#aaa
#ccc
#bbb
#feb
#999
#ddf
#555
#a70
#99a
#111

Can you  say me  corresponding long codes pls? Or link me pls a table to learn how to complete these codes.
Why the template creator in some cases use short color codes and in other not (es. it report #000000 in some raw and in other raw #000: why, if the proper long final code is the same???) ?

And finally, if I will complete these codes, no longer displays the error with the browser? Then I do not understand why I receive the error refers to another file (http://www.magmamagicmachine.it/forum/Themes/default/scripts/fader.js).

Thank you so much!
Woden
Nunc per ludum dorsum nudum fero tui sceleris

Online IchBin™

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 10,930
  • Gender: Male
  • I don't speak German.
    • IchBin.us
Re: Fire Rock customing: visualization error
« Reply #3 on: December 14, 2010, 06:39:49 PM »
Inside the fader.js is where it is trying to translate the color code (where the error occurs). To get the long color code all you have to do is double each character.

#444 = #444444
#feb = #ffeebb
#a70 = #aa7700
Brad "IchBin™" Grow        TinyPortal        Themes
Coding Guidelines       

Offline Woden88

  • Semi-Newbie
  • *
  • Posts: 35
  • Gender: Male
Re: Fire Rock customing: visualization error
« Reply #4 on: December 16, 2010, 04:08:23 PM »
Thanx IchBin! The visualization code is right now.
Thank you so much.

Woden
Nunc per ludum dorsum nudum fero tui sceleris