Changing a sIFR "Current Item" Color without Page Reload

Question

Greetings!

I found a post similar to my problem that was nicely answered, but it changed the color of ALL <h1> instances with a javascript function.

I am trying to change the color of a single sIFR'd nav item in a list to have a different color, without reloading the page -- so the others would have to be "turned off" (color reset to default). Any ideas?

// Modified function from other post, obviously does not work
function changeColor(idNum) {
  var css = '.sIFR-root { color:#522d24; }'; 
  for (var i = 0; i < sIFR.replacements['a'+idNum].length; i++) {
    sIFR.replacements['a'+idNum][i].changeCSS(css); // change to brown color
  }
}

I am trying to target a list of anchors inside of <h6>'s, each with a unique id (can be added to each h6).

// sIFRized HTML list I am targeting, items are all teal color
    <h6><a href="javascript:changeColor('0');" id="catLink0">Shop</a></h6>
    <h6><a href="javascript:changeColor('1');" id="catLink1">Dine</a></h6>
    <h6><a href="javascript:changeColor('2');" id="catLink2">Play</a></h6>
    <h6><a href="javascript:changeColor('3');" id="catLink3">Services</a></h6>

// sIFR replacement 
sIFR.replace(archerSemibold, {
  selector: 'h6',
  wmode: 'transparent',
  css: ['.sIFR-root { background-color:#587b7c; color:#627d79;  }'
     ,'.brown { color:#542d24; }'
     ,'a { text-decoration: none; color: #627d79; }'
        ,'a:link { text-decoration:none; color: #627d79; }'
     ,'a:hover { text-decoration:none; color: #5b1300; }'
 ]
});

Here is the page in case you would like some context. I'm still deciding how I will "filter" the map contents on the left, either with AJAX or a javascript show/hide -- hence my need for this solution.

Thanks in advance!

Answer 1

You just need:

function changeColor(idNum) {
  var css = '.sIFR-root { color:#522d24; }'; 
  sIFR.replacements['h6'][idNum].changeCSS(css); // change to brown color
}

Answer 2

Got that to work, and I solved another problem.

I needed to automatically run my changeColor() function on a "current" item after sIFR had loaded. Since I am only passing in a string/number to changeColor(), it was actually quite simple.

sIFR.replace(archerSemibold, {
    selector: 'h6',
    wmode: 'transparent',
    css: ['.sIFR-root { background-color:#587b7c; color:#627d79;  }'
      ,'a { text-decoration: none; color: #627d79; }'
      ,'a:link { text-decoration:none; color: #627d79; }'
      ,'a:hover { text-decoration:none; color: #5b1300; }'
      ],
    onReplacement: function(){ 
      changeColor('0'); // safely re-styles default current item
    }
});

function changeColor(num) {
    var defaultCSS = ['a:link { color:#627d79; text-decoration:none; }', 
                'a:hover { color:#522d24; }'
               ];
    for (var i = 0; i < sIFR.replacements['h6'].length; i++) {
      sIFR.replacements['h6'][i].changeCSS(defaultCSS);
    }

    var curCSS = ['a:link { color:#522d24; text-decoration:underline; }',
                  'a:hover { color:#627d79; }'
              ];
    sIFR.replacements['h6'][num].changeCSS(curCSS);
}