Question

I have the following. I am trying to trigger the function based on the css class changing but it’s not working.

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#slider-banner").bind("cssClassChanged",function(){
    console.log("I'm Here!");
    if(jQuery("#slider-banner").hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path])");
    }
    else if(jQuery("#slider-banner").hasClass('right-partner'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path])");
    }
    else if(jQuery("#slider-banner").hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path])");
    }
});

    jQuery("#slider-banner").trigger('cssClassChanged');

The colsole displays my console.log message on page load, but not when the class changes again after page load. Anyone see what I’m doing wrong?

UPDATE:

So I’ve learned that “cssClassChanged” is not legit… I was attempting to adapt an answer I found somewhere else… I do realize that if jQuery were a weapon, I’d be dangerous! (knowing that is half the battle, right?)

My attempt to adapt gdoron’s answer linked to below:

<script type="text/javascript">

jQuery(document).ready(function() 
{
    function checkForChanges()
    {
        if(jQuery("#slider-banner").hasClass('living-nutrients'))
        {
            jQuery("#home-middle-first").css("background-image","url([image path])");
        }
        else if(jQuery("#slider-banner").hasClass('right-partner'))
        {
            jQuery("#home-middle-second").css("background-image","url([image path])");
        }
        else if(jQuery("#slider-banner").hasClass('with-you'))
        {
            jQuery("#home-middle-third").css("background-image","url([image path])");
        }

        else
            setTimeout(checkForChanges, 500);
    }
});
</script>

I’m still missing something, though. It only works for the first class on page load.

Someone asked how I’m changing the classes. I’m using a slider and on each slide is a div with the ID “slider-banner” and the class varies depending on which of the three ID’d areas below it that I am trying to switch the background image for.

Answer 1

There is no such event cssClassChanged I think that explains all…

10 hours ago I answered how you can detect class change, read my answer there

---

Update:

function checkForChanges()
{
    var sliderBanner = jQuery("#slider-banner");
    if(sliderBanner.hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","url([image path])");
    }
    else if(sliderBanner.hasClass('right-partner'))
    {
        jQuery("#home-middle-second").css("background-image","url([image path])");
    }
    else if(sliderBanner.hasClass('with-you'))
    {
        jQuery("#home-middle-third").css("background-image","url([image path])");
    }    

    setTimeout(checkForChanges, 500);
}

jQuery(checkForChanges);