Animation from Javascript in table doesn't work. How to fix?

Question

The animations on 1-5 lines in the table works. On the 6 line doesn't. You can see it here in action.

If you remove <td>Ff</td>, the animations work for every line.

var twoColComp = {
  init: function (){
    var tables = document.getElementsByTagName('table');

    for(var i = 0; i < tables.length; i++) {

      if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){
         return;
      }
      var h = tables[i].clientHeight, 
          t = tables[i].getBoundingClientRect().top,
          wT = window.pageYOffset || document.documentElement.scrollTop,
          wH = window.innerHeight;

      if(wT + wH > t + h/2){
         this.make(tables[i]);
       }
    }
  },
  
  make : function(el){
    var rows = el.getElementsByTagName('tr'),
        vals = [],
        max,
        percent;

    for(var x = 6; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 1; y < cells.length; y++){
        vals.push(parseInt(cells[y].innerHTML, 10));
      }
    }

    max = Math.max.apply( Math, vals );
    percent = 100/max;

    for(x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 1; y < cells.length; y++){
        var currNum = parseInt(cells[y].innerHTML, 10);
        cells[y].style.backgroundSize = percent * currNum + "% 100%";
        cells[y].style.transitionDelay = x/20 + "s";
      } 
    }

    el.className =+ " two-column-comp"
  }
}

window.onload = function(){
  twoColComp.init();
}

window.onscroll = function(){
  twoColComp.init();
}

body {
  font-family: sans-serif;
  max-width: 60em;
  margin: auto;
  padding: 1em;
}

table {
  width: 100%;
  background: #eee;
  padding: 1em;
  margin: 1em auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

th { font-size: 1.2em }

td {
  font-weight: bold;
  border-bottom: 1px solid #fbfbfb;
  width: 20%;
  padding: .5em .25em;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  transition: all .75s ease-out;
}

td:nth-child(2) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  text-align: right;
  background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: linear-gradient(to left, #e74c3c, #e74c3c);
  background-position: right top;
}

td:nth-child(3) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  background-image: -webkit-linear-gradient(right, #3498db, #3498db);
  background-image: -moz-linear-gradient(right, #3498db, #3498db);
  background-image: linear-gradient(right, #3498db, #3498db);
  background-position: left top;
}

<table>
  <tr>
    <th>Name</th>
    <th>Up</th>
    <th>Down</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>A</td>
    <td>700</td>
    <td>170</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>B</td>
    <td>435</td>
    <td>100</td>
    <td>Bb</td>
  </tr>
  <tr>
    <td>C</td>
    <td>500</td>
    <td>175</td>
    <td>Cc</td>
  </tr>
  <tr>
    <td>D</td>
    <td>350</td>
    <td>170</td>
    <td>Dd</td>
  </tr>
  <tr>
    <td>E</td>
    <td>1980</td>
    <td>350</td>
    <td>Ee</td>
  </tr>
  <tr>
    <td>F</td>
    <td>2000</td>
    <td>180</td>
    <td>Ff</td>
  </tr>
</table>

Not sure what you are after. There are only 6 rows? So where is the seventh? — putvande, Jan 08 '19 at 11:23

silentw · Accepted Answer · 2019-01-08T11:45:11.080

On line 137, you could add the ~~ (docs) to convert the NaN value obtained from parseInt(cells[y].innerHTML, 10) from the last cell of each tr into the value 0.

For example, on Ff, the value of parseInt would be NaN. Adding ~~ would convert it to 0.

In this example (line 141), the NaN value would be the max value, therefore it would not apply the backgroundSize correctly on line 148.

console.log(Math.max.apply( Math, [2000, 100, NaN] ));
console.log(Math.max.apply( Math, [2000, 100, 0] ));

Modified code

var twoColComp = {
  init: function (){
    var tables = document.getElementsByTagName('table');

    for(var i = 0; i < tables.length; i++) {

      if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)){
         return;
      }
      var h = tables[i].clientHeight, 
          t = tables[i].getBoundingClientRect().top,
          wT = window.pageYOffset || document.documentElement.scrollTop,
          wH = window.innerHeight;

      if(wT + wH > t + h/2){
         this.make(tables[i]);
       }
    }
  },
  
  make : function(el){
    var rows = el.getElementsByTagName('tr'),
        vals = [],
        max,
        percent;

    for(var x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 0; y < cells.length; y++){
        vals.push(~~parseInt(cells[y].innerHTML, 10));
      }
    }

    max = Math.max.apply( Math, vals );
    percent = 100/max;

    for(x = 0; x < rows.length; x++) {
      var cells = rows[x].getElementsByTagName('td');
      for(var y = 0; y < cells.length; y++){
        var currNum = parseInt(cells[y].innerHTML, 10);
        cells[y].style.backgroundSize = percent * currNum + "% 100%";
        cells[y].style.transitionDelay = x/20 + "s";
      } 
    }

    el.className =+ " two-column-comp"
  }
}

window.onload = function(){
  twoColComp.init();
}

window.onscroll = function(){
  twoColComp.init();
}

body {
  font-family: sans-serif;
  max-width: 60em;
  margin: auto;
  padding: 1em;
}

table {
  width: 100%;
  background: #eee;
  padding: 1em;
  margin: 1em auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

th { font-size: 1.2em }

td {
  font-weight: bold;
  border-bottom: 1px solid #fbfbfb;
  width: 20%;
  padding: .5em .25em;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  transition: all .75s ease-out;
}

td:nth-child(2) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  text-align: right;
  background-image: -webkit-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: -moz-linear-gradient(to left, #e74c3c, #e74c3c);
  background-image: linear-gradient(to left, #e74c3c, #e74c3c);
  background-position: right top;
}

td:nth-child(3) {
  width: 40%;
  color: white;
  text-shadow: 1px 2px #222;
  background-image: -webkit-linear-gradient(right, #3498db, #3498db);
  background-image: -moz-linear-gradient(right, #3498db, #3498db);
  background-image: linear-gradient(right, #3498db, #3498db);
  background-position: left top;
}

<table>
  <tr>
    <th>Name</th>
    <th>Up</th>
    <th>Down</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>A</td>
    <td>700</td>
    <td>170</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>B</td>
    <td>435</td>
    <td>100</td>
    <td>Bb</td>
  </tr>
  <tr>
    <td>C</td>
    <td>500</td>
    <td>175</td>
    <td>Cc</td>
  </tr>
  <tr>
    <td>D</td>
    <td>350</td>
    <td>170</td>
    <td>Dd</td>
  </tr>
  <tr>
    <td>E</td>
    <td>1980</td>
    <td>350</td>
    <td>Ee</td>
  </tr>
  <tr>
    <td>F</td>
    <td>2000</td>
    <td>180</td>
    <td>Ff</td>
  </tr>
</table>

Thanks! You are the best! ;) – Sergey Kiziev Jan 08 '19 at 11:52 — Sergey Kiziev, Jan 08 '19 at 11:52

Animation from Javascript in table doesn't work. How to fix?

1 Answers1

Modified code