style.clip is empty -- need to know if part of div is visible

Question

I have a simple div. When the browser (Firefox version 26) window is shrunk, the viewable area of the div is partly invisible.

I need to find out when a specific location (the right middle edge of the div, for example) is visible.

Much to my surprise, the following yields an empty value -- no string, no rect, nothing. Cannot figure out why. The docs and examples I've see indicate that style.clip should return a string with the clipping rect's top, right, bottom, left values of the visible part of the element.

For example, even W3schools.com shows that.

Here's my code.

 window.onresize = function(event) 
 {
   console.log("Hi, we're about to get the clip rect for myDiv.");
   console.log("myDiv clip rect is: " + document.getElementById('myDiv').style.clip);
 }


   <div id="myDiv" style="height: 99%; display: inline-block; width: 99%;
             background-color: red"></div>

I can see the div (red background). But style.clip for myDiv is empty, no string, nothing. My "!DOCTYPE html" is at the top of the page. Cannot figure this out, probably something simple though.

Any ideas? By the way: will not be using any javascript libraries here, just pure natural javascript.

Answer 1

The problem was that when shrinking the browser window's width, even though the browser window's horizontal scrollbar appeared, scrolling to the right yielded an empty region even though there was data there. I fixed this by setting a hardcoded width for the div -- also found I could programmatically increase the width of the div as the 'scrollWidth' increased -- either method worked.