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??
精彩评论