JavaScript-fout: Cannot read property 'id' of null
at AnimOnScroll._init (AnimOnScroll.js:89)
at AnimOnScroll (AnimOnScroll.js:75)
at normal-animation.js:1
moet ik in lijn 89 nu null plaatsen??
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
/*
* animOnScroll.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( window ) {
'use strict';
var docElem = window.document.documentElement;
function getViewportH() {
var client = docElem['clientHeight'],
inner = window['innerHeight'];
if( client < inner )
return inner;
else
return client;
}
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
// http://stackoverflow.com/a/5598797/989439
function getOffset( el ) {
var offsetTop = 0, offsetLeft = 0;
do {
if ( !isNaN( el.offsetTop ) ) {
offsetTop += el.offsetTop;
}
if ( !isNaN( el.offsetLeft ) ) {
offsetLeft += el.offsetLeft;
}
} while( el = el.offsetParent )
return {
top : offsetTop,
left : offsetLeft
}
}
function inViewport( el, h ) {
var elH = el.offsetHeight,
scrolled = scrollY(),
viewed = scrolled + getViewportH(),
elTop = getOffset(el).top,
elBottom = elTop + elH,
// if 0, the element is considered in the viewport as soon as it enters.
// if 1, the element is considered in the viewport only when it's fully inside
// value in percentage (1 >= h >= 0)
h = h || 0;
return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
}
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function AnimOnScroll( el, options ) {
this.el = el;
this.options = extend( this.defaults, options );
this._init();
}
AnimOnScroll.prototype = {
defaults : {
// Minimum and a maximum duration of the animation (random value is chosen)
minDuration : 0,
maxDuration : 0,
// The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
// if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport.
// If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
viewportFactor : 0
},
_init : function() {
this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > li' ) );
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: 'li',
transitionDuration : 0
} );
if( Modernizr.cssanimations ) {
// the items already shown...
self.items.forEach( function( el, i ) {
if( inViewport( el ) ) {
self._checkTotalRendered();
classie.add( el, 'shown' );
}
} );
// animate on scroll the items inside the viewport
window.addEventListener( 'scroll', function() {
self._onScrollFn();
}, false );
window.addEventListener( 'resize', function() {
self._resizeHandler();
}, false );
}
});
},
_onScrollFn : function() {
var self = this;
if( !this.didScroll ) {
this.didScroll = true;
setTimeout( function() { self._scrollPage(); }, 60 );
}
},
_scrollPage : function() {
var self = this;
this.items.forEach( function( el, i ) {
if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) {
setTimeout( function() {
var perspY = scrollY() + getViewportH() / 2;
self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
self.el.style.perspectiveOrigin = '50% ' + perspY + 'px';
self._checkTotalRendered();
if( self.options.minDuration && self.options.maxDuration ) {
var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's';
el.style.WebkitAnimationDuration = randDuration;
el.style.MozAnimationDuration = randDuration;
el.style.animationDuration = randDuration;
}
classie.add( el, 'animate' );
}, 25 );
}
});
this.didScroll = false;
},
_resizeHandler : function() {
var self = this;
function delayed() {
self._scrollPage();
self.resizeTimeout = null;
}
if ( this.resizeTimeout ) {
clearTimeout( this.resizeTimeout );
}
this.resizeTimeout = setTimeout( delayed, 1000 );
},
_checkTotalRendered : function() {
++this.itemsRenderedCount;
if( this.itemsRenderedCount === this.itemsCount ) {
window.removeEventListener( 'scroll', this._onScrollFn );
}
}
}
// add to global namespace
window.AnimOnScroll = AnimOnScroll;
} )( window );
* animOnScroll.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( window ) {
'use strict';
var docElem = window.document.documentElement;
function getViewportH() {
var client = docElem['clientHeight'],
inner = window['innerHeight'];
if( client < inner )
return inner;
else
return client;
}
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
// http://stackoverflow.com/a/5598797/989439
function getOffset( el ) {
var offsetTop = 0, offsetLeft = 0;
do {
if ( !isNaN( el.offsetTop ) ) {
offsetTop += el.offsetTop;
}
if ( !isNaN( el.offsetLeft ) ) {
offsetLeft += el.offsetLeft;
}
} while( el = el.offsetParent )
return {
top : offsetTop,
left : offsetLeft
}
}
function inViewport( el, h ) {
var elH = el.offsetHeight,
scrolled = scrollY(),
viewed = scrolled + getViewportH(),
elTop = getOffset(el).top,
elBottom = elTop + elH,
// if 0, the element is considered in the viewport as soon as it enters.
// if 1, the element is considered in the viewport only when it's fully inside
// value in percentage (1 >= h >= 0)
h = h || 0;
return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
}
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function AnimOnScroll( el, options ) {
this.el = el;
this.options = extend( this.defaults, options );
this._init();
}
AnimOnScroll.prototype = {
defaults : {
// Minimum and a maximum duration of the animation (random value is chosen)
minDuration : 0,
maxDuration : 0,
// The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
// if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport.
// If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
viewportFactor : 0
},
_init : function() {
this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > li' ) );
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: 'li',
transitionDuration : 0
} );
if( Modernizr.cssanimations ) {
// the items already shown...
self.items.forEach( function( el, i ) {
if( inViewport( el ) ) {
self._checkTotalRendered();
classie.add( el, 'shown' );
}
} );
// animate on scroll the items inside the viewport
window.addEventListener( 'scroll', function() {
self._onScrollFn();
}, false );
window.addEventListener( 'resize', function() {
self._resizeHandler();
}, false );
}
});
},
_onScrollFn : function() {
var self = this;
if( !this.didScroll ) {
this.didScroll = true;
setTimeout( function() { self._scrollPage(); }, 60 );
}
},
_scrollPage : function() {
var self = this;
this.items.forEach( function( el, i ) {
if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) {
setTimeout( function() {
var perspY = scrollY() + getViewportH() / 2;
self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
self.el.style.perspectiveOrigin = '50% ' + perspY + 'px';
self._checkTotalRendered();
if( self.options.minDuration && self.options.maxDuration ) {
var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's';
el.style.WebkitAnimationDuration = randDuration;
el.style.MozAnimationDuration = randDuration;
el.style.animationDuration = randDuration;
}
classie.add( el, 'animate' );
}, 25 );
}
});
this.didScroll = false;
},
_resizeHandler : function() {
var self = this;
function delayed() {
self._scrollPage();
self.resizeTimeout = null;
}
if ( this.resizeTimeout ) {
clearTimeout( this.resizeTimeout );
}
this.resizeTimeout = setTimeout( delayed, 1000 );
},
_checkTotalRendered : function() {
++this.itemsRenderedCount;
if( this.itemsRenderedCount === this.itemsCount ) {
window.removeEventListener( 'scroll', this._onScrollFn );
}
}
}
// add to global namespace
window.AnimOnScroll = AnimOnScroll;
} )( window );
Titel en [code][/code]-tags aangepast.[/modedit]
Gewijzigd op 23/03/2017 10:53:52 door Rob migaleddu
this.el.id
ik denk dat die afkomt van regel 73: this.el = el
dus de el die als parameter meegegeven wordt aan de functie AnimOnScroll()
waarschijnlijk staat er ergens anders in je code iets van
AnimOnScroll(EENELEMENT)
heeft dat betreffende element wel een id?
(
ik denk trouwens dat document.querySelectorAll('#' + this.el.id + ' > li') niet de mooiste methode is
zou
$(this).find('li');
of
$(this).children('li');
niet hetzelfde kunnen doen?
)
Code (php)
1
2
3
4
5
2
3
4
5
new AnimOnScroll(document.getElementById('grid'), {
minDuration: 0.4,
maxDuration: 0.7,
viewportFactor: 0.2
});
minDuration: 0.4,
maxDuration: 0.7,
viewportFactor: 0.2
});
dus de ()id het verwijst naar grid
maar verder dan dat weeet ik niet
Toevoeging op 23/03/2017 22:55:52:
regel 75 weggelaten en ....het gaat super nu
gr