Mobile Width Problem Helpers

mobile-width-helpers.js

// not for production use
function MobileWidthHelpers () {
  this.stringName = stringName;
  var ignoreElements = [
    'SCRIPT',
    'LINK',
    'META'
  ];

  function stringName ($el) {
    var tagName = $el.prop('tagName');
    var id;
    var elClass;
    var $closest;
    var name = '';
    if (ignoreElements.indexOf(tagName) > -1) {
      return;
    }
    id = $el.attr('id');
    if (id) {
      name += '#' + id;
    }
    elClass = $el.attr('class');
    if (elClass) {
      name += '.' + elClass;
    }
    if (!name) {
      $closest = $el.closest();
      name += ($closest.attr('id') ? '#' + $closest.attr('id') : '') + ($closest.attr('class') ? '#' + $closest.attr('class') : '') + '> ""';
    }
    return name;
  }

}
// find elements obviously outside the width of the viewport
MobileWidthHelpers.prototype.printOutliers = function printOutliers () {
  var self = this;

  jQuery('*').each(function () {
    var $this = jQuery(this);
    var width = $this.width();
    var stringName;
    if (width > window.innerWidth) {
      stringName = self.stringName($this);
      if (typeof stringName === 'undefined') {
        return true;
      }
      console.info(width, $this[0]);
    }
  });
};

// create map of all elements to element widths that can be diffed after some change in the DOM
MobileWidthHelpers.prototype.printSummary = function printSummary () {
  var self = this;
  var stringMap = '';
  jQuery('*').each(function () {
    var $this = jQuery(this);
    stringMap += self.stringName($this) + ': ' + $this.width() + '\n';
  });
  console.log(stringMap);
};

var mwh = new MobileWidthHelpers();