Skip to content

Instantly share code, notes, and snippets.

@nurbek-ab
Forked from LukyVj/outOfViewport.js
Last active November 15, 2017 11:02
Show Gist options
  • Save nurbek-ab/5255170338cd3e9d30ea53176b5b3a0c to your computer and use it in GitHub Desktop.
Save nurbek-ab/5255170338cd3e9d30ea53176b5b3a0c to your computer and use it in GitHub Desktop.
Detect which elements overlap your document width.
function outOfViewport(colorWrapper, colorTag, colorClass) {
const bodyWidth = document.body.offsetWidth;
const list = document.querySelectorAll('*');
for (let elem of list) {
if (elem.offsetWidth > bodyWidth) {
console.log(
`%c [` +
`%c` + elem.tagName +
`%c.` + elem.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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment