Data-attributes not working in IE

Question

I'm trying to create an animated bar graph in Javascript/CSS.

It is working perfectly on Chrome, Firefox, Safari, and on mobile devices. However, it doesn't work in any version of IE (including IE11, which is really strange).

I've tried giving each bar a specific ID and targeting that with .getElementById and .getAttribute, but that didn't work.

From Googling, data-attributes, .css(), and .animate() should work in IE11. All questions about bugs seem to be for older versions.

I'd really appreciate an extra set of eyes.

Thank you,

Fiddle is attached: http://jsfiddle.net/828s8Lvx/

Also my code is below:

HTML:

<div id="platform-chart">
    <ul class="bars">
      <li><div data-percentage="1.6" class="bar"></div><span>1</span></li>
      <li><div data-percentage="1.3" class="bar"></div><span>2</span></li>
      <li><div data-percentage="0.8" class="bar"></div><span>3</span></li>
      <li><div data-percentage="5.2" class="bar"></div><span>4</span></li>
      <li><div data-percentage="9.4" class="bar"></div><span>5</span></li>
      <li><div data-percentage="17.0" class="bar"></div><span>6</span></li>
      <li><div data-percentage="14.9" class="bar"></div><span>7</span></li>
      <li><div data-percentage="14.4" class="bar"></div><span>8</span></li>
      <li><div data-percentage="13.6" class="bar"></div><span>9</span></li>
      <li><div data-percentage="13.6" class="bar"></div><span>10</span></li>
      <li><div data-percentage="6.5" class="bar"></div><span>11</span></li>
      <li><div data-percentage="1.3" class="bar"></div><span>12</span></li>
      <li><div data-percentage="0.3" class="bar"></div><span>13</span></li>
    </ul>
  </div>

Javascript:

      $(".bars li div").each( function( key, bar ) {
        var self = this;
        setTimeout (function() {
          $(self).css({ 'opacity' : 1 });
          var percentage = ($(self).attr('data-percentage') * 3.8);
          $(self).animate({ 'height' : percentage + '%' }, 1500);
        }, key * 300);
      });

SASS:

#platform-chart {
position: relative;
left: 50%;

.bars {
  display: inline-block;
  height: 300px;
  width: 950px;

  li {
    display: table-cell;
    width: 100px;
    height: 300px;
    text-align: center;
    position: relative;

    .bar {
      position: absolute;
      bottom: 0;
      display: block;
      background: #f4804b; 
      width: 50px;
      margin-left: 20px;

      &:after {
        position: relative;
        bottom: 20px;
        color: #f4804b;
        content: attr(data-percentage) '%';
      }
    }

    span {
      position: absolute;
      color: #000;
      width: 100%;
      bottom: -2em; 
      left: 7px;
    }
  }
}

parseFloat($(self).attr('data-percentage')) it's a string by default. There's a possibility browsers that don't suck will convert automatically, and IE just leaves it as a string and gets confused. I have no links to prove this, so it's just a theory — Kai Qing
– Kai Qing, Commented Nov 20, 2014 at 0:27
It's because you're forcing the LI elements to be display table-cell, which means they have no height in IE, and the setting the DIV inside to a percentage height doesn't work as the parent has no height. Remove the table-cell thing, and find a better way to get the layout you want. — adeneo
– adeneo, Commented Nov 20, 2014 at 0:38
Thanks, I didn't realize that table-cell worked that way in IE. That's really good to know. I switched the ul to display:flex and the li to display:inline-block (it was the only thing that seemed to work). Now it works on Chrome, Firefox, IE, etc. but breaks on iOS. Going to try targeting those devices and changing the display mode in JS. — BastionGamma
– BastionGamma, Commented Nov 20, 2014 at 15:27

elzi · Accepted Answer · 2014-11-20 00:50:32Z

1

IE cannot calculae percentage height of a parent element that is displayed as a table-cell. Switching this to inline-block will partially solve it. Then add this (albeit a bit hacky) javascript to emulate the behavior of table-cell to fit them all in the div

var totalItems = $(".bars li").length;
$(".bars li").width((100/totalItems)+'%');

edited Nov 20, 2014 at 0:50

answered Nov 20, 2014 at 0:27

elzi

5,6927 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BastionGamma Over a year ago

That JS didn't seem to work, but that's a good suggestion to try and get the wanted display property through JS instead of CSS. Will experiment.

BastionGamma Over a year ago

The display:flex thing mentioned above caused more trouble than it was worth (broke in Safari/iOS). Switched to inline block and manually changed all the widths. Marking as answered. Thanks!

elzi Over a year ago

The JS works fine. To be clear, it should be outside of the .each() loop

Collectives™ on Stack Overflow

Data-attributes not working in IE

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related