Viewport JQuery - Change Document Ready To If Element Is In Viewport

While working on a bigger project I made a box with different content. The box is 1000px width and shows 5 (out of 50) pictures. The box pages swtich from the first 5 to the next 5

Solution 1:

You need to listen for the window scroll event, and fire a callback to check if the box is in the viewport yet.

Listening to the scroll event can be dangerous from a performance aspect, as naturally the callback will fire whenever the user is scrolling. It's considered best practise to limit the times the callback is fired using a throttling mechanic.

This working example checks the user scroll position 4 times every second, and disables the event listener once the box has appeared in view.

http://jsfiddle.net/H9xr8/1/

// document ready
$(function () {

    // define the isOnScreen plugin from http://jsfiddle.net/moagrius/wN7ah/
    $.fn.isOnScreen = function() {
        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft(),
            right: win.scrollLeft() + win.width(),
            bottom: win.scrollTop() + 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)); 
    };

    // define throttling function for use in scroll event listener
    // ref: http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/
    function throttle(delay, callback) {
        var previousCall = new Date().getTime();
        return function() {
            var time = new Date().getTime();
            if ((time - previousCall) >= delay) {
                previousCall = time;
                callback.apply(null, arguments);
            }
        };
    }

    // set up an event to listen for window scroll 4 times a second
    $(window).on('scroll', throttle( 250, function () {

        // if #the-box is visible the call init functions and disable window scroll
        // event listener, as you only want to initialise the lightbox once
        if ( $("#the-box").isOnScreen() ) {

            // for demo purposes
            alert('init');

            // call your init functions here
            //getThemenCount();
            //moveThemenAnimate();

            // turn off scroll listener
            $(window).off('scroll');
        }
    }));
});

Solution 2:

Based on what has been posted, this could be a simple working example,

http://jsbin.com/majavubu/1/edit

js

$(document).ready(function(){

  $(window).scroll(function(){
    if($(".the-box").isOnScreen()){
      if(!animationStarted){
        startAnimation();
      }
  }else{
    stopAnimation();
  }
  });
});

var animationStarted=false;
function startAnimation(){
  animationStarted = true;
  for(var i=0;i<10&&animationStarted;i++){
    $(".the-box").animate({"background-color":randomColor()}).delay(500);
  }
}

function stopAnimation(){
  animationStarted = false;
  $(".the-box").stop();
  $(".the-box").css("background-color","white");
}

$.fn.isOnScreen = 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));

};



function randomColor(){return '#'+Math.floor(Math.random()*16777215).toString(16);}