CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
Skylar Saveland
Skylar Saveland

Reputation: 11464

Setting `-moz-column-width` with JavaScript

This works with Chrome but not FireFox.

CSS:

.song {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule: 1px outset #ff00ff;
  -moz-column-rule: 1px outset #ff00ff;
  column-rule: 1px outset #ff00ff;
}

JavaScript (minimal example):

_setColumnWidth = function(column_width) {
    var el, els, w, _i, _len;
    console.log("_setColumnWidth!!!");
    els = document.querySelectorAll(".song");
    w = column_width + "em";
    console.log(w);
    for (_i = 0, _len = els.length; _i < _len; _i++) {
      el = els[_i];
      console.log(el);
      el.style["-webkit-column-width"] = w;
      el.style["-moz-column-width"] = w;
      el.style["column-width"] = w;
    }
  };

window.onload = function() {
  console.log("OK!!!");
  _setColumnWidth(30);
}

Markup:

<div class="song">
  <pre>
I been a-havin' some hard travellin', I thought you knowed,
                                      A7
I been a-havin' some hard travellin', way down the road,
D                    D7               G              G7
I been a-havin' some hard travellin', hard ramblin', hard gamblin',
D                   A               D
I been havin' some hard travellin', Lord.
  ...
  </pre>
</div>

It looks like -moz-column-width does not get set at all. Plunk: http://plnkr.co/edit/PA05b5SPGPmmq13Y9PtR?p=preview

You can see that this does work on Chrome: http://pdh.github.io/meltodies/#/Hard%20Travellin::df42773501228606be03d90d583c2f6c

Upvotes: 1

Views: 89

Answers (1)

Skylar Saveland
Skylar Saveland

Reputation: 11464

For whatever reason, el.style['-moz-column-width'] = '15em'; will not work. Instead, try:

el.style.MozColumnWidth = '15em';

Upvotes: 1

Related Questions