Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table updates do not work #20

Closed
tiofabby opened this issue Jun 10, 2015 · 4 comments
Closed

Table updates do not work #20

tiofabby opened this issue Jun 10, 2015 · 4 comments

Comments

@tiofabby
Copy link

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
Copy link
Owner

STRML commented Apr 25, 2016

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.

@STRML STRML closed this as completed Apr 25, 2016
@jdietrch
Copy link
Contributor

jdietrch commented May 4, 2016

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
Copy link
Owner

STRML commented May 4, 2016

Thanks - could you make a PR for this?

@jdietrch jdietrch mentioned this issue May 4, 2016
Merged
@STRML
Copy link
Owner

STRML commented May 4, 2016

Fixed in 2.3.1. Thanks for the PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@STRML @jdietrch @tiofabby