How to detect an empty space on a web page

Question

Is there a way to detect an empty area, without text or images within a web page, using JavaScript?

More precisely, how to determine whether point [x,y] is within a blank area, like in the following example (marked in red)

EDIT: I want to make my question clearer, I'm building an extension which supposed to mark search results as trustworthy or as spam, I want to put my marking at the end of the text of a result item URL. I also want to do it in a generic way, so it wouldn't work only in Google web page. an example is shown below:

By what metric do you calculate that something is 'empty'? Given your example, that red dot is most likely part of the same div element that the text of the question is contained in, as well as the parent elements of that div. — Rory McCrossan, Jan 05 '16 at 12:28
It looks like you're just looking for whitespace between html tags but I'm not sure — SidOfc, Jan 05 '16 at 12:30
@SidneyLiebrand I want to detect whitespace, even if it is **inside** tags. (like in my example, within a textarea) — happyOasis, Jan 05 '16 at 12:46
@user5729875 I don't know what you want to use it for tho but this seems like an awfully bad idea, perhaps this is because you're sharing a problem derived from a solution rather than the actual problem, if we know the actual problem there might be another way for us to help which *could possibly* be better / easier to understand — SidOfc, Jan 05 '16 at 13:01
@SidneyLiebrand - in other words, http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — , Jan 05 '16 at 13:38

Roamer-1888 · Answer 1 · 2016-01-06T10:00:27.477

2

You can test for genuine white space like this :

function isWhiteSpace(coords) {
    var element = document.elementFromPoint(coords.x, coords.y);
    var whitespace = $(document).add("body, html");
    return (whitespace.get().indexOf(element) > -1) ? true : false;
}

where coords is an object with .x and .y properties.

DEMO

document.elementFromPoint(), documented here, is "an experimental technology", so I wouldn't trust my life to it. Test thoroughly on all target platforms.

Edit

For the full detection of all the white you seek, isWhiteSpace() would be the first of two stages. The second stage would be isVisualWhiteSpace() implemented with @remdevtec's approach for example.

As my isWhiteSpace(coords) is inexpensive, you would perform it first and only if it returned false go for the expensive test. You could use the protective property of ||

var isWhite = isWhiteSpace(coords) || isVisualWhiteSpace(coords);

But your real problem will be writing isVisualWhiteSpace(). I can't help with that.

edited Jan 06 '16 at 10:00

answered Jan 05 '16 at 21:17

Roamer-1888

19,138
5
33
44

Thanks, by I don't want only genuine whitespace, I would also so want to detect it if it is inside a div.container, or even empty space between paragraphs inside textarea. – happyOasis Jan 06 '16 at 08:46
I know that and think you have a massive conceptual if not technical issue in detecting "visual" white space. Let's say you could get @remdevtec's approach to work, then you would presumably want to distinguish between "unoccupied" and "occupied" white space. Consider, for example, a div containing text - how would you distinguish between the white you wish to detect and the white in amongst the text, including the white in enclosed characters such as "O" or "P"? You may have set youself an impossible task. – Roamer-1888 Jan 06 '16 at 09:45

guysigner · Answer 2 · 2016-01-05T13:27:42.200

0

One approach would be to work with a screenshot of the window.

You can use libraries like html2canvas to load a screenshot to a HTML canvas element.

Next, on window.onclick, use the automatic event parameter to get an RGBA array of the clicked coordinate:

var pixelData = canvas.getContext('2d').getImageData(
   event.offsetX,
   event.offsetY, 1, 1)
.data;

Now if all (or at least the first three) pixelData's items equal 255, it means that this point is white.

if (pixelData[0] == 255 && pixelData[1] == 255 && pixelData[2] == 255) {
  // the clicked point is white,
  // and if the background-color is white, 
  // it can be considered an empty point
}

Of course, the down side is that you have to know the background color of the site you're testing, or the background color of the element you click in.

edited Jan 05 '16 at 13:27

answered Jan 05 '16 at 13:22

guysigner

2,822
1
19
23

Maybe compare it to the page background, instead of white? – Dropout Jan 05 '16 at 13:31
1

Good point. If you have easy access to the relevant css code (for example if you own the site). The fun part is that you can use this approach on any site, even if you don't have readable source code. – guysigner Jan 05 '16 at 13:35

score -1 · Answer 3 · edited May 23 '17 at 12:33

You can build a matrix with width and length of the page.
Set all matrix cells to zero.
Get all elements of the DOM.
Get x, y, width, and height of each element, this link may help Retrieve the position (X,Y) of an HTML element

Draw the elements in the matrix

 for(k=0;k < dom_elements.length;k++) {
    for(i=dom_elements[k].y;i < dom_elements[k].length;i++) {
        for(j=dom_elements[k].x;j < dom_elements[k].width;j++) {

             matrix[i][j] = 1 ;

        }
    }
 }

And finally check if matrix[i][j] is set to zero or 1

How to detect an empty space on a web page

3 Answers3