jQuery Text Resizing Plugin Only Applied to First Slide of a Bootstrap Carousel

Question

I am using a lightweight jQuery plugin called WideText to resize the captions on the slides of a Bootstrap 3 carousel.

It fits the text (span class="responsive") to the full width of the containing div by adding a style with the calculated font size.

When the page loads, the first slide's caption has the font size style applied. But when the next slide comes in, the font size style is not applied.

Here's a picture of the first slide and then the next slide (I don't have enough cred to post images here).

I found a similar issue on Stack Overflow for a different plugin where the idea was to find the next item after the active slide and call the plugin. But I was unable to make that solution work.

How can I get the WideText plugin to be applied to all of the captions in the carousel so they appear as each image slides in?

This is the actual code of the plugin:

(function($) {
  $.fn.wideText = function() {
    return this.each( function() {
        // Add "wtext" class to each element and then set up the magic
        var obj = $(this),
            rtext = obj.addClass( 'wtext' );
        // Work that magic each time the browser is resized
        $(window).on( 'resize', function() {
            obj.css( {'fontSize': parseInt( obj.css('fontSize')) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
        } ).resize();
    });
  };
} )(jQuery);

And this is the code placed at the bottom of my page:

$(window).load( function() {
    $( '.responsive' ).wideText();
} );

Thank you.

Darwin Spratt Darwin Spratt · Accepted Answer · 2014-08-30T21:02:31

OK, so after some troubleshooting by a Jquery pro, we came up with this extra bit of code.

// auto type width adjustment in #primary-carousel images   
$(window).load( function() {
    $( 'h1 span.responsive' ).wideText();
} );

// hack for invisible carousel wideText timing problem 
// boostrap carousel sends an event "slide.bs.carousel" when it begins to slide
$('#primary-carousel').on("slide.bs.carousel", function(){
    setTimeout(function(){
        $(window).trigger('resize');
    }, 40); 
})

jQuery Text Resizing Plugin Only Applied to First Slide of a Bootstrap Carousel

1 Answers