Sifr and Javascript changing stylesheets (without a page refresh)

Question

I'm currently playing around with Sifr on my site. Basically I have some coloured blocks at the top of my page, which will change the stylesheets through javascript, depending on the colours you chose. I would like to know how I can get the Sifr h1/h2 tags to reload dynamically (no page refresh) onclick - if that's possible?

I've tried to add the sIRF.activate code in the onclick event and I've also tried putting the sIFR.activate code inside the set_style function, but to no avail. If anyone can help me that would be fantastic!!

Cheers Leanne

Answer 1

Given sIFR 3, it is possible to change some of the CSS used to render the text.

I'm assuming you have two replacements, for h1 and h2, and we're only changing their color:

function changeColor(hexValue) {
  var css = '.sIFR-root { color: ' + hexValue + '; }';
  for (var i = 0; i < sIFR.replacements['h1'].length; i++) {
    sIFR.replacements['h1'][i].changeCSS(css);
  }
  for (var i = 0; i < sIFR.replacements['h2'].length; i++) {
    sIFR.replacements['h2'][i].changeCSS(css);
  }
}

// after switching stylesheet:
changeColor('#FF9900');

This should change the text color of the <h1> and <h2> replaced elements to orange.

The objects returned by sIFR.replacements[][] are FlashInteractors.

Answer 2

I haven't used sifr myself, but I think your best bet is the Rollback add-on. Then you should be able to effectively reload your sifr'd tags in your javascript by rolling back & then immediately "rolling forward" again by re-running your replacement statements (i.e. basically disabling & re-enabling it).

EDIT: Just noticed at the bottom of this page there's a redraw() method... might actually be exactly what you're after? (again, sorry for the vagueness, but I've never directly used sifr myself)