update info

tiagoporto · Feb 16, 2017 · 8b290ac · 8b290ac
1 parent f107099
commit 8b290ac
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -36,7 +36,7 @@
         <!-- endbuild -->
     </head>
     <body>
-        <header>
+        <header class="header">
             <h1>Accessibility Buttons</h1>
 
             <p>Buttons to add/remove contrast and increase/decrease font size.</p>
@@ -113,15 +113,34 @@ <h2>Usage</h2>
 &lt;button aria-label="Add Contrast" id="accessibility-contrast" class="js-acessibility">Add Contrast&lt;/button></pre>
         </code>
 
-        <p><strong>Note:</strong> To get <kbd>font-size</kbd> to work, it's necessary to use "em" or "rem" units.</p>
 
 
-        <p>Initialize the plugin</p>
+        <p>Initialize the Plugin after the dom ready</p>
+
+        <p>If you don't use jQuery (support IE9+)</p>
 
         <code>
-            <pre>accessibilityButtons();</pre>
+            <pre>function ready(fn) {
+    if (document.readyState !== 'loading') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+ready(function() {
+    accessibilityButtons();
+});</pre>
         </code>
 
+        <p>If you use jQuery</p>
+
+        <code><pre>$(document).ready(function() {
+    accessibilityButtons();
+})</pre></code>
+
+        <p><strong>Note:</strong> To get <kbd>font-size</kbd> to work, it's necessary to use "em" or "rem" units.</p>
+
         <h2>Settings</h2>
 
         <p>To set up buttons names and aria-labels, call the plugin with additional options.</p>
@@ -160,7 +179,7 @@ <h2>Settings</h2>
         </code>
     </main>
 
-        <footer>
+        <footer class="footer">
         Copyright © 2014 - <span id="year"></span> Tiago Porto
         </footer>
 

diff --git a/src/handlebars/index.html b/src/handlebars/index.html
@@ -37,15 +37,34 @@ <h2>Usage</h2>
 &lt;button aria-label="Add Contrast" id="accessibility-contrast" class="js-acessibility">Add Contrast&lt;/button></pre>
         </code>
 
-        <p><strong>Note:</strong> To get <kbd>font-size</kbd> to work, it's necessary to use "em" or "rem" units.</p>
 
 
-        <p>Initialize the plugin</p>
+        <p>Initialize the Plugin after the dom ready</p>
+
+        <p>If you don't use jQuery (support IE9+)</p>
 
         <code>
-            <pre>accessibilityButtons();</pre>
+            <pre>function ready(fn) {
+    if (document.readyState !== 'loading') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+ready(function() {
+    accessibilityButtons();
+});</pre>
         </code>
 
+        <p>If you use jQuery</p>
+
+        <code><pre>$(document).ready(function() {
+    accessibilityButtons();
+})</pre></code>
+
+        <p><strong>Note:</strong> To get <kbd>font-size</kbd> to work, it's necessary to use "em" or "rem" units.</p>
+
         <h2>Settings</h2>
 
         <p>To set up buttons names and aria-labels, call the plugin with additional options.</p>