{"id":83,"date":"2005-03-16T12:45:36","date_gmt":"2005-03-16T10:45:36","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/16\/two-color-sifr-take-two\/"},"modified":"2006-01-15T14:12:59","modified_gmt":"2006-01-15T12:12:59","slug":"two-color-sifr-take-two","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/16\/two-color-sifr-take-two\/","title":{"rendered":"Two Color sIFR Take Two"},"content":{"rendered":"<p><em><strong>Ed\u2019s note<\/strong>: This is an outdated material. Please visit the <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2006\/01\/12\/two-colors-in-sifr-201\/\">article with a new version<\/a>.<\/em><\/p>\n<p>Here again <a href=\"http:\/\/www.mi3dot.org\/gallery\/showcase\/njava\/\">Vanja<\/a> reloads <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/11\/two-color-sifr\/\">Two color sIFR<\/a> technique\u2013better, improved and easier to use. Here\u2019s the article&#8230;<!--more--><\/p>\n<p>Based on the suggestions I&#8217;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&#8217;ll try to scratch:<\/p>\n<ul>\n<li><code>&#60;span class=\"sifr-alt-color\"&#62;<\/code> is not semantically correct, and it\u2019s ugly too &#8211; thnx to <a href=\"http:\/\/www.ambience.sk\/\">Daniel Duri&#353;<\/a><\/li>\n<li>described technique relies on hacking source actionscript files every time a color needs to be changed. I&#8217;d like it to be a bit more flexible &#8211; thnx to <a href=\"http:\/\/www.novemberborn.net\/\">Mark Wubben<\/a><\/li>\n<\/ul>\n<p>Change <code>&#60;span&#62;<\/code> to <code>&#60;em&#62;<\/code>. Two things have to be done.<\/p>\n<ol>\n<li>Change the notation in html files, ie.\n<pre>&#60;h2&#62;This is &#60;span class=\"sifr-alt-color\"&#62;2 color&#60;\/span&#62; sIFR&#60;\/h2&#62;<\/pre>\n<p> to <\/p>\n<pre>&#60;h2&#62;This is &#60;em&#62;2 color&#60;\/em&#62; sIFR&#60;\/h2&#62;<\/pre>\n<\/li>\n<li>Modify javascript file (the following code exists in two locations in the javascript file, both of them have to be changed)\n<pre>} else if(oSearch.nodeName.toLowerCase() == \"span\" && oSearch.getAttribute(\"class\") == \"sifr-alt-color\"){<\/pre>\n<p>to<\/p>\n<pre>} else if(oSearch.nodeName.toLowerCase() == \"em\"){<\/pre>\n<\/li>\n<\/ol>\n<p>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 <code>sIFR.replaceElement()<\/code>. I added <code>sAltColor<\/code> after <code>sHoverColor<\/code>, so the list of parameters looks like:<\/p>\n<pre>function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sAltColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){<\/pre>\n<p>Couple of things need to be done in javascript file also. Change<\/p>\n<pre>function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){<\/pre>\n<p>to<\/p>\n<pre>function replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sAltColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode){<\/pre>\n<p>then, after line<\/p>\n<pre>sHoverColor : function(value){ sHoverColor = value },<\/pre>\n<p>add line<\/p>\n<pre>sAltColor : function(value){ sAltColor = value },<\/pre>\n<p>and then, after line<\/p>\n<pre>if (sHoverColor != null){sVars += \"&hovercolor=\" + sHoverColor};<\/pre>\n<p>add line<\/p>\n<pre>if (sAltColor != null){sVars += \"&altcolor=\" + sAltColor};<\/pre>\n<p>That should take care of the javascript part.<\/p>\n<p>The last thing we should do is handle the flash side. In the <code>dont_customize_me.as<\/code>, change:<\/p>\n<pre>if (placeholder.indexOf(colorDelimiter) > -1) {<\/pre>\n<p>to<\/p>\n<pre>if (altcolor != undefined && placeholder.indexOf(colorDelimiter) > -1) {<\/pre>\n<p>then<\/p>\n<pre>tempBlock += tempArray[0]+\"&#60;FONT COLOR=\"\"+alternateColor+\"\"&#62;\"+tempString+\"&#60;\/FONT&#62;\";<\/pre>\n<p>to<\/p>\n<pre>tempBlock += tempArray[0]+\"&#60;FONT COLOR=\"\"+altcolor+\"\"&#62;\"+tempString+\"&#60;\/FONT&#62;\";<\/pre>\n<p>and finally, reexport the movie.<\/p>\n<p>You can download the uncompressed javascript source <a href=\"http:\/\/webdesign.maratz.com\/lab\/two_color_sifr_take_two\/sifr-altcolor-uc.js\">here<\/a>, and actionscript file <a href=\"http:\/\/webdesign.maratz.com\/lab\/two_color_sifr_take_two\/vanja_dont_customize_me.as\">here<\/a>. There is also <a href=\"http:\/\/webdesign.maratz.com\/lab\/two_color_sifr_take_two\/\">demo page<\/a>. I didn&#8217;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&#8217;s just a possible addition. If the guys behind sIFR decide to include the code in the next release, you&#8217;ll get the compressed version there. If not, and you still want to use this, then you&#8217;re probably into hacking yourself, and it&#8217;s not gonna be too much trouble to replace couple of spaces, cr&#8217;s and lf&#8217;s yourself : ).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ed\u2019s note: This is an outdated material. Please visit the article with a new version. Here again Vanja reloads Two color sIFR technique\u2013better, improved and easier to use. Here\u2019s the article&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/83"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}