7

For example, stackoverflow website is centered with 'whitespace' filling the width of my 1920x1200 screen. I'm trying to find javascript or jQuery code to detect where available whitespace is on any website and fill it or overlay with an image or div. Is that even possible ?

Dan Grossman
  • 51,866
  • 10
  • 112
  • 101
Justin
  • 305
  • 1
  • 7

3 Answers3

1

This would be extremely hard to do. You would be hard pressed to do it reliably in a way that would work on any website, even websites you don't control.

What you could do is walk the whole DOM and figure out the rectangle that each visible element takes up - but then how do you define visible? Sometimes what you see as whitespace is a div with a white background which is on top of some other div, sometimes you're seeing the bare body element, sometimes it's slightly off-white, or a different color, etc.

thomasrutter
  • 114,488
  • 30
  • 148
  • 167
  • OK I thought it was an interesting idea but after a lot of reading, it may not be possible (yet) with JS. It *could* be possible using some combination of JS/PHP/GD libraries and capturing a screenshot, then analyzing the image. But that's probably too slow and resource intensive. – Justin Jul 22 '11 at 06:01
  • I fear that PHP/GD solution would be even more complicated and time consuming. If I did have to do this, I'd probably go the walk-the-DOM route. You'd have to develop a bunch of heuristics around what is "whitespace" ie tolerate anything with transparent background where the parent is white, anything with white background, unless it has text in it or an image, etc etc. – thomasrutter Jul 25 '11 at 05:04
1

It looks there are techniques for parsing the DOM and rendering them to a canvas which are referred to here Using HTML5/Canvas/JavaScript to take screenshots

At the point that you've got your canvas, you could then start scanning pixels to look for sections of the screen that are all one color.

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

Community
  • 1
  • 1
elrasguno
  • 229
  • 3
  • 5
0

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's 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 this is very hard to do since you really don't know if whitespace = blankspace or wasted space (or = blackspace or purplespace for that matter). The question is not whether detecting the whitespace is more important, but what is the value of showing that "div/image" on the screen? Wouldn't it add to additional clutter and make things look a bit off??

PhD
  • 11,202
  • 14
  • 64
  • 112