Jquery Fittext not work with bootstrap carousel

Question

JSFiddle

Link jsfiddle  https://jsfiddle.net/jimmyphong/867wvc9u/2/

Im using jquery Fittext with bootstrap carousel , for first and active item work fine , so with another item or (hidden maybe) it not work !

any help !

Thanks

Answer 1

Its an old question but here is a quick solution if anyone else come seek for an answer.

bootstrap have 2 triggers in the carousel plugin slide and slid ( Read Documentation ). But you can not use slide as it triggers just before it starts sliding and that stage the next slide is in display:none and fitText plugin will add the minFontSize to it. And you can use slid . It will trigger just after sliding is completed. So in this case to avoid flickering on this we need to find a place where it has to be just after display:none is gone. so the ideal place is animated state. So in order to do that you need to observe the element with class change and trigger a element resize.

Please find below the solution,

Initiate fitText, Documentation

$(".fittext").fitText(0.2, { minFontSize: '20px', maxFontSize: '100px' });

Write an observer extension to jquery addClass

// Extends functionality of ".addClass()"
(function(){
    var originalAddClassMethod = jQuery.fn.addClass;
    $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        $(this).trigger('addClassChanged');
        return result;
    }
})();  

And run the element resize event on class change.

$('.carousel-item').on('addClassChanged', function(){
    $(window).resize();
});

Updated jsfiddle: https://jsfiddle.net/867wvc9u/12/

---

Note:- Since resize event keeps listen to the DOM, we can tweak the fitText plugin a bit to overcome unexpected call stack overkill issues.

Update the window event line in the fitText plugin.

...
$(window).on('resize.fittext click.fittext orientationchange.fittext', resizer);
...

and do a click instead, in the addClassChanged event,

$('.carousel-item').on('addClassChanged', function(){
    $(window).click();
});