开发者

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

For example, stackoverflow website is centered with 'whitespace' filling the width of my 1920x1200 scre开发者_运维技巧en. 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 ?


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.


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


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??

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜