Gatos Gatos - 3 months ago 8
CSS Question

Find all elements with width larger than xxx and output them to console

I am designing a web page in Joomla! and I run into a problem where I have an element I can't see that causes the page to scroll horizontally.

I'm completely useless with js and jQuery so can anyone help me with a script that will output to console all elements that have width larger than a specific value or larger than the browser window ? Or that can find in some other way which element causes the browser scroll horizontally ?

I would prefer a one line console script but a .js file will do also.

Answer

I suggest you to have a look in your browser's developer console. For example, Firefox can display you a nice 3D view!

If you really want to enumerate all elements whose width are greater than x in JavaScript, use this:

$("*").each(function() {
    if ($(this).width() > 100) {
        console.log(this.tagName + "#" + this.id);
    }
});

Use document.body.clientWidth for x if you want to compare against the body's visible width.