Improve doc

gre · Jul 28, 2011 · c7be58c · c7be58c
1 parent c55d534
commit c7be58c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 26 deletions.
diff --git a/demo/flexible-nav.js b/demo/flexible-nav.js
@@ -9,17 +9,17 @@
 // Nav links are **distributed proportionnally** to the page sections.
 // See how **your scrollbar *"weds"* this links** :)
 //
-// You can use it easily on any website with the *Bookmarklet*.
+// You can easily use it on any website with the *Bookmarklet*.
 //
 // **Drag and Drop this like to in your bookmark bar :**
 //
 //  <a class="bookmark" title="Flexible Nav bookmarklet" href="javascript:(function(){window.flexibleNavBase='http://lib.greweb.fr/flexible-nav/';var a=document.getElementsByTagName('head')[0],b=document.createElement('script');b.type='text/javascript';b.src=flexibleNavBase+'bookmarklet.min.js';a.appendChild(b);})(); void 0" target="_blank">Flexible Nav Bookmarklet</a>
 //
 // **This page is a 3-in-one document!**
 //
-// * First, it presents **a library usage** 
+// * First, it explains goal and possible usages of the library.
+// * Second, it presents **a library usage** 
 // (see the flexible box right panel?).
-// * Second, it explains goal and possible usages of the library.
 // * Third, it show and comment the **annotated JS code** (thanks to docco)
 //
 // Usages
@@ -34,7 +34,7 @@
 // the different sections of a document but you can override this
 // elements selector.
 //
-// You have usually two kind of selected element usages:
+// You have usually two kind of selected elements to use:
 //
 // * **Select a title**. The link will takes the title as text.
 // * **Select any container** and add a **`data-navtext` attribute** and
@@ -44,12 +44,12 @@
 //
 // * Simple usage used in this page
 //
-//		var nav = new FlexibleNavMaker().make().prependTo('body');
-//		new FlexibleNav(nav);
+//			var nav = new FlexibleNavMaker().make().prependTo('body');
+//			new FlexibleNav(nav);
 //
 //	* Selecting element you want
 //
-//		new FlexibleNavMaker(".navtitle");
+//			new FlexibleNavMaker(".navtitle");
 //
 //	Using this code, all nodes having this `navtitle` class 
 //	will appear in the flexible nav panel.
@@ -62,7 +62,7 @@
 //
 // * Add Flexibility to existing nav
 //
-// `new FlexibleNav($('#myNav'));`
+//			new FlexibleNav($('#myNav'));
 //
 // *(replace myNav by you nav id)*
 //

diff --git a/demo/index.html b/demo/index.html
@@ -9,7 +9,7 @@
 <p>Nav links are <strong>distributed proportionnally</strong> to the page sections.
 See how <strong>your scrollbar <em>"weds"</em> this links</strong> :)</p>
 
-<p>You can use it easily on any website with the <em>Bookmarklet</em>.</p>
+<p>You can easily use it on any website with the <em>Bookmarklet</em>.</p>
 
 <p><strong>Drag and Drop this like to in your bookmark bar :</strong></p>
 
@@ -18,9 +18,9 @@
 <p><strong>This page is a 3-in-one document!</strong></p>
 
 <ul>
-<li>First, it presents <strong>a library usage</strong> 
+<li>First, it explains goal and possible usages of the library.</li>
+<li>Second, it presents <strong>a library usage</strong> 
 (see the flexible box right panel?).</li>
-<li>Second, it explains goal and possible usages of the library.</li>
 <li>Third, it show and comment the <strong>annotated JS code</strong> (thanks to docco)</li>
 </ul>
 
@@ -35,7 +35,7 @@ <h4>Generation + Flexibility</h4>
 the different sections of a document but you can override this
 elements selector.</p>
 
-<p>You have usually two kind of selected element usages:</p>
+<p>You have usually two kind of selected elements to use:</p>
 
 <ul>
 <li><strong>Select a title</strong>. The link will takes the title as text.</li>
@@ -48,11 +48,13 @@ <h4>Generation + Flexibility</h4>
 <ul>
 <li><p>Simple usage used in this page</p>
 
-<p>var nav = new FlexibleNavMaker().make().prependTo('body');
-new FlexibleNav(nav);</p></li>
+<pre><code>var nav = new FlexibleNavMaker().make().prependTo('body');
+new FlexibleNav(nav);
+</code></pre></li>
 <li><p>Selecting element you want</p>
 
-<p>new FlexibleNavMaker(".navtitle");</p></li>
+<pre><code>new FlexibleNavMaker(".navtitle");
+</code></pre></li>
 </ul>
 
 <p>Using this code, all nodes having this <code>navtitle</code> class 
@@ -65,10 +67,11 @@ <h4>Flexibility only</h4>
 a <code>&lt;nav /&gt;</code> element with a <code>flexible-nav</code> class.</p>
 
 <ul>
-<li>Add Flexibility to existing nav</li>
-</ul>
+<li><p>Add Flexibility to existing nav</p>
 
-<p><code>new FlexibleNav($('#myNav'));</code></p>
+<pre><code>new FlexibleNav($('#myNav'));
+</code></pre></li>
+</ul>
 
 <p><em>(replace myNav by you nav id)</em></p>             </td>             <td class="code">               <div class="highlight"><pre><span class="cm">/*!</span>
 <span class="cm"> * Flexible Nav - 2011 - by @greweb</span>

diff --git a/flexible-nav.js b/flexible-nav.js
@@ -9,17 +9,17 @@
 // Nav links are **distributed proportionnally** to the page sections.
 // See how **your scrollbar *"weds"* this links** :)
 //
-// You can use it easily on any website with the *Bookmarklet*.
+// You can easily use it on any website with the *Bookmarklet*.
 //
 // **Drag and Drop this like to in your bookmark bar :**
 //
 //  <a class="bookmark" title="Flexible Nav bookmarklet" href="javascript:(function(){window.flexibleNavBase='http://lib.greweb.fr/flexible-nav/';var a=document.getElementsByTagName('head')[0],b=document.createElement('script');b.type='text/javascript';b.src=flexibleNavBase+'bookmarklet.min.js';a.appendChild(b);})(); void 0" target="_blank">Flexible Nav Bookmarklet</a>
 //
 // **This page is a 3-in-one document!**
 //
-// * First, it presents **a library usage** 
+// * First, it explains goal and possible usages of the library.
+// * Second, it presents **a library usage** 
 // (see the flexible box right panel?).
-// * Second, it explains goal and possible usages of the library.
 // * Third, it show and comment the **annotated JS code** (thanks to docco)
 //
 // Usages
@@ -34,7 +34,7 @@
 // the different sections of a document but you can override this
 // elements selector.
 //
-// You have usually two kind of selected element usages:
+// You have usually two kind of selected elements to use:
 //
 // * **Select a title**. The link will takes the title as text.
 // * **Select any container** and add a **`data-navtext` attribute** and
@@ -44,12 +44,12 @@
 //
 // * Simple usage used in this page
 //
-//		var nav = new FlexibleNavMaker().make().prependTo('body');
-//		new FlexibleNav(nav);
+//			var nav = new FlexibleNavMaker().make().prependTo('body');
+//			new FlexibleNav(nav);
 //
 //	* Selecting element you want
 //
-//		new FlexibleNavMaker(".navtitle");
+//			new FlexibleNavMaker(".navtitle");
 //
 //	Using this code, all nodes having this `navtitle` class 
 //	will appear in the flexible nav panel.
@@ -62,7 +62,7 @@
 //
 // * Add Flexibility to existing nav
 //
-// `new FlexibleNav($('#myNav'));`
+//			new FlexibleNav($('#myNav'));
 //
 // *(replace myNav by you nav id)*
 //