Execute JQuery Function on div view

Question

Well, I'm looking for a solution for a webpage. I have a function that increase a text number but I need that the function begin on view the section. This is the function and works fine:

jQuery(document).ready(function ($) {  
    $("#chartdiv").one("inview", function(event, isInView)
        {                   
        if (isInView) 
        {
            alert("calling function");
            $.fn.numbers();
        }
    });

          /*INCREASE TEXT NUMBER*/
          $.fn.numbers = function() { 
          //$(function numbers() {
            var initialDate = new Date(2013, 06, 1);
            var now = Date.now();
            var difference = now - initialDate;
            var millisecondsPerDay = 24 * 60 * 60 * 1000;
            var daysSince = Math.floor(difference / millisecondsPerDay);
            var daysSongs = Math.floor(difference / millisecondsPerDay);
            daysSince = (daysSince * 3);
            daysSongs= (daysSongs * 12);


            //INCREASE FUNCTION
            $({someValue: 0}).animate({someValue: daysSince}, {
               duration: 3000,
               easing:'swing', // can be anything
               step: function() { // called on every step --DO NOT EXECUTE ???
                // Update the element's text with rounded-up value:

                $('#days_since').text(commaSeparateNumber(Math.round(this.someValue)));
               }
            });


            $({someValue: 0}).animate({someValue: daysSongs}, {
               duration: 3000,
               easing:'swing', // can be anything
               step: function() { // called on every step
               // Update the element's text with rounded-up value:
               $('#days_songs').text(commaSeparateNumber(Math.round(this.someValue)));
               }
             });

            };
            /**/
        });         


          //ADD COMMAS  
          function commaSeparateNumber(val){
            while (/(\d+)(\d{3})/.test(val.toString()))
            {
            val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
            }
            return val;
            }

Using JQuery INVIEW, but the INCREASE FUNCTION is not TRIGGERED

Answer 1

Ripped this from a plugin I wrote:

var $watched = $('#feed-link-text a');

var doWhenSeen = function () {
    $watched.html('<span class="feed-icon"></span>Why hello there!!')
};

var checkVisible = function (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) );
}


var visibleCheckInterval = window.setInterval( function () {
    if ( checkVisible( $watched[0]) )
        doWhenSeen();
}, 250);

To see this work, scroll to the top of this SO page, paste above code into the console, then scroll down to the RSS feed link (if this is months later and it shows an error, just replace $watched's css selector with an element on this page).

Answer 2

Try this:

if  ( $(element).is(":visible") ) { do something }

or one more solution:

    $.fn.visible = function(partial) {
        var $t        = $(this),
            $w            = $(window),
            viewTop       = $w.scrollTop(),
            viewBottom    = viewTop + $w.height() + 100,
            _top          = $t.offset().top,
            _bottom       = _top + $t.height(),
            compareTop    = partial === true ? _bottom : _top,
            compareBottom = partial === true ? _top : _bottom;
        return (viewBottom > compareBottom);
    };

if (el.visible(true)) { do something ...