Trigger function based on Class Change

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.

How are you changing the class after page load? @Diodeus you can have custom events defined in jQuery — Jay Blanchard, Mar 07 '12 at 21:09
you trigger a non event native manually, you should re-trigger the non native event manually each time you make css class changes on the target of the event. — mpm, Mar 07 '12 at 21:13
Yep - polling for changes will work, but has the danger of being quite the CPU hog. — Diodeus - James MacFarlane, Mar 07 '12 at 21:13
sounds like trying to tap into a plugin running on slider...if so use API of plugin to trigger the custom event — charlietfl, Mar 07 '12 at 21:25
@Diodeus. True, but some times it's need, like with plugins, and maybe he doesn't control the class changes, if it's so, he will need to get dirty... =) — gdoron, Mar 07 '12 at 21:25

score 3 · Answer 1 · answered Mar 07 '12 at 21:06

3

There is no built-in event named "cssClassChanged". You have created your own custom event, and are triggering it manually during page load. It will not fire automatically -- you'll have to call trigger('cssClassChanged') each time you change the CSS class.

answered Mar 07 '12 at 21:06

Justin ᚅᚔᚈᚄᚒᚔ

15,081
7
52
64

Yeah, wasn't my intent to create my own custom event, just tried to adapt from another answer found elsewhere. I've updated the question to reflect a new direction that I think incorporates what you and others are saying. Am I on the right track? – Michael Davis Mar 07 '12 at 21:38

score 3 · Accepted Answer · edited May 23 '17 at 10:30

3

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);

edited May 23 '17 at 10:30

Community

1
1

answered Mar 07 '12 at 21:07

gdoron

147,333
58
291
367

1

I appreciate your answer, I've tried to adapt it and have edited the question above to show it. I'm still doing something wrong, though. – Michael Davis Mar 07 '12 at 21:35
@MichaelDavis. Did you call that function when the DOM ready...? See my update – gdoron Mar 07 '12 at 21:40
Doesn't having it wrapped in the document.ready function like I have do that? Sorry if that's an idiot question... I only know enough to be dangerous. – Michael Davis Mar 07 '12 at 21:42
@MichaelDavis. `jQuery(checkForChanges)` === `jQuery(document).ready(function(){checkForChanges();})` just shorter... – gdoron Mar 07 '12 at 21:44
You are a good person for not taking the opportunity to point out how much of an idiot I was for asking that. I've since unwrapped it from the document.ready() and have it the same as you wrote it. My first change happens on page load, but it doesn't seem to be rechecking after the timeout. – Michael Davis Mar 07 '12 at 21:48
@MichaelDavis. You just need to delete the `else` you want to keep tracking changes more than once. see the update. – gdoron Mar 07 '12 at 21:58
1

Of course! lol Now it's working as intended. Thanks for sticking with me on this. – Michael Davis Mar 07 '12 at 22:23

score 1 · Answer 3 · answered Mar 07 '12 at 21:06

1

There is no cssClassChanged event that I am aware of, you need to manually trigger it. However, you aren't changing the class in the code you posted, therefore I'm not sure where you would want to trigger it.

answered Mar 07 '12 at 21:06

Kevin B

94,570
16
163
180

Appreciate your feedback. The class changes when the slider changes slides. Each slide has an image with the ID given and the class changes depending on which image is visible. I've attempted to try a new direction. Am I any closer? – Michael Davis Mar 07 '12 at 21:40
On each slide, right after `addClass`, use `$("#slider-banner").trigger("cssClassChanged")` and use your original code. This way, every time the slider slides and the class changes, the code is fired. – Kevin B Mar 07 '12 at 21:44

score 0 · Answer 4 · answered Dec 04 '14 at 05:48

you can wire your own click event listener on slideshow (prev/next) buttons - they will be added in addition to the existing ones.

in your event listeners, you can check css-class for whatever element you are interested in.

$(".prev").on("click", function() { 
//user has explicitly clicked "prev"!!
});
$(".next").on("click", function() { 
//user has explicitly clicked "next"!!
});

Trigger function based on Class Change

4 Answers4

Linked