Fire event when element change its class

Question

I have implemented this slide show on my webpage. If you go on right click, and then Inspect Element you can see the elements of this slideshow.

enter image description here

I want to add event in jQuery that will fire, each time when the new image is loaded in this slideshow. I have noticed that every time when the image is changed, the class of ul element with id=supersized is changing the class from quality into speed in a loop. So I was thinking that I can fire the event each time when the class of this element will change.

I have tried with image load event, but I'm not getting the desired results because it seem that all the images are loaded at start, and not at the moment when they are shown at the slideshow.

If there is better solution than class change event it is also acceptable. So I need something to happen when the image in slideshow is changing.

If it's possible I want not to use setTimeout() functions in the solution because it will check for changes in a loop and that will slow down the page.

You can use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) — Satpal, May 04 '14 at 16:03

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

According to Answer by @epascarello
Javascript

function addClassNameListener(elemId, callback) {
    var elem = document.getElementById(elemId);
    var lastClassName = elem.className;
    window.setInterval( function() {   
       var className = elem.className;
        if (className !== lastClassName) {
            callback();   
            lastClassName = className;
        }
    },10);
}

With special request from some one who was just interested in commenting rather than helping
Working Fiddle

Using this plugin it is possible

$('#me').observe({
        attributes: true,
        attributeFilter: ['class']
    }, function (record) {
        console.log(record);
        fireMe();
});

Hope this is what you are looking for..!!

edited May 23 '17 at 11:53

Community

1
1

answered May 04 '14 at 16:18

Bhavik

4,836
3
30
45

Reference answer? Really? You have forgotten to copy paste the explanation. – AyB May 04 '14 at 16:20
2

Please see http://stackoverflow.com/help/referencing for how to properly reference sources other than your own. – BoltClock May 04 '14 at 16:30
1

@ICanHasCheezburger a theoretical answer has been posted by me... And by the way, important is to help... Someone googled it but was not able to find it... I found it and showed him... I accept that the way was `I referenced was not correct but my intentions even were not wrong` – Bhavik May 04 '14 at 17:06

score 0 · Accepted Answer · edited May 23 '17 at 12:33

0

    (function($){
        event_to_be_fired = {
            afterAnimation:function(){
                     console.log("slide changed");
                    //code for event to be fired on slide change
            }
        };
    })(jQuery);

ref: How do i use this api of supersized jquery plugin

edited May 23 '17 at 12:33

Community

1
1

answered May 04 '14 at 16:19

Coderaemon

3,619
6
27
50

What is amazingly wrong with you people? This is not a question of how to google and copy-paste answers. Please come up with at least a theoretical answer. – AyB May 04 '14 at 16:21
Code speaks for itself. Whats the point of explanation it's an API to use and make your thing work. Copy pasting answers is what we all do don't we. Or do we have to reinvent the wheel. And I have given the due credit to the real answer. – Coderaemon May 04 '14 at 16:23
1

I wouldn't complain if you attach at least a tiny bit of explanation to it. What's the difference between pasting the link of reference in comment and posting the code here? I'm saying this because you seem to be a new-user. Please understand that you learn even while adding explanations to something you may already know too. – AyB May 04 '14 at 16:25
No point discussing/complaining about it. I think you should know what this code is doing if you have ever used Javascript. It's not convoluted is it? I always give explanation wherever necessary and avoid using redundant words which make no difference. – Coderaemon May 04 '14 at 16:28
1

Please see http://stackoverflow.com/help/referencing for how to properly reference sources other than your own - and if the questions are the same, flag as duplicate instead. – BoltClock May 04 '14 at 16:29
Yes great, please down vote my answer 100 times, and ban me. Don't let people help other people. Just care about your sanctimonious platform. – Coderaemon May 04 '14 at 16:31
@Coderaemon You're taking this too personal. Please don't. BoltClock is totally right, again you're new here so you may not know this but What you could have done is commented that this post is a duplicate of the reference link you had quoted, in that case OP would have realized the solution is already there somewhere. That's how things happen at stackoverflow and it helps in keeping this site the way it should be. – AyB May 04 '14 at 16:38
Yeah I'm new and will keep this in mind. Glad the question author accepted my answer. – Coderaemon May 04 '14 at 17:09
For those who have the same problem like this: I accepted this answer as correct because the explanation given by @SamDunn (creator of the plugin I'm using) helped me out. So the solution here is not firing the even on class change, it's in the structure of the plugin. So this will be helpful only on those who use the same plugin as I'm. – delux May 05 '14 at 10:56

Fire event when element change its class

2 Answers2

Linked