0

Can somebody tell me a way of finding first paragraph visible inside browser window in a HTML document. Means i want first paragraph not inside document(which may be greater than window area) but inside browser window(visible screen).

*P.S other than getting all 'p' elements in document and traversing to find first visible one*

Vegito1044
  • 59
  • 7
  • 2
    I doubt that this is possible without looping through all the `p` tags. – js-coder Feb 22 '13 at 13:41
  • There is an [how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport][1] [1]: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – Milche Patern Feb 22 '13 at 13:52

4 Answers4

0

I think that this is what you want:

$("p:visible:first")
gustavohenke
  • 40,997
  • 14
  • 121
  • 129
  • If I understood him right, he wants to get the first `p` in the currently visible area, not all of the document. – js-coder Feb 22 '13 at 13:43
  • on jQuery http://api.jquery.com/visible-selector/ they mention "Visible elements have a width or height that is greater than zero." but there is nothing about being visible **inside** the view-port displayed area. – Milche Patern Feb 22 '13 at 13:49
0

This should work:

$(document).ready(function(){
    var paragraphs = $('p');
    var scrollTop = $(window).scrollTop();
    var scrollBtm = scrollTop + $(window).height();
    paragraphs.each(function(e){
        var top = $(this).offset().top;
        if (top > scrollTop && top < scrollBtm){
            alert("Win");
            return false;
        }
    });
});

Edit: I realise this is traversing p tags, but at least with "return false" you won't be looping through every one, just every one above the current view.

Edit 2: Create an array of paragraphs on document.ready

Maloric
  • 5,525
  • 3
  • 31
  • 46
  • Thanks for help! But as user scroll down more and more , it will take more time, so wont do a better in html docs with large size – Vegito1044 Feb 24 '13 at 05:55
  • If you're looking for the closest p tag to the top of the screen this about the only option I think you have. However, if you're scrolling through articles, blog entries, etc. and you want to highlight the top p tag in one of those you can section it down to divs or section tags to increase the search time. – Aaron Feb 25 '13 at 03:33
  • The first thing I can think of to make the script more efficient is to get the jQuery object of the paragraphs once when the document loads, rather than each time you want to check (modified my above code to do this). Other than that you could also attach the offset top coordinate to each paragraph at the start using the jQuery data function, though these coordinates may change depending on your page. – Maloric Feb 25 '13 at 08:58
  • The only other alternative I can see is to check which paragraph is at the top of the screen every time the user scrolls, but I wouldn't advise it as I assume the number of times you want to check for the top paragraph is probably much less than the number of times your user will scroll down the page. – Maloric Feb 25 '13 at 08:58
  • 1
    yes, i have divided content into sections and then applied jquery .filter(function(){//(current scroll < paragraph height) check}) to filter paragraphs in a particular section and then selecting first from it, every time user scroll up/down from section i change current section. This reduced huge no of comparisons. – Vegito1044 Feb 26 '13 at 09:25
0

There's a jQuery plugin for this, you can give a try : www.appelsiini.net/projects/viewport

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
0

You could come up with some kind of mechanism to label your p tags based on their offset. So, when the page loads you would have to loop through your p tags (or better yet sections) and label them based on their offset position. Then it would be a simple matter of comparing the user's current scroll position to the closest offset p...

Aaron
  • 2,482
  • 1
  • 26
  • 56