fitText with Meteor.defer issue on mobile browser

help
1

Hi,
I am using “defer” here, to execute the fitText on a list of items. (loop, auto run).
Template.hello.onRendered( function(){
Meteor.defer(function () {
$(’.responsive_title’).fitText(1, {minFontSize: ‘20px’, maxFontSize: ‘160px’}).velocity(‘fadeIn’);
etc;
});
});

Which works fine, But on mobile browsers.
Maybe someone has a solution for mobile? It works well on mobile as well, as long as it’s one item, not a list/loop.
*Apparently seems like it’s working good only on the local host, so it’s probably a time issue.
Thanks.

2

Eventually this did the trick.
Added a {{isRendered id}} to the bottom of each template in the loop, then moved the JS to the helper:
Template.hello.helpers({
isRendered: function(id){
Meteor.defer(function () {
var height = $(’#id’ + id).height();
if(height)
$(’#id_’ + id + ’ .responsive_title’).fitText(1, {minFontSize: ‘30px’, maxFontSize: ‘180px’}).velocity(‘fadeIn’);
$(’#id_’ + id + ’ .responsive_two_words’).fitText(1, {minFontSize: ‘25px’, maxFontSize: ‘140px’}).velocity(‘fadeIn’);
$(’#id_’ + id + ’ .responsive_description’).fitText(1, {minFontSize: ‘15px’, maxFontSize: ‘120px’}).velocity(‘fadeIn’);
});
}

It works, but is it required to add some “return” to this helper? just for best practice or something?
Thanks.