JQM - How to detect if item is shown on screen

Question

I'm using JQuery mobile and I would like to raise an event when the listview is scrolled and a specific item is shown on screen.

Is there an event for this?! what are my options?!

Thanks.

Answer 1

AFAIK there are no events in jQM to do this, but you could combine ideas from some other solutions on StackOverflow to do this.

This question provides some code to determine if an item is visible, i.e.:

function isScrolledIntoView(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)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}

You can combine this with the scrollstop event. Say you are monitoring a <li> item defined as

 <li id="myiditem">
      <a href="bmw.html">I'm being watched!!</a>
 </li>

Then in $(document).ready you can do

var watchitem;
$(document).ready(function(){
    watchitem = document.getElementById ('myiditem');  
    /* Bind to scroll event */
    $(window).bind('scrollstop', function () {
        if (isScrolledIntoView( watchitem )) {
            alert('monitored li item was scrolled into view');
        }
    });
}); 

Here is a jsFiddle example.