diff --git a/detect-element-resize.js b/detect-element-resize.js index cbb3c02..ec9fbfd 100644 --- a/detect-element-resize.js +++ b/detect-element-resize.js @@ -10,14 +10,14 @@ (function () { var attachEvent = document.attachEvent, stylesCreated = false; - + if (!attachEvent) { var requestFrame = (function(){ var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(fn){ return window.setTimeout(fn, 20); }; return function(fn){ return raf(fn); }; })(); - + var cancelFrame = (function(){ var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout; @@ -41,7 +41,7 @@ return element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height; } - + function scrollListener(e){ var element = this; resetTriggers(this); @@ -56,7 +56,7 @@ } }); }; - + /* Detect CSS Animations support to detect element display/re-attach */ var animation = false, animationstring = 'animation', @@ -67,8 +67,8 @@ pfx = ''; { var elm = document.createElement('fakeelement'); - if( elm.style.animationName !== undefined ) { animation = true; } - + if( elm.style.animationName !== undefined ) { animation = true; } + if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { @@ -82,12 +82,12 @@ } } } - + var animationName = 'resizeanim'; var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } '; var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; '; } - + function createStyles() { if (!stylesCreated) { //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360 @@ -96,7 +96,7 @@ '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); - + style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; @@ -108,7 +108,7 @@ stylesCreated = true; } } - + window.addResizeListener = function(element, fn){ if (attachEvent) element.attachEvent('onresize', fn); else { @@ -123,7 +123,7 @@ element.appendChild(element.__resizeTriggers__); resetTriggers(element); element.addEventListener('scroll', scrollListener, true); - + /* Listen for a css animation to detect element display/re-attach */ animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) { if(e.animationName == animationName) @@ -133,10 +133,13 @@ element.__resizeListeners__.push(fn); } }; - + window.removeResizeListener = function(element, fn){ if (attachEvent) element.detachEvent('onresize', fn); else { + if (!element.__resizeListeners__) { + return; + } element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); if (!element.__resizeListeners__.length) { element.removeEventListener('scroll', scrollListener); diff --git a/jquery.resize.js b/jquery.resize.js index ba42a80..860c7c9 100644 --- a/jquery.resize.js +++ b/jquery.resize.js @@ -10,9 +10,9 @@ (function ( $ ) { var attachEvent = document.attachEvent, stylesCreated = false; - + var jQuery_resize = $.fn.resize; - + $.fn.resize = function(callback) { return this.each(function() { if(this == window) @@ -27,14 +27,14 @@ removeResizeListener(this, callback); }); } - + if (!attachEvent) { var requestFrame = (function(){ var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(fn){ return window.setTimeout(fn, 20); }; return function(fn){ return raf(fn); }; })(); - + var cancelFrame = (function(){ var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout; @@ -58,7 +58,7 @@ return element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height; } - + function scrollListener(e){ var element = this; resetTriggers(this); @@ -73,7 +73,7 @@ } }); }; - + /* Detect CSS Animations support to detect element display/re-attach */ var animation = false, animationstring = 'animation', @@ -84,8 +84,8 @@ pfx = ''; { var elm = document.createElement('fakeelement'); - if( elm.style.animationName !== undefined ) { animation = true; } - + if( elm.style.animationName !== undefined ) { animation = true; } + if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { @@ -99,12 +99,12 @@ } } } - + var animationName = 'resizeanim'; var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } '; var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; '; } - + function createStyles() { if (!stylesCreated) { //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360 @@ -113,7 +113,7 @@ '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); - + style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; @@ -125,7 +125,7 @@ stylesCreated = true; } } - + window.addResizeListener = function(element, fn){ if (attachEvent) element.attachEvent('onresize', fn); else { @@ -140,7 +140,7 @@ element.appendChild(element.__resizeTriggers__); resetTriggers(element); element.addEventListener('scroll', scrollListener, true); - + /* Listen for a css animation to detect element display/re-attach */ animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) { if(e.animationName == animationName) @@ -150,10 +150,13 @@ element.__resizeListeners__.push(fn); } }; - + window.removeResizeListener = function(element, fn){ if (attachEvent) element.detachEvent('onresize', fn); else { + if (!element.__resizeListeners__) { + return; + } element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); if (!element.__resizeListeners__.length) { element.removeEventListener('scroll', scrollListener);