javascript - How does this js code relate to my css? -

javascript - How does this js code relate to my css? -

i'm trying integrate animonscroll.js website.

i receiving 'cannot read property id' on next line:

this.items = array.prototype.slice.call( document.queryselectorall( '.container' + this.el.id + '.grid_4' ) );

i'm guessing need edit line within animonscroll?

my layout so:

<div class="container"> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div>

with next information, how should edit js line above?

here's total js:

function animonscroll( el, options ) { this.el = el; this.options = extend( this.defaults, options ); this._init(); } animonscroll.prototype = { defaults : { // minimum , maximum duration of animation (random value chosen) minduration : 0, maxduration : 0, // viewportfactor defines how much of appearing item has visible in order trigger animation // if we'd utilize value of 0, mean add together animation class item in viewport. // if utilize value of 1, animation triggered when see of item in viewport (100% of it) viewportfactor : 0 }, _init : function() { this.items = array.prototype.slice.call( document.queryselectorall( '.container' + this.el.id + '.grid_4' ) ); this.itemscount = this.items.length; this.itemsrenderedcount = 0; this.didscroll = false; var self = this; imagesloaded( this.el, function() { // initialize masonry new masonry( self.el, { itemselector: '.grid_4', transitionduration : 0 } ); if( modernizr.cssanimations ) { // items shown... self.items.foreach( function( el, ) { if( inviewport( el ) ) { self._checktotalrendered(); classie.add( el, 'shown' ); } } ); // animate on scroll items within viewport window.addeventlistener( 'scroll', function() { self._onscrollfn(); }, false ); window.addeventlistener( 'resize', function() { self._resizehandler(); }, false ); } }); },

javascript