Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Mobile Width Problem Helpers
// 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment