Measure amount of time on div

Question

I have a feed that contains posts. It looks something like this:

<div class="feed">
<div class="post">
  ...content...
</div>
<div class="post">
  ...content...
</div>
<div class="post">
  ...content...
</div>
</div>

If a user scrolls to a post and is there for 2 seconds (Most of the post is shown in the user's window), then we can call that a view. Is there a way in JavaScript to detect an event like this and label it as a view?

Answer 1

Here you go:

HTML:

<div id="divs">
    <div>First</div>
    <div class="selected">Second</div>
    <div>Third</div>
    <div>Fourth</div>
</div>

<p id="output"></p>

JavaScript:

var divs = $('#divs > div'),
    output = $('#output'),
    tarr = [0, 0, 0, 0],
    delay = 100;

divs.click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

setInterval(function() {
    var idx = divs.filter('.selected').index();
    tarr[idx] = tarr[idx] + delay;
    output.text('Times (in ms): ' + tarr);
}, delay);

Live demo: http://jsfiddle.net/7svZr/2/

I keep the times in milliseconds because integers are cleaner and safer ( 0.1 + 0.2.= 0.3 ). Note that you can adjust the "precision" (the delay of the interval function) by setting the delay variable.

This should do the trick:

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

Simple Utility Function This will allow you to call a utility function that accepts the element you're looking for and if you want the element to be fully in view or partially.

    function Utils() {

    }

    Utils.prototype = {
        constructor: Utils,
        isElementInView: function (element, fullyInView) {
            var pageTop = $(window).scrollTop();
            var pageBottom = pageTop + $(window).height();
            var elementTop = $(element).offset().top;
            var elementBottom = elementTop + $(element).height();

            if (fullyInView === true) {
                return ((pageTop < elementTop) && (pageBottom > elementBottom));
            } else {
                return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
            }
        }
    };

Usage

    var Utils = new Utils();
    var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

    if (isElementInView) {
        console.log('in view');
    } else {
        console.log('out of view');
    }

Cutom code I made

function Utils() {

}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function (element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();

var divs = $('#divs > div'),
    output = $('#output'),
    tarr = [0, 0, 0, 0, 0, 0, 0, 0],
    delay = 100;

setInterval(function() {
  var idx = 0;
  $(divs).each(function(){
    if(Utils.isElementInView(this, false)) {
      tarr[idx] = tarr[idx] + delay;
      output.text('Times (in ms): ' + tarr);
    }
    idx++;
  });
}, delay);

Example Demo Fiddle URL: http://jsfiddle.net/8ndzxchf/1/

Answer 2

You can use the Intersection Observer API to observe changes in the intersection of a target element with an ancestor element.

Here is a complete tutorial on Timing element visibility with the Intersection Observer API . It demonstrates how to use the Intersection Observer API to track how much time each ad is visible to the user. When an ad exceeds one minute of visible time, it will be replaced with a new one. It is very similar to your use case.