add mresizeind event that watch size with margins and paddings

README.md

@@ -1,5 +1,7 @@
 # mresize
-Event based jQuery element resize 
+Event based jQuery element resize   
+
+[Origin version](https://github.com/malihu/mresize)
 
 The plugin does not use any kind of timer(s) to detect size changes. It uses the resize event on (invincible) iframe(s) which makes it perform much better than other solutions which use timers to poll element size. The script detects size changes made from JS, CSS, animations etc. and it works on any element able to contain other elements (e.g. div, p, li etc.). To use it on other inline elements (e.g. images) you need to add a wrapper and call the event on it. 
 
@@ -13,8 +15,16 @@ npm: `npm install mresize`
 $(selector).on("mresize",function(){
 	console.log($(this));
 });
+
+$(selector).on("mresizeind",function(){
+	console.log($(this));
+});
 ```
 
+### Updates
+
+event ```mresizeind``` watch size chages with margins and paddinds not only height and width change.
+
 #### For more information 
 
 * [Plugin homepage and documentation](http://manos.malihu.gr/event-based-jquery-element-resize/) 

mresize.js

@@ -67,5 +67,34 @@ THE SOFTWARE.
 			$(this).removeData("mresize").find(".resize").remove();
 		}
 	};
+
+	$.event.special.mresizeind={
+		add:function(){
+			console.log(arguments);
+			var el=$(this);
+
+			if(el.data("mresizeind")) return;
+			if(el.css("position")==="static") el.css("position","relative");
+			el
+				.append("<div class='mresizeind' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>")
+				.data("mresizeind",{"w":el.outerWidth(true),"h":el.outerHeight(true),t:null,throttle:100})
+				.find(".mresizeind iframe").each(function(){
+					$(this.contentWindow || this).on("resize",function(){
+						var d=el.data("mresizeind");
+						if(d.w!==el.outerWidth(true) || d.h!==el.outerHeight(true)){
+							if(d.t) clearTimeout(d.t);
+							d.t=setTimeout(function(){
+								el.triggerHandler("mresizeind");
+								d.w=el.outerWidth(true);
+								d.h=el.outerHeight(true);
+							},d.throttle);
+						}
+					});
+				});
+		},
+		remove:function(){
+			$(this).removeData("mresizeind").find(".mresizeind").remove();
+		}
+	};
 
 }));

package.json

@@ -26,4 +26,4 @@
       "jquery": ">=1.7"
     }
   }
-}
+}