sIFR 3 changeCSS problem

Question

Hi everybody,

I just have a short question about switching the color of sifr objects on the fly with changeCSS:

The point is, that I'd like to change the color of the two headers whenever the user clicks on the "Switch style to..." on the upper right corner. Check the example page: www.capsule.hu/index2.html - and after clicking on the link nothing happens with sifr objects. Version is: sIFR, version 3, revision 436.

I'm using Kelvin Lucks styleswitcher script with some modifications (the script is hardly the same as here: http://www.digital-campaign.com/dc-example/) - on my current page I'm calling the sIFR.replace method whenever user changes the style (www.capsule.hu), but it seems a little bit slow for me, that's why I'd like to change.

Thanks for every help in forth, Csongor

Answer 1

You can place the following in the body of the switchSifrColor function on your site:

$('h2').removeClass("sIFR-replaced"); 

sIFR.replace(helvetica, {
    selector: 'h2',
    wmode: 'transparent',
    css: [ '.sIFR-root { color: #' + color + '; }' ]
});

The main change is that the css property is an array of strings, unlike the object that you were passing.

And a side-note: great work! The site looks very nice.

[Edit]

I guess this will prove more useful than calling replace again.

var css = '.sIFR-root {color:#ff1ff1;}';

$.each(sIFR.replacements['h2'], function() {
    this.changeCSS(css);
});

I just tried it through Firebug and it looks great :)

[/Edit]

Answer 2

It's the same for me.

I'm unable to use sIFR.replacements[].

It returns a JS error : "sIFR.replacements['h5#pullquote']" is undefined". Even, "sIFR.replacements" is undefined.

I'm using sIFR 3 revison 436.