Skip to content

Instantly share code, notes, and snippets.

@jcward
Last active August 29, 2015 14:22
Show Gist options
  • Select an option

  • Save jcward/53b6f4b48c53ba85e438 to your computer and use it in GitHub Desktop.

Select an option

Save jcward/53b6f4b48c53ba85e438 to your computer and use it in GitHub Desktop.
JavaScript test to identify all elements with a width or min-width style that break the window width (e.g. cause horizontal scroll bar).
// http://stackoverflow.com/a/22638396/1026023 - added try/catch
function css(a) {
var sheets = document.styleSheets, o = [];
a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
var m = 0;
try {
m = a.matches(rules[r].selectorText);
} catch (e) { }
if (m) {
o.push(rules[r].cssText);
}
}
}
return o;
}
var all = document.getElementsByTagName("*"), i = 0, rect;
for (; i < all.length; i++) {
var rules = css(all[i])+"";
var w = 0;
if (rules.match(/min\-width\s*:\s*(\d+)px/)) w = rules.match(/min\-width\s*:\s*(\d+)px/)[1];
if (rules.match(/\swidth\s*:\s*(\d+)px/)) w = rules.match(/\swidth\s*:\s*(\d+)px/)[1];
if (all[i].getBoundingClientRect().left + w > $(window).width()) {
all[i].style.outline = "1px solid red";
console.log(all[i]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment