Using javascript or jQuery, how can I detect an unused "whitespace" realestate screen?

Question

For example, the stackoverflow website has “spaces” filling the 1920x1200 screen width. I am trying to find javascript or jQuery code to determine where free space is available on any website and fill it in or overlay on an image or div. Is it possible?

Answer 1

That would be very difficult to do. It will be difficult for you to do it reliably in such a way that it works on any website, even on websites that you do not control.

What you can do is to walk around the entire DOM and figure out the rectangle that each visible element occupies, but how do you determine the visibility? Sometimes what you see as a space is a div with a white background that sits on top of some other div, sometimes you see an element with a fixed body, sometimes it is slightly off-white or a different color, etc.

Answer 2

There are apparently methods for parsing the DOM and rendering them onto the canvas, which is mentioned here. Using HTML5 / Canvas / JavaScript to create screenshots

The moment you have your canvas, you can start scanning pixels to view sections of the screen that have the same color.

See also: https://github.com/niklasvh/html2canvas

Answer 3

Current best solution:

$(document).ready(function() { loadWhiteSpaceDetector() }); function loadWhiteSpaceDetector() { alert("Dear user, please 'see' the whitespace and decide what to do since as a program I'm unable to do it. It a hard problem. But the human brain can differentiate between wasted and real estate irrespective of "color" I can only detect white since you asked me to. But @thomasrutter pointed out A LOT of flaws with my approach."); } 

This will work with any browser :)

Jokes aside, but it is very difficult to do, since you really do not know if whitespace = empty space or empty space (or = blackspace or purplespace, for that matter). The question is not whether detection of spaces is more important, but what is the value of showing this "div / image" on the screen? Wouldn't that add extra mess and make a little difference?