Resizing does not work for all <div> of the same class

[TomyQuestion]

Hi,

I am facing the following issue with the textfill plugin:

In my html, I define several

of the same class that are positioned the same way, and contain each a text that need to be resized.
Only one of these

is displayed at once, and through a button press, one

disappears and the next one appears.

It looks like this in the html:

<div class="Title" id="Title_01">
  <span>My title 01</span>
</div>
<div class="Title" id="Title_02">
  <span>My title 02</span>
</div>
<div class="Title" id="Title_03">
  <span>My title 03</span>
</div>

At $document ready, I call the following "textfill_specific" function:

function textfill_specific()
{
  $('.Title').textfill({
    success: function() {
        alert("success")
    },
    fail: function(failure) {
        alert("fail"+failure)
    },
    complete: function() {
        alert("complete")
    }
  });
}

Result:
-> #Title_01 was resized correctly
-> #Title_02 was resized correctly
-> #Title_03 was NOT resized: the "fail" callback is triggered, however I do not know how to debug and see where the problem is.

Do you have any hint for me?

Thank you very much in advance.

Best Regards.

[Russ Painter]

It can only size elements that are visible. The code that makes the element visible should then trigger the text sizing for that element.