Make cursor position absolute, add :before pseudo element to each con…

…tainer by default, update readme.

README.md

@@ -1,7 +1,7 @@
 # TypeIt: A jQuery Animated Typing Plugin
 
 ## Description
-A jQuery plugin that outputs text like it's being typed. It allows you to type single strings, multiple strings that stack, and multiple strings that delete & replace each other. It's lightweight, scalable, and super easy to implement.
+A jQuery plugin that outputs text like it's being typed. It allows you to type single strings, multiple strings that stack, and multiple strings that delete & replace each other. It's lightweight, scalable, responsive, and super easy to implement.
 
 ## Demo
 Checkout several demos and a sandbox where you can try it out at <a href="http://alexmacarthur.github.io/typeit">alexmacarthur.github.io/typeit</a>.
@@ -10,7 +10,7 @@ Checkout several demos and a sandbox where you can try it out at <a href="http:/
 
 ### Download the Plugin
 
-Download the ZIP, clone this repo, or use npm with `npm install typeit`. 
+Download the ZIP, clone this repo, or install via npm with `npm install typeit`. 
 
 ### Initializing on Your Site
 
@@ -90,12 +90,12 @@ There are a number of options you may use to customize typeIt.
 | Option        | Description   | Default Value
 | ------------- | ------------- | ------------- |
 | whatToType  | The string to be typed.       | 'This is the default string. Please replace this string with your own.' |
-| typeSpeed     | The typing speed.             | 500  |
+| typeSpeed     | The typing speed.             | 200  |
 | lifeLike      | Will make the typing pace irregular, as if a real person is doing it.  | true |
 | showCursor    | Show a blinking cursor at the end of the string.  | true  |
-| breakLines    | Choose whether you want multiple strings to be printed on top of eachother (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false).  | true  |
+| breakLines    | Choose whether you want multiple strings to be printed on top of each other (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false).  | true  |
 | breakWait    | The amount of time between typing multiple strings.  | 500  |
-| delayStart    | The amount of time before the plugin begins typing after initalizing.  | 100  |
+| delayStart    | The amount of time before the plugin begins typing after initalizing.  | 250  |
 
 ## Ideas for Improvement?
 

dist/typeit.css

@@ -33,6 +33,14 @@
   font-size: inherit;
 }
 
+.ti-text-container:before {
+  content: '';
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  position: relative;
+}
+
 .ti-text-container.active-container.ti-cursor:after {
   display: inline;
 }
@@ -41,8 +49,10 @@
   display: none;
   content: '|';
   bottom: .05em;
-  position: relative;
-  vertical-align: baseline;
+  right: -.25em;
+  position: absolute;
+  line-height: normal;
+  font-size: inherit;
   -webkit-animation: blink 1s infinite;
           animation: blink 1s infinite;
 }

dist/typeit.js

@@ -1,7 +1,7 @@
 /**
  * jQuery TypeIt
  * @author Alex MacArthur (http://macarthur.me)
- * @version 1.0.3
+ * @version 1.0.4
  * @copyright 2015 Alex MacArthur
  * @description Types out a given string or strings.
  */
@@ -25,7 +25,7 @@
        showCursor: true,
        breakLines: true,
        breakWait: 500,
-       delayStart: 100
+       delayStart: 250
      };
 
     this.dataDefaults = {
@@ -73,17 +73,19 @@
      // get the string lengths and save to array
      for(j=0; j < this.stringArray.length; j++){
         this.stringLengths[j] = this.stringArray[j].length;
+        // set up the number of ti-containers we'll need to hold the strings
         theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');
      }
 
+      // add .active-container to the first .ti-text-container so the cursor starts blinking before a string is printed
+      theElement.find('.ti-container:first-child').find('.ti-text-container').addClass('active-container');
+
      // if breakLines is false, then we for sure only need ONE ti-container even if there multiple strings, so make sure of that
      if(this.settings.breakLines === false) {
         theElement.find('.ti-container').remove();
         theElement.append('<span class="ti-container"><span class="ti-text-container ti-cursor"></span></span>');
      }
 
-     theElement.css('display','inline-block');
-
      // if showCursor is false, then remove the ti-cursor class
      if(this.settings.showCursor === false) {
       $(this.theElement).find('.ti-text-container').removeClass('ti-cursor');
@@ -113,10 +115,13 @@
       // append the string of letters to the respective .ti-text-container
       // use find() so that we select the class only for the element on which we're instantiated
 
+      characterToAppend = this.mergedStrings[this.typeCount+this.stringPlaceCount];
+
+      // if breakLines is set to true, add the 'active-container' class to the next .ti-text-container in the list. 
       if(this.settings.breakLines === true) {
-        $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
+        $(this.theElement).find('.ti-text-container:eq('+ this.stringCount +')').addClass('active-container').append(characterToAppend);
       } else {
-        $(this.theElement).find('.ti-text-container').addClass('active-container').append(this.mergedStrings[this.typeCount+this.stringPlaceCount]);
+        $(this.theElement).find('.ti-text-container').addClass('active-container').append(characterToAppend);
       }
 
       this.typeCount++;

dist/typeit.scss

@@ -20,6 +20,15 @@
   display: inline;
   font-size: inherit;
 
+  // :before pseudo element is necessary so that when lines with no text hold the cursor, the cursor stays in the correct space on the screen
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    position: relative;
+  }
+
   &.active-container {
 
     &.ti-cursor {
@@ -37,8 +46,10 @@
     display: none;
     content: '|';
     bottom: .05em;
-    position: relative;
-    vertical-align: baseline;
+    right: -.25em;
+    position: absolute;
+    line-height: normal;
+    font-size: inherit;
     animation: blink 1s infinite;
   }
 }

index.html

@@ -21,7 +21,6 @@
         <h1 class="main-header">TypeIt</h1>
         <hr>
         <span class="typeit-box"></span>
-        <br>
         <a href="https://github.com/alexmacarthur/typeit" class="github-link">
           <span class="github-text">See the Project on <strong>GitHub.</strong></span>
         </a>
@@ -276,7 +275,7 @@ <h3>There are plenty of settings to tweak how you desire:</h3>
             <tr>
               <td>typeSpeed</td>
               <td>The speed (milliseconds) at which you want to type.</td>
-              <td>500</td>
+              <td>250</td>
             </tr>
 
             <tr>
@@ -306,7 +305,7 @@ <h3>There are plenty of settings to tweak how you desire:</h3>
             <tr>
               <td>delayStart</td>
               <td>The amount of time before the plugin begins typing after initializing.</td>
-              <td>100</td>
+              <td>250</td>
             </tr>
 
           </table>

package.json

@@ -1,10 +1,10 @@
 {
   "name": "typeit",
+  "version": "1.0.4",
   "license": "GPL-2.0",
-  "author": "Alex MacArthur",
-  "description": "jQuery animated typing plugin that types text for you.",
+  "author": "Alex MacArthur <alex@macarthur.me>",
+  "description": "A lightweight, easy-to-implement jQuery animated typing plugin that types text for you.",
   "license": "General Public License",
-  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/alexmacarthur/typeit.git"

src/scripts.js

@@ -57,9 +57,9 @@ $('section').on('click','.btn-example4',function() {
 
 (function() {
 
-  $('#iTypeSpeed').val('100');
-  $('#iBreakWait').val('100');
-  $('#iDelayStart').val('100');
+  $('#iTypeSpeed').val('250');
+  $('#iBreakWait').val('500');
+  $('#iDelayStart').val('250');
 
   $('#TIInput').on('click','#TISubmit', function(e){