Utilise the Bootstrap Carousel "slide" event and the .next class

Question

So I've got a little problem (similar to this one I posted the other day: http://bit.ly/11JpbdY) with using SlabText on a piece of content that is hidden on load. This time, I'm trying to get slabText to update the display of some content that is in a slider (using Twitter Bootstrap's Carousel plugin).

Following Twitter's documentation (http://twitter.github.com/bootstrap/javascript.html#carousel) for Bootstrap's Carousel plugin, I'm trying to use slide event so that I re-call SlabText to make it display correctly.

Using developer tools I can see that Carousel adds a .next class as it processes the slide of one .item element to the next. This is then removed before the .active class is transferred.

I can access the "slide" event without any issue, but trying to get hold of the .next element is proving troublesome. Here is a JSFiddle of my code thus far: http://jsfiddle.net/peHDQ/

To put my question simply; how should I correctly use the slide event to trigger a function?

Please let me know if any additional information would be useful.

---

Further notes:

As I've been unable to get hold of the .next class, I'm attempting to do this with some jQuery. Here is my code thus far:

$('.carousel').carousel({
    interval: 5000
}).on('slide', function (e) {
    $(this).find('.active').next().find('.slab').slabText();
});

From what I understand this should be grabbing each .slab element and triggering the SlabText plugin.... alas I get an error:

"Uncaught TypeError: Object [object Object] has no method 'slabtext' "

Can anyone advise what I am doing wrong here...? I've used the exact same process to add a class and it works fine (as per this JSFiddle: http://jsfiddle.net/peHDQ/2/)

Solution

I identified the problem. The issue is that the event 'slide' is called before the next slide is made visible. I added a little delay, and it works fine now. Try this:

   $('.carousel').carousel({
       interval: 5000
   }).on('slide', function (e) {
       var xx = $(this);
       setTimeout(function() {
           xx.find('.active').next().find('.slab').slabText();
       } , 0);
   });

Comments

[Sheixt]

Sorry that was just a type-o in this post. I have tried that (jsfiddle.net/peHDQ/2) and alas still no joy!

[Sheixt]

Thanks! This works, well, to a point. So I presume the issue is that it needs to delay before processing the function. The only problem with setting the time to 50 milliseconds is that if the user is on a slower connect the problem still occurs. If you set it much longer, those on a fast connection see a stutter. Any suggestions on this?

[Tarandeep Gill]

Slower internet connection will not matter at all, as this javascript is executed only after the full page loads. What you might be worrying about is people with slower computers. But then again, I don't think that will be a problem either, because this number (50 milliseconds) is just a hint to the browser. That is how JavaScript works, its a single thread. So when you say call this function after 50 milliseconds, it will switch to the main thread, which makes the item visible. When the main thread is finished, it will come back to this function and execute the slabText function.

[Tarandeep Gill]

So yea, even if you give the hint to 0 milliseconds, this function will ALWAYS be executed after the main thread has made the item visible.

[Tarandeep Gill]

Did you get a chance to check it on any slower browsers? As I told you, this would definitely work on all browsers. You however, need to set a flag so that the function is not called more than once on each element.

[Sheixt]

Thanks for the detailed reply! That makes sense. From what I can see it works fine. I've sent over the bounty, thanks again. Lastly, can you give an example of the 'flag' that you mentioned?

[John Magnolia]

You could do $(".active", e.target).next() instead of xx.find('.active').next()