R – Sifr and Javascript changing stylesheets (without a page refresh)

sifr

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

Best Answer

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.

Related Topic