Improve function that checks for element visibility, update README.md.

README.md

@@ -48,7 +48,7 @@ To get started, first select a license:
 
 Get it from this repo, or from the following sources: 
 
-* <strong><a href="https://www.jsdelivr.com/projects/jquery.typeit">CDN:</a></strong> Include  `https://cdn.jsdelivr.net/jquery.typeit/4.2.0/typeit.min.js` or `https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.0/typeit.min.js` on your page.
+* <strong><a href="https://www.jsdelivr.com/projects/jquery.typeit">CDN:</a></strong> Include  `https://cdn.jsdelivr.net/jquery.typeit/4.2.1/typeit.min.js` or `https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.1/typeit.min.js` on your page.
 * <strong><a href="https://www.npmjs.com/package/typeit">npm:</a></strong> Install with `npm install typeit`.
 
 ### Hook It Up
@@ -60,7 +60,7 @@ Get it from this repo, or from the following sources:
   <script src="typeit.js"></script>
   ```
 
-2. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. More on that later.)
+2. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. For more on that, see the <a href="http://macarthur.me/typeit/docs">full documentation.</a>.)
 
   ```html
   <span class="type-it"></span>
@@ -115,7 +115,7 @@ For example:
 
 You can modify the options for the plugin by passging in JSON. 
 
-There are a number of options you may use to customize typeIt.
+There are a number of options you may use to customize TypeIt. For more details on these options, view the <a href="http://macarthur.me/typeit/docs">full documentation</a>.
 
 | Option        | Description   | Default Value
 | ------------- | ------------- | ------------- |
@@ -140,7 +140,7 @@ This project is setup with Gulp to lint & minify the JavaScript. In the root of
 
 ```
 npm install
-gulp develop
+gulp
 ```
 ## Donations
 

dev/typeit.js

@@ -1,7 +1,7 @@
 /**
  * jQuery TypeIt
  * @author Alex MacArthur (http://macarthur.me)
- * @version 4.2.0
+ * @version 4.2.1
  * @copyright 2016 Alex MacArthur
  * @description Types out a given string or strings.
  */
@@ -57,7 +57,7 @@
     this.tel = this.el.find('span');
 
     this.insert = function(c) { 
-      this.tel.append(c);
+     this.tel.append(c);
     };
 
     if(this.s.startDelete) {
@@ -273,15 +273,40 @@
   },
 
   _isVisible : function() {
-    var $win = $(window);
-
-    var docTop = $win.scrollTop();
-    var docBottom = docTop + $win.height();
-
-    var elTop = this.el.offset().top;
-    var elBottom = elTop + this.el.height();
-
-    return ((elBottom <= docBottom) && (elTop >= docTop));
+    var win = $(window);
+
+    var viewport = {
+        top : win.scrollTop(),
+        left : win.scrollLeft()
+    };
+    viewport.right = viewport.left + win.width();
+    viewport.bottom = viewport.top + win.height();
+
+    var height = this.el.outerHeight();
+    var width = this.el.outerWidth();
+
+    if(!width || !height){
+        return false;
+    }
+
+    var bounds = this.el.offset();
+    bounds.right = bounds.left + width;
+    bounds.bottom = bounds.top + height;
+
+    var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
+
+    if(!visible){
+        return false;   
+    }
+
+    var deltas = {
+        top : Math.min( 1, ( bounds.bottom - viewport.top ) / height),
+        bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height),
+        left : Math.min(1, ( bounds.right - viewport.left ) / width),
+        right : Math.min(1, ( viewport.right - bounds.left ) / width)
+    };
+
+    return (deltas.left * deltas.right) >= 1 && (deltas.top * deltas.bottom) >= 1;
   },
 
   /* 
@@ -438,4 +463,4 @@ $.fn.tiSettings = function(settings) {
   return this;
 };
 
-}(jQuery));
+}(jQuery));

dist/typeit.js

@@ -1,7 +1,7 @@
 /**
  * jQuery TypeIt
  * @author Alex MacArthur (http://macarthur.me)
- * @version 4.2.0
+ * @version 4.2.1
  * @copyright 2016 Alex MacArthur
  * @description Types out a given string or strings.
  */
@@ -57,7 +57,7 @@
     this.tel = this.el.find('span');
 
     this.insert = function(c) { 
-      this.tel.append(c);
+     this.tel.append(c);
     };
 
     if(this.s.startDelete) {
@@ -273,15 +273,40 @@
   },
 
   _isVisible : function() {
-    var $win = $(window);
-
-    var docTop = $win.scrollTop();
-    var docBottom = docTop + $win.height();
-
-    var elTop = this.el.offset().top;
-    var elBottom = elTop + this.el.height();
-
-    return ((elBottom <= docBottom) && (elTop >= docTop));
+    var win = $(window);
+
+    var viewport = {
+        top : win.scrollTop(),
+        left : win.scrollLeft()
+    };
+    viewport.right = viewport.left + win.width();
+    viewport.bottom = viewport.top + win.height();
+
+    var height = this.el.outerHeight();
+    var width = this.el.outerWidth();
+
+    if(!width || !height){
+        return false;
+    }
+
+    var bounds = this.el.offset();
+    bounds.right = bounds.left + width;
+    bounds.bottom = bounds.top + height;
+
+    var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
+
+    if(!visible){
+        return false;   
+    }
+
+    var deltas = {
+        top : Math.min( 1, ( bounds.bottom - viewport.top ) / height),
+        bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height),
+        left : Math.min(1, ( bounds.right - viewport.left ) / width),
+        right : Math.min(1, ( viewport.right - bounds.left ) / width)
+    };
+
+    return (deltas.left * deltas.right) >= 1 && (deltas.top * deltas.bottom) >= 1;
   },
 
   /* 
@@ -438,4 +463,4 @@ $.fn.tiSettings = function(settings) {
   return this;
 };
 
-}(jQuery));
+}(jQuery));