How to get the content displayed in the browser window

Question

How can I find out what part of a long document is currently displayed?

eg. if my html contains 1000 lines
one
2
3
...
999
1000

and the user is near the middle showing the 500th line, then I would like to get "500 \ n501 \ n502" or something like that.

Obviously, most of the scenarios will be more complicated than this, but my requirement is to find what text is currently displayed in the browser view so that I can show the status value corresponding to the current text.

Thanks Martin

Answer 1

You can get the value in pixels from the scrollTop property:

document.body.scrollTop = 40;

To find out which part of your document is visible, you can scroll (say) all p-tags until you find a value with a negative scrollTop value. The one before that is at the top of the window.

Answer 2

If you have jQuery, you can use this function to check if the DOM element is currently displayed in the viewport:

function isInView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); } 

Answer 3

Yes, there is a way. I will use the YUI API to illustrate my example. First, your text should be in some dom element, be it span, div, p or something else, it should be in the element. Here I will read the list item

 var viewPortY = YAHOO.util.Dom.getDocumentScrollTop(), viewPortHeight = YAHOO.util.Dom.getViewportHeight(), i = 0, // get all the dom elements that contain the text, sorry if this isn't exact, its just a rough example items = YAHOO.util.Dom.getElementBy(null, 'li', document.getElementById('item-container')), viewedItems = []; for (i = 0 ; i < items.length; i++) { var y = YAHOO.util.Dom.getY(items[i]) if (y > viewPortY && y < (viewPortY + viewPortHeight)) { viewedItems.push(items[i]) } } 

So, essentially, I get all the dom objects that contain text that interests you. Then I scroll, and no matter who coordinates Y between the viewports Y and Y + ViewPort Height, I put in an array.

Answer 4

I implemented what I considered a more optimal solution for my environment:

I am writing for Android, so I can easily interact with the Java class from javascript. My actual solution was getting offsetTop all the tags that interest me, and passing offsets in java.

An onscroll handler is also registered, which passed window.pageYOffset throught to the same Java class. Then the java class can compare the offsetTop each tag with pageYOffset to see which tag is at the top of the current viewport.

Answer 5

I just saw the msdn example code snippet

 function isinView(oObject) { var oParent = oObject.offsetParent; var iOffsetTop = oObject.offsetTop; var iClientHeight = oParent.clientHeight; if (iOffsetTop > iClientHeight) { alert("Special Text not in view. Expand Window to put Text in View."); } else{ alert("Special Text in View!"); } }