Javascript – Changing a sIFR “Current Item” Color without Page Reload

javascriptsifr

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!

Best Answer

You just need:

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