Squirrl Squirrl - 7 months ago 10
Javascript Question

Using JS, is there someway of detecting which text is viewable in a browser window?

Using jQuery, I'm selecting all the text within a div with

var c = $('#content').text();


But I would like to select only the text that is being viewed within the browser window. So just as a rough example to clarify my thoughts, look at the image below:

enter image description here

should only return:


A bicycle frame is the main component of a bicycle, onto which wheels and other


Yet if I were to open the browser, and rerun the code

enter image description here


A bicycle frame is the main component of a bicycle, onto which wheels and other components are fitted. The modern and most common frame design for an upright bicycle is based on the safety bicycle, and consists of two triangles, a main triangle and a paired rear triangle. This is known as the diamond frame.1 Frames are required to be strong, stiff and light, which they do by combining different materials and shapes.


should be returned.

Is there someway of detecting which text is viewable at any given moment in a browser window?

Answer

Yes, you will need to measure the viewport to calculate the distance from the top the element is. See this fiddle.

$.fn.is_on_screen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).scroll(function(){ // bind window scroll event
    if( $('.target').length > 0 ) { // if target element exists in DOM
        if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
            $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
        } else {
            $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
        }
    }
});

HTML

<div class="log">log</div>

scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>


<div class="target label label-info">target element</div>


scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>

CSS

.log {
    position: fixed;
    right: 20px;
    top: 20px;
}