From 6618fc895928d5a4dfe50283b516a9058764e444 Mon Sep 17 00:00:00 2001
From: Joshua Pinter <joshuapinter@gmail.com>
Date: Thu, 8 Jan 2015 12:29:58 -0700
Subject: [PATCH] Reorder structure of Usage/Installation instructions.

- Join steps #5 and #6 and add options for AJAX or Not AJAX.
- Assume they are using jQuery and provide instructions if they are not.
- Add Plain Javascript section.
- Clean up some unused HTML tags.
---
 README.md | 144 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 79 insertions(+), 65 deletions(-)

diff --git a/README.md b/README.md
index d452b57..2eaf853 100755
--- a/README.md
+++ b/README.md
@@ -25,92 +25,76 @@ Important: Because of old browsers (e.g. IE6, IE7), we recommend to implement th
     <script src="your_path/outdatedbrowser/outdatedbrowser.min.js"></script>
     ```
 
-3. Paste the required HTML at the end of your document (see demo examples):
+3. Call the plugin by placing the following at the bottom of the HTML body:
 
-    ```html
-    <div id="outdated"></div>
-    ```
-
-
-4. Call the plugin by placing the following at the bottom of the HTML body:
-<br><br>
-— Plain Javascript <br>
-    ```javascript
-    //event listener: DOM ready
-    function addLoadEvent(func) {
-        var oldonload = window.onload;
-        if (typeof window.onload != 'function') {
-            window.onload = func;
-        } else {
-            window.onload = function() {
-                if (oldonload) {
-                	oldonload();
-                }	
-                func();
-            }
-        }
-    }
-    //call plugin function after DOM ready
-    addLoadEvent(
-        outdatedBrowser(function(){
-            bgColor: '#f25648',
-            color: '#ffffff',
-            lowerThan: 'transform',
-            languagePath: 'your_path/outdatedbrowser/lang/en.html'
-        })
-    });
-    ```    
-<br>
-— Using jQuery (version that supports IE&lt;9) <br>
-    ```javascript
-    $( document ).ready(function() {
-        outdatedBrowser({
-            bgColor: '#f25648',
-            color: '#ffffff',
-            lowerThan: 'transform',
-            languagePath: 'your_path/outdatedbrowser/lang/en.html'
-        })
-    })
-    ```    
-
-6. Using the plugin without AJAX calls:
-
-    — Paste the required HTML at the end of your document (see demo examples):
+  ##### Without AJAX (static message)
+   
+  a. Paste the required HTML at the end of your document (see demo examples):
+   
     ```html
     <div id="outdated">
-         <h6>Your browser is out-of-date!</h6>
-         <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>
-         <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
+        <h6>Your browser is out-of-date!</h6>
+        <p>
+            Update your browser to view this website correctly. 
+            <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now</a>
+        </p>
+        <p class="last">
+            <a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a>
+        </p>
     </div>
     ```
-    <br>
-    — Call the plugin (see 4.) but with the variable languagePath empty:
-     ```javascript
-    //DOM ready or jQuery
+    
+  b. Call the plugin with `languagePath` empty:
+   
+    ```javascript
+    $( document ).ready(function() {
         outdatedBrowser({
             bgColor: '#f25648',
             color: '#ffffff',
             lowerThan: 'transform',
             languagePath: ''
-        })
-    ```     
-    
+        });
+    });
+    ```
     
+    _If you're not using jQuery, see the [Plain Javascript section](#plain-javascript).)_
     
-6. Targeting browsers:
+  ##### With AJAX (multiple languages)
+  
+  a. Paste the required HTML at the end of your document (see demo examples):
+  
+    ```html
+    <div id="outdated"></div>
+    ```
+  
+  b. Call the plugin with `languagePath` set:
+  
+    ```javascript
+    $( document ).ready(function() {
+      outdatedBrowser({
+        bgColor: '#f25648',
+        color: '#ffffff',
+        lowerThan: 'transform',
+        languagePath: 'your_path/outdatedbrowser/lang/en.html'
+      });
+    });
+    ```
+  
+    _If you're not using jQuery, see the [Plain Javascript section](#plain-javascript).)_
+  
+4. Targeting browsers:
 
     You can do it in one of two ways: using Internet Explorer browsers as reference or specifying a CSS property. The outcome is the same, choose what is easier for you.
 
-
     Lower Than (<):
     * "IE11","borderImage"
     * "IE10", "transform" (Default property)
     * "IE9", "boxShadow"
     * "IE8", "borderSpacing"
 
-7. Choose the language:
-
-	Download the “lang" folder: If you have the language you want, just write the correct path for the language file in your project; If you don’t have your language, you can write your own html file, and please share it with us.  
+5. Choose the language (only applicable for AJAX)
+  
+  Download the “lang" folder: If you have the language you want, just write the correct path for the language file in your project; If you don’t have your language, you can write your own html file, and please share it with us.  
     
 And you're done!
 <br>PS: check the "demo" folder, it may help you.
@@ -133,6 +117,36 @@ The basic structure of the project is given in the following way:
     │   └── outdatedBrowser.css-->
 
 
+## Plain Javascript
+
+If you're not using jQuery, you can modify the usage instructions by creating your own DOM ready, as shown here:
+
+```javascript
+//event listener: DOM ready
+function addLoadEvent(func) {
+    var oldonload = window.onload;
+    if (typeof window.onload != 'function') {
+        window.onload = func;
+    } else {
+        window.onload = function() {
+            if (oldonload) {
+              oldonload();
+            } 
+            func();
+        }
+    }
+}
+//call plugin function after DOM ready
+addLoadEvent(
+    outdatedBrowser(function(){
+        bgColor: '#f25648',
+        color: '#ffffff',
+        lowerThan: 'transform',
+        languagePath: 'your_path/outdatedbrowser/lang/en.html'
+    })
+});
+```
+    
 ## FAQ
 
 Before opening a new issue please check our [FAQ page](https://github.com/burocratik/outdated-browser/wiki/FAQ)