Table updates do not work

tiofabby commented 9 years ago

Hello, Thanks for this nice tool! :-) One issue still I have: If I do a textFit for an array : textFit(document.getElementsByClassName('box')); It does not work. But if I do a textFit to an element only it works: textFit(document.getElementsByClassName('box')[0]); Would you have any idea why? I am using Chrome. Here is my code:

   <div data-role="page" id="main" class="cl_main_page">
        <div data-role="content">
                    <div class="responsive_levelbackground"><span>Shop</span></div>
                    <div class="responsive_levelbackground lbl" id="f0"></div>
                    <div class="responsive_levelbackground lbl" id="f1"></div>
                    <div class="responsive_levelbackground lbl" id="f2"></div>
                    <div class="responsive_levelbackground lbl" id="f3"></div>
                    <div class="responsive_levelbackground lbl" id="f4"></div>
                    <div class="responsive_levelbackground">Online Quizz</div>
         </div><!-- /content -->
    </div><!-- /page -->

(I have text being filled into DIvs depending on IDs too..) Then textFit(document.getElementsByClassName('responsive_levelbackground')); does not work but textFit(document.getElementsByClassName('responsive_levelbackground')[0]); textFit(document.getElementsByClassName('responsive_levelbackground')[1]); ... work fine..

Thank you

STRML commented 8 years ago

I am unable to replicate this. TextFit is working fine with Arrays or NodeLists. Please reopen if you have failing code or are still experiencing this issue.

jdietrch commented 8 years ago

What textFit does not work fine with, however, is HTMLCollection objects. And in Firefox 46 and Chrome 50, getElementsByClassName() returns a HTMLCollection object. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName.

Here's a simplified testcase illustrating document.getElementsByClassName() not working. Try it in the latest version of Firefox or Chrome. The first two divs get their text expanded, and the last two do not.

<!DOCTYPE html>
<html>
  <head>
    <title>Problem with textFit() and document.getElementsByClassName() array</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="textFit.js"></script>
    <style>
      div{
        height: 150px;
        width: 150px;
        color: white;
        background: black;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="tf">
      Text
    </div>
    <div class="tg">
      Text
    </div>
    <div class="th">
      Text
    </div>
    <div class="th">
      Text
    </div>
    <script>
        textFit(document.getElementById('tf'));
        textFit(document.getElementsByClassName('tg')[0]);
        textFit(document.getElementsByClassName('th'));
    </script>
  </body>
</html>

I fixed this by changing the line if (elType !== '[object Array]' && elType !== '[object NodeList]'){ to

if (elType !== '[object Array]' && elType !== '[object NodeList]' &&
        elType !== '[object HTMLCollection]'){

Thank you.

STRML commented 8 years ago

Thanks - could you make a PR for this?

STRML commented 8 years ago

Fixed in 2.3.1. Thanks for the PR.

STRML / textFit

Table updates do not work #20