Better cross-browser support

Adds better cross-browser support, it now uses MutationObservers only on IE11.
sdecima · Jan 2, 2014 · 6eaa5f9 · 6eaa5f9
1 parent f051517
commit 6eaa5f9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -58,12 +58,19 @@ Works great on:
 
  - Chrome
  - Firefox
- - IE 11 and below (tested on 11, 10, 9, 8 and 7)
+ - IE 10 and below (tested on 10, 9, 8 and 7)
+
+Works but limited:
+
+ - IE 11: due to lack of onresize/overflow events, it only detects changes through a MutationObserver;  
+   i.e. only javascript generated resize changes and not CSS pseudo classes e.g. :hover, CSS animations, etc.
 
 Doesn't work on:
 
  - ???
 
+Please [let me know](https://github.com/sdecima/javascript-detect-element-resize/issues) if you test these libraries on any other browser, of if you run into issues with any of the above browsers.
+
 TODO
 ====
 
@@ -72,6 +79,11 @@ TODO
 
 Release Notes
 =============
+v0.4
+----
+
+ - Adds better cross-browser support, it now uses MutationObservers only on IE11.
+
 v0.3
 ----
 

diff --git a/detect-element-resize.js b/detect-element-resize.js
@@ -4,10 +4,13 @@
 * https://github.com/sdecima/javascript-detect-element-resize
 * Sebastian Decima
 *
-* version: 0.3
+* version: 0.4
 **/
 
 (function ( $ ) {
+	var is_above_ie10 = !(window.ActiveXObject) && "ActiveXObject" in window;
+	var supports_mutation_observer = 'MutationObserver' in window;
+
 	function addFlowListener(element, type, fn){
 		var flow = type == 'over';
 		element.addEventListener('OverflowEvent' in window ? 'overflowchanged' : type + 'flow', function(e){
@@ -52,13 +55,13 @@
 	};
 
 	function addResizeListener(element, fn){
-		if ('MutationObserver' in window) {
+		if (is_above_ie10 && supports_mutation_observer) {
 			fn._mutationObserver = addResizeMutationObserver(element, fn);
 			var events = element._mutationObservers || (element._mutationObservers = []);
 			if (indexOf.call(events, fn) == -1) events.push(fn);		
 		} else {
-			var resize = 'onresize' in element;
-			if (!resize && !element._resizeSensor) {
+			var supports_onresize = 'onresize' in element;
+			if (!supports_onresize && !element._resizeSensor) {
 				var sensor_style = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;';
 				var sensor = element._resizeSensor = document.createElement('div');
 					sensor.className = 'resize-sensor';
@@ -101,7 +104,7 @@
 			}
 			var events = element._flowEvents || (element._flowEvents = []);
 			if (indexOf.call(events, fn) == -1) events.push(fn);
-			if (!resize) element.addEventListener('resize', fn, false);
+			if (!supports_onresize) element.addEventListener('resize', fn, false);
 			element.onresize = function(e){
 				forEach.call(events, function(fn){
 					fn.call(element, e);
@@ -111,15 +114,15 @@
 	};
 
 	function removeResizeListener(element, fn){
-		if ('MutationObserver' in window) {
+		if (is_above_ie10 && supports_mutation_observer) {
 			var index = indexOf.call(element._mutationObservers, fn);
 			if (index > -1) {
 				var observer = element._mutationObservers[index]._mutationObserver;
 				element._mutationObservers.splice(index, 1);
 				observer.disconnect();
 			}
 		} else {
-			var resize = 'onresize' in element;
+			var supports_onresize = 'onresize' in element;
 			var index = indexOf.call(element._flowEvents, fn);
 			if (index > -1) element._flowEvents.splice(index, 1);
 			if (!element._flowEvents.length) {
@@ -129,10 +132,10 @@
 					if (sensor._resetPosition) element.style.position = 'static';
 					try { delete element._resizeSensor; } catch(e) { /* delete arrays not supported on IE 7 and below */}
 				}
-				if (resize) element.onresize = null;
+				if (supports_onresize) element.onresize = null;
 				try { delete element._flowEvents; } catch(e) { /* delete arrays not supported on IE 7 and below */}
 			}
-			if(!resize) element.removeEventListener('resize', fn);
+			if(!supports_onresize) element.removeEventListener('resize', fn);
 		}
 	};
 

diff --git a/jquery.resize.js b/jquery.resize.js
@@ -4,10 +4,13 @@
 * https://github.com/sdecima/javascript-detect-element-resize
 * Sebastian Decima
 *
-* version: 0.3
+* version: 0.4
 **/
 
 (function ( $ ) {
+	var is_above_ie10 = !(window.ActiveXObject) && "ActiveXObject" in window;
+	var supports_mutation_observer = 'MutationObserver' in window;
+
 	$.fn.resize = function(callback) {
 		return this.each(function() {
 			addResizeListener(this, callback);
@@ -70,13 +73,13 @@
     };
 
 	function addResizeListener(element, fn){
-		if ('MutationObserver' in window) {
+		if (is_above_ie10 && supports_mutation_observer) {
 			fn._mutationObserver = addResizeMutationObserver(element, fn);
 			var events = element._mutationObservers || (element._mutationObservers = []);
 			if ($.inArray(fn, events) == -1) events.push(fn);
 		} else {
-			var resize = 'onresize' in element;
-			if (!resize && !element._resizeSensor) {
+			var supports_onresize = 'onresize' in element;
+			if (!supports_onresize && !element._resizeSensor) {
 				var sensor_style = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;';
 				var sensor = element._resizeSensor = document.createElement('div');
 					sensor.className = 'resize-sensor';
@@ -119,7 +122,7 @@
 			}
 			var events = element._flowEvents || (element._flowEvents = []);
 			if ($.inArray(fn,events) == -1) events.push(fn);
-			if (!resize) element.addEventListener('resize', fn, false);
+			if (!supports_onresize) element.addEventListener('resize', fn, false);
 			element.onresize = function(e){
 				$.each(events, function(index, fn){
 					fn.call(element, e);
@@ -129,15 +132,15 @@
 	};
 
 	function removeResizeListener(element, fn){
-		if ('MutationObserver' in window) {
+		if (is_above_ie10 && supports_mutation_observer) {
 			var index = $.inArray(fn, element._mutationObservers);
 			if (index > -1) {
 				var observer = element._mutationObservers[index]._mutationObserver;
 				element._mutationObservers.splice(index, 1);
 				observer.disconnect();
 			}
 		} else {
-			var resize = 'onresize' in element;
+			var supports_onresize = 'onresize' in element;
 			var index = $.inArray(fn, element._flowEvents);
 			if (index > -1) element._flowEvents.splice(index, 1);
 			if (!element._flowEvents.length) {
@@ -147,10 +150,10 @@
 					if (sensor._resetPosition) element.style.position = 'static';
 					try { delete element._resizeSensor; } catch(e) { /* delete arrays not supported on IE 7 and below */}
 				}
-				if (resize) element.onresize = null;
+				if (supports_onresize) element.onresize = null;
 				try { delete element._flowEvents; } catch(e) { /* delete arrays not supported on IE 7 and below */}
 			}
-			if(!resize) element.removeEventListener('resize', fn);
+			if(!supports_onresize) element.removeEventListener('resize', fn);
 		}
 	};