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