minor updates on readme, usage and version

customedialabs · Jul 3, 2015 · e7bb3fe · e7bb3fe
1 parent 3ee00a2
commit e7bb3fe
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # floativ
-floativ is a floating scroll-box at the bottom of the screen of your site that contains text, among other things, which can be displayed while browsing a web page. This floating scroll-box disappears when the user reaches an element with a specific id.
+floativ is a responsive floating scroll-box at the bottom of the screen of your site that contains text, among other things, which can be displayed while browsing a web page. This floating scroll-box disappears when the user reaches an element with a specific id.
 
 ## Installation
 1. Download and install [NodeJS](https://nodejs.org/)
-2. Clone or Download project straight from GitHub.
+2. Clone or Download project straight from [GitHub](https://github.com/GBratsos/floativ).
 3. Extract the zip file and start working.
 
 ## Directions
@@ -13,7 +13,33 @@ floativ is a floating scroll-box at the bottom of the screen of your site that c
 ## NPM Package
 You can find and install floativ from npm [here](https://www.npmjs.com/package/floativ).
 
-## Library Compatibility
+## Usage
+Put this `$("#floativ").floativ();` inside __script tags__ at the bottom of your HTML file.
+You can also specify parameters, such as:
+```html
+<div id="#floativ">
+    <div class="floativ-container">
+        <div class="floativ-head">
+            <span>
+                <i class="fa fa-plus-circle floativ-expand" aria-hidden="true" aria-label="Expand"></i>
+            </span>
+            <span>
+                <i class="fa fa-minus-circle floativ-collapse" aria-hidden="true" aria-label="Collapse"></i>
+            </span>
+        </div>
+        <div class="floativ-body">
+            ... YOUR CONTENT HERE ...
+        </div>
+    </div>
+</div>
+```
+
+## Dependecnies
+* [jQuery](https://github.com/jquery/jquery)
+* [mCustomScrollbar](https://github.com/malihu/malihu-custom-scrollbar-plugin)
+* [FontAwesome](https://github.com/FortAwesome/Font-Awesome)
+
+## Library compatibility
 This library works for IE8+, Mozilla Firefox 4+, Google Chrome 11+, Opera 10+, Safari 4+.
 
 ## License

diff --git a/index.html b/index.html
@@ -118,7 +118,7 @@ <h2>Usage</h2>
             &lt;/span&gt;
         &lt;/div&gt;
         &lt;div class="floativ-body"&gt;
-            ... YOUR TEXT HERE ...
+            ... YOUR CONTENT HERE ...
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;
@@ -130,9 +130,9 @@ <h2>Dependencies</h2>
                             <hr>
                         </header>
                         <ul>
-                            <li>jQuery</li>
-                            <li>mCustomScrollbar</li>
-                            <li>FontAwesome</li>
+                            <li><a href="https://github.com/jquery/jquery" target="_blank">jQuery</a></li>
+                            <li><a href="https://github.com/malihu/malihu-custom-scrollbar-plugin" target="_blank">mCustomScrollbar</a></li>
+                            <li><a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">FontAwesome</a></li>
                         </ul>
                     </article>
                     <article id="floativ-break">
@@ -142,15 +142,6 @@ <h2>Library compatibility</h2>
                         </header>
                         <p>This library works for IE8+, Mozilla Firefox 4+, Google Chrome 11+, Opera 10+, Safari 4+.</p>
                     </article>
-                    <article>
-                        <header>
-                            <h2>TODO</h2>
-                            <hr>
-                        </header>
-                        <ul>
-                            <li>Improve library with parameters</li>
-                        </ul>
-                    </article>
                 </section>
             </div>
         </div>
@@ -258,8 +249,12 @@ <h1>License</h1>
     <script src="js/floativ.js"></script>
     <script>
         $("#floativ").floativ({
-            heightExpand: "113px",
-            customClass: "shadow center-floativ"
+            heightExpand: "93px",
+            customClass: "shadow center-floativ",
+            scrollbar: {
+                theme: "dark-3",
+                alwaysShowScrollbar: 1
+            }
         });
     </script>
 
@@ -282,4 +277,4 @@ <h1>License</h1>
     </script>
 </body>
 
-</html>
+</html>
diff --git a/js/floativ.js b/js/floativ.js
@@ -3,7 +3,7 @@
  * displayed while browsing a web page. This floating box disappears when the user reaches an element with
  * a specific id.
  *
- * Version 1.1.0
+ * Version 1.1.1
  *
  */
 (function ($) {
@@ -19,10 +19,7 @@
                 widthExpand: "160px", // Expandable width
                 animate: "slow", // Animation method
                 customClass: null, // Extra class for the parent object
-                scrollbar: { // mCustomScrollbar (default) options
-                    alwaysShowScrollbar: 1,
-                    theme: "dark-3"
-                }
+                scrollbar: {} // mCustomScrollbar (default) options
             };
 
             var o = $.extend(defaults, options); // Merge defaults with user inputs

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "floativ",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "floativ is a floating scroll-box at the bottom of the screen of your site that contains text, among other things, which can be displayed while browsing a web page. This floating scroll-box disappears when the user reaches an element with a specific id.",
   "main": "floativ.js",
   "scripts": {