How can I change an element when a class is applied to a separate element?

Question

I need a little js help. I want to change my nav background color -- see the bottom here: http://momentum-demo.squarespace.com -- based on the active slide. The gallery js assigns a class of .sqs-active-slide to the active slide.

Basically:

If #yui_3_17_2_1_1433961025758_314 has the class .sqs-active-slide, set the background-color of #headerWrapper to #ccc

And run it again every time the slide changes.

I'm proficient in jQuery and YUI but haven't had to dabble in it for a couple years. This one has got me stumped. Thanks in advance!

Answer 1

You could run a code snippet on a timer to check and make a change:

var check = $('#yui_3_17_2_1_1433961025758_314'),
    menu = $('#headerWrapper');
window.setInterval(function(){
  menu.toggleClass('sqs-active-slide', check.hasClass('sqs-active-slide'));
}, 1000);  /runs every 1 second

The best way would be to tie in to the plugins own events:

var check = $('#yui_3_17_2_1_1433961025758_314'),
    menu = $('#headerWrapper');

$(document).on('onSlideChange', function(){  //or whatever the event is.
  menu.toggleClass('sqs-active-slide', check.hasClass('sqs-active-slide'));
});

Your CSS:

.classtochangeBG { background-color:#ccc; }