Two Color sIFR Take Two

Ed’s note: This is an outdated material. Please visit the article with a new version.

Here again Vanja reloads Two color sIFR technique–better, improved and easier to use. Here’s the article…

Based on the suggestions I’ve received, and on my own observations, I decided to revisit the topic. There are two issues that I was particularly ichy, and which I’ll try to scratch:

• <span class="sifr-alt-color"> is not semantically correct, and it’s ugly too – thnx to Daniel Duriš
• described technique relies on hacking source actionscript files every time a color needs to be changed. I’d like it to be a bit more flexible – thnx to Mark Wubben

Change <span> to <em>. Two things have to be done.

1. Change the notation in html files, ie.

   <h2>This is <span class="sifr-alt-color">2 color</span> sIFR</h2>

   to

   <h2>This is <em>2 color</em> sIFR</h2>

2. Modify javascript file (the following code exists in two locations in the javascript file, both of them have to be changed)

   } else if(oSearch.nodeName.toLowerCase() == "span" && oSearch.getAttribute("class") == "sifr-alt-color"){

   to

   } else if(oSearch.nodeName.toLowerCase() == "em"){

Part two of this session focuses on invocation part. I thought that it could be nice to be able to specify alternate color during the invocation phase. So I added another parameter to sIFR.replaceElement(). I added sAltColor after sHoverColor, so the list of parameters looks like:

function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sAltColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){

Couple of things need to be done in javascript file also. Change

function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){

to

function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sAltColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){

then, after line

sHoverColor : function(value){ sHoverColor = value },

add line

sAltColor : function(value){ sAltColor = value },

and then, after line

if (sHoverColor != null){sVars += "&hovercolor=" + sHoverColor};

add line

if (sAltColor != null){sVars += "&altcolor=" + sAltColor};

That should take care of the javascript part.

The last thing we should do is handle the flash side. In the dont_customize_me.as, change:

if (placeholder.indexOf(colorDelimiter) > -1) {

to

if (altcolor != undefined && placeholder.indexOf(colorDelimiter) > -1) {

then

tempBlock += tempArray[0]+"<FONT COLOR=""+alternateColor+"">"+tempString+"</FONT>";

to

tempBlock += tempArray[0]+"<FONT COLOR=""+altcolor+"">"+tempString+"</FONT>";

and finally, reexport the movie.

You can download the uncompressed javascript source here, and actionscript file here. There is also demo page. I didn’t make the compressed version of the js file because of obvious reasons. This is by no means an attempt to fork off the main sIFR branch, it’s just a possible addition. If the guys behind sIFR decide to include the code in the next release, you’ll get the compressed version there. If not, and you still want to use this, then you’re probably into hacking yourself, and it’s not gonna be too much trouble to replace couple of spaces, cr’s and lf’s yourself : ).