Used .prop instead of .attr

meetselva · May 3, 2013 · e3cd4bf · e3cd4bf
1 parent 3872270
commit e3cd4bf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 25 deletions.
diff --git a/attrchange.js b/attrchange.js
@@ -34,18 +34,10 @@ https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
 				var keys = e.attributeName.split('.'); 				
 				e.oldValue = attributes['style'][keys[1]];
 
-				var styles = this.attr("style"), value;
-				styles && $.each(styles.toLowerCase().split(";"), function (i, v) {
-					var style = v.split(":");
-					if ($.trim(style[0]) === keys[1]) {
-	                  value = style[1];           
-					}                    
-				});
-
-				attributes['style'][keys[1]] = value; //get last known value
+				attributes['style'][keys[1]] = this.prop("style")[$.camelCase(keys[1])];
 			} else {
 				e.oldValue = attributes[e.attributeName];
-				attributes[e.attributeName] = this.attr(e.attributeName); //get last known value
+				attributes[e.attributeName] = this.attr(e.attributeName);
 			}
 
 			this.data('attr-old-value', attributes); //update the old value object
@@ -121,4 +113,4 @@ https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
 
 		return this;
     }
-})(jQuery);
+})(jQuery);
diff --git a/sample.html b/sample.html
@@ -10,29 +10,28 @@
     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js" type="text/javascript"></script>
 	<script src="attrchange.js"></script>
 	<style>
-		#test { position: absolute; top: 0; }
+		.test { position: absolute; top: 0; }
+		.test:nth-child(1) { left: 60px; }
+		.test:nth-child(2) { left: 120px; }
 		.logger { height: 200px; overflow: auto; border: 1px solid #4169E1; background-color: #DADFFA; color: black; bottom: 0px; left: 0px; font-size: 0.8em; padding-left: 2px; overflow-y: scroll; float: right; width: 320px;}
 	</style>
 	<script>
-		$(function () {
-			var timer = setInterval(function () {
-				$('#test').animate({top: ($('#test').position().top + 1)}, 00);
-			}, 500);
-
-			setTimeout(function() {
-				clearInterval(timer);
-			}, 10000);
-
-			$('#test').attrchange(function (e) {
-				$('.logger').append(e.attributeName + ' ' + e.oldValue);
-			})
+		$(function () {			
+			$('.test').attrchange({
+				attributeOldValue: true, 
+				callback: function (e) {
+					$('.logger').append($(this).index() + ' ' + e.attributeName + ' ' + e.oldValue + '<br/>');
+				}
+			}).animate({top: 100}, 500);
 
 		});
 	</script>
 
   </head>
   <body>
-  	<div id="test">TEST</div>
+  	<div class="test">TEST</div>
+  	<div class="test">TEST</div>
+  	<div class="test">TEST</div>
   	<div class="logger"></div>
   </body>
 </html>