Sifr and Javascript changing stylesheets (without a page refresh)

Question

Hi there,

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

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)

Answer 2

Thanks so much for your help, I got the rollback to work! But now I can't seem to get the rollforward to do anything.. in the rollforward example (http://wiki.novemberborn.net/sifr3/Add-ons) they say to do this:

function do_sIFR(){ // replacement statements go here };

do_sIFR(); // execute immediately, so the headlines will get replaced

however, I'm not sure what the replacement statements should be? I tried

"sIFR.activate(font);"

But that didn't work.. Is this something easy that I'm just missing? Sorry if it's a dumb question, but I'm so very new to sIRF.. :(

Answer 3

ugh.. can't get it to work.. :(

Answer 4

I've tried this but I get a javascript error saying "named is not defined"

function do_sIFR(color){ sIFR.replaceElement("h1", named({sFlashSrc: "/v4/templates/home2/flash/titles.swf", sColor: "#ffffff"})); };

I really have no idea what I'm doing wrong :(

Answer 5

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 6

Thanks so much for the code, I removed the rollback function to use the one you suggested instead but I'm getting this error now:

Error: sIFR.replacements.h2 is undefined

I tried putting the code in the sifr-addons.js file, in the sifr.js file and also on the main page but still the same error.. :S I'm using sifr version 3, revision 436.. Am I missing something or is it just not liking me :(

Answer 7

ok so after a bit more messing around I managed to get it to work properly! Thank you so much for your help (to both of you guys)!! :D Muchly appreciated! :)

Answer 8

Hmm I just saw that the background-color can't be changed using sIFR.replace()..

is there any other way to change the background colour of the h2 tags using the code you gave me?

Answer 9

This is the code that I tried to do before I saw that background-color wasn't able to be changed with changeCSS..

function changeColor(hexValue) {

var css1 = '.sIFR-root { color: '+ hexValue +'; }';
var css2 = '.sIFR-root { color: #080808; background-color: '+hexValue+'; }';

for (var i = 0; i < sIFR.replacements['h1'].length; i++) {
 sIFR.replacements['h1'][i].changeCSS(css1);
};

for (var i = 0; i < sIFR.replacements['h2'].length; i++) {
 sIFR.replacements['h2'][i].changeCSS(css2);
};

};