Find all elements with a width greater than xxx and print them to the console

Question

I am designing a web page in Joomla! and I ran into a problem when I have an element that I don’t see, which causes the page to scroll horizontally.

I am absolutely useless for js and jQuery, so can someone help me with a script that will output to the console all elements with a width greater than a specific value or greater than the browser window? Or can it find in some other way, which element causes the browser to scroll horizontally?

I would prefer a console with a single line of script, but the .js file will also work.

Answer 1

I suggest you look in the browser developer console. For example, Firefox can show you a nice 3D view!

If you really want to list all the elements whose width is 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 with the visible width of the body.

Answer 2

To get the width of the window, just use:

 $(window).width() 

So, to use the ComFreek example to scroll through elements wider than your window width, you should write like this:

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

Answer 3

I used

var outOfScreen = $('*').filter(function(){if($(this).width()>$(window).width())return true})

so I could check out the entire collection by contacting outOfScreen var.

Answer 4

What helped me, I worked

 $("body *").each(function() { $(this).css('background-color', 'red'); }); 

on the console. This helped me identify elements that caused the width of the document to grow beyond the width of the window. In my case, we had elements moving from outside the document border (welcome websites). There was not a single element that would be wider than the width of the window. Where simply located beyond normal boundaries.

Since I already used <meta name="viewport" content="width=device-width, initial-scale=1.0"> , I added this CSS:

 body { overflow-x: hidden; } 

Answer 5

You do not need a script. Open the page with Chrome, press F12 and on the "Elements" tab select each element and you will see each element on the page with a different color and width.