Update documentation. Fix version in configuration files and source f…

…iles.
RickStrahl · Jan 19, 2016 · aaaf64b · aaaf64b
1 parent 31acea8
commit aaaf64b
Show file tree

Hide file tree

Showing 6 changed files with 694 additions and 436 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-watch-dom",
-  "version": "1.16.0",
+  "version": "1.21.0",
   "main": "jquery-watch.js",
   "license": "MIT",
   "ignore": [

diff --git a/jquery-watch.js b/jquery-watch.js
@@ -1,8 +1,8 @@
 /// <reference path="jquery.js" />
 /*
 jquery-watcher 
-Version 1.20 - 12/21/2015
-© 2014-2015 Rick Strahl, West Wind Technologies 
+Version 1.21 - 1/19/2016
+© 2014-2016 Rick Strahl, West Wind Technologies 
 www.west-wind.com
 Licensed under MIT License
 http://en.wikipedia.org/wiki/MIT_License
@@ -26,7 +26,6 @@ http://en.wikipedia.org/wiki/MIT_License
             /// Option to set - see comments in code below.
             /// </param>        
             /// <returns type="jQuery" /> 
-
             var opt = $.extend({
                 // CSS styles or Attributes to monitor as comma delimited list
                 // For attributes use a attr_ prefix

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-watch",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "This small jQuery plug-in allows you to monitor changes to any DOM element's CSS styles, attributes or properties and fires a callback in response to any change in the monitored styles or attributes.",
   "main": "jquery-watch.js",
   "scripts": {
@@ -11,10 +11,13 @@
     "url": "https://github.com/RickStrahl/jquery-watch"
   },
   "keywords": [
+    "jquery-watch",
     "monitor",
     "DOM-events",
     "change-events",
-    "jquery"
+    "jquery",
+    "jquery-plugin",
+    "ecosystem:jquery"
   ],
   "author": "Rick Strahl, West Wind Technologies",
   "license": "MIT",

diff --git a/readme.md b/readme.md
@@ -172,7 +172,6 @@ There are two boxes #notebox and #shadow and what we want to do is monitor chang
 The following code monitors #notebox so we can tell when a monitored value is changed:
 
 ```javascript
-<script>
 var el = $("#notebox");
 el.draggable();
 
@@ -234,6 +233,26 @@ When you run this code you'll essentially see #shadow follow around the #notebox
 
 Note that the code above doesn't actually rely on the parameters passed into the `watchShadow` function, but instead does its own checks to see what needs updating. In fact this code simply updates all relevant properties whether they have changed or not. While less efficient it allows for simpler code and depending on how much change you need to do on the DOM, this can be very fast regardless. Your mileage may vary. If you have larger changes you need to affect, using the specific property to update the UI might be more appropriate.
 
+### Watching Child Elements
+You can also monitor changes to child nodes by setting `.watchChildren` to `true` and then looking at the mutation record to figure out if nodes have been removed or added:
+
+```javascript
+$list.watch({
+        properties: 'prop_innerHTML',
+        watchChildren: true,
+        callback: function (data, i, mutations) {
+
+            mutations.forEach(function(record) {
+                if (record.type === 'childList' && record.removedNodes.length > 0) {
+                    console.info('removed item');        
+                } else if (record.addedNodes.length > 0) {
+                    console.info('added item');
+                }
+            });
+        }
+    });
+```    
+
 ## Browser Support
 This plug-in will work with just about any browser, as it has a fallback for legacy browsers using interval polling. Modern browsers use an efficient API to get notified of changes by the browser.