Add Within:


Volley divides items into arrays representing rows in requested direction based on a passed starting point.

Volley can also filter items only visible within certain container, which can be any element in page, including window. To illustrate this, try adding a within element and than running any animations.

Basic volley usage

// Volley call using default values (starting point: `top`, and no filter)
$('ul.volley > li').volley().each( function( index, rowOfItems ){

	// Set background color to one row after another with 50ms delay between them
	setTimeout( function(){

		$(rowOfItems).css({ backgroundColor: '#fff' });

	}, index * 50 );

});

Customized row direction

// In this case volley will return array with columns of items from left to right
$('ul.volley > li').volley('left');

// This example returns diagonal rows starting at the left top corner
$('ul.volley > li').volley('left-top');

Filtering items based on their visibility within another element

// Returns columns from left to right, but only containing items that are currently visible in browser window
$('ul.volley > li').volley('left', window);

// If ul.volley is placed in #container, and container is set to strict size with overflow: hidden;
// volley will return only items visible within the #container, and ignore items that are outside of its borders
$('ul.volley > li').volley( 'left', $('#container')[0] );

// You can pass whole jQuery object, or a selector
$('ul.volley > li').volley( 'left', $('#container') );
$('ul.volley > li').volley( 'left', '#container' );

// You can also ignore division of items into rows, and use only visible filter
// In this case volley just filters items visible within the #container, and returns regular jQuery object
// on which you can use all element manipulation methods of jQuery
$('ul.volley > li').volley('#container').css({ backgroundColor: '#bada55' });
Fork me on GitHub