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

Question

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 1

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.

Answer 2

To get window width simply use:

$(window).width()

So to use ComFreek's example, to loop through elements wider than your window width you would write is like this:

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