Skip to content

Instantly share code, notes, and snippets.

@LukyVj
Last active November 15, 2017 10:44
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save LukyVj/c14e92a621dcbab801e8cbc0245ab672 to your computer and use it in GitHub Desktop.
Save LukyVj/c14e92a621dcbab801e8cbc0245ab672 to your computer and use it in GitHub Desktop.
Detect which elements overlap your document width.
function outOfViewport(colorWrapper, colorTag, colorClass) {
var w = document.body.offsetWidth,
it = document.querySelectorAll('*');
for ( i in it) {
if( it[i].offsetWidth > w ) {
console.log(
`%c [` +
`%c` + it[i].tagName +
`%c.`+ it[i].classList +
`%c]`+
`%c is wider than the document width`,
`color: ${colorWrapper}; font-weight: bold;`,
`color: ${colorTag};text-transform:lowercase; font-weight: bold;`,
`color: ${colorClass}; font-weight: bold;`,
`color: ${colorWrapper}; font-weight: bold;`,
`color: black; font-weight: 300;`
);
} else {
console.clear()
console.log(
`%c Looks like everything fit! 😊`,`color: green; font-weight: bold;`
)
}
}
}
outOfViewport('red', 'dodgerblue', 'rebeccapurple')
@LukyVj
Copy link
Author

LukyVj commented Jun 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment