Convert jQuery snippet to plain javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm only using jQuery for the following bit of code which is a huge waste. I'd use pure CSS Viewport units: vw, vh, vmin, vmax, etc. for the same effect, but I'm using Typekit and their Javascript to load/verify their fonts and it breaks veiwport units on iOS.

Can someone convert the following jQuery snippet to plain Javascript so there is no jQuery dependency?

$(document).ready(function() {

     /*Set height of sections to window height*/
     $( "div" ).each(function(){
        var $this = $(this);
        $this.css({'min-height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'min-height':($(window).height())+'px'});
        });
    });
});
awarded to alixaxel

Crowdsource coding tasks.

3 Solutions

Winning solution

Here you go:

document.addEventListener('DOMContentLoaded', function () {
    var elements = document.querySelectorAll('div');

    Array.prototype.forEach.call(elements, function (el, i) {
        el.style.minHeight = document.documentElement.clientHeight + 'px';
    });

    window.onresize = function (event) {
        Array.prototype.forEach.call(elements, function (el, i) {
            el.style.minHeight = document.documentElement.clientHeight + 'px';
        });
    };
});
document.documentElement.clientHeight won't work in all browsers - try adding the getWindowHeight function mentioned in my solution to make this more cross-browser.
slang800 almost 5 years ago
@slang800: According to http://www.quirksmode.org/mobile/tableViewport.html#t02 it works in every notable browser. What browsers/versions are you referring to?
alixaxel almost 5 years ago

Here ya are ( http://jsfiddle.net/slang800/WX8rp/6/ ):

var getWindowHeight, setHeights;

getWindowHeight = function() {
  if (typeof window.innerWidth === 'number') {
    return window.innerHeight;
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    return document.documentElement.clientHeight;
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
    return document.body.clientHeight;
  }
};

setHeights = function() {
  var tag, _i, _len, _ref, _results;
  _ref = document.getElementsByTagName('div');
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    tag = _ref[_i];
    _results.push(tag.style.minHeight = getWindowHeight() + 'px');
  }
  return _results;
};

window.onresize = setHeights;

setHeights();

document.addEventListener( "DOMContentLoaded", function(){
  var d = document, 
      divs = [].slice.call(d.getElementsByTagName('div')), 
      i = divs.length,
      height = (d.documentElement.clientHeight || d.body.clientHeight) + 'px';
  while(i--){
    divs[i].style.minHeight = height;
  }
  window.addEventListener('resize', function(){
    var i = divs.length, 
        height = (d.documentElement.clientHeight || d.body.clientHeight) + 'px';
    while(i--){
      divs[i].style.minHeight = height;
    }
  }, false);
}, false)
View Timeline