From b62f4536205d69a05d890093f7170a8537d37673 Mon Sep 17 00:00:00 2001
From: georapbox <georapbox@gmail.com>
Date: Sat, 4 Jul 2015 09:43:44 +0300
Subject: [PATCH] Fix resize issue by providing a debouncer. Fast viewport
 resize caused the element to lose proper height. Add floative class to main
 element for styling. Keep the id for plugin initialization. This way user can
 have multiple instances running in one page.

---
 README.md       |  2 +-
 css/floativ.css |  6 ++--
 index.html      |  4 +--
 js/floativ.js   | 73 +++++++++++++++++++++++++++----------------------
 4 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 19e6f17..08c9ce2 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ You can find and install floativ from npm [here](https://www.npmjs.com/package/f
 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" id="floativ">
     <div class="floativ-container">
         <div class="floativ-head">
             <span>
diff --git a/css/floativ.css b/css/floativ.css
index c3252a3..bf258aa 100644
--- a/css/floativ.css
+++ b/css/floativ.css
@@ -1,7 +1,7 @@
-#floativ {
-    position: fixed;
+.floativ {
+    position: fixed !important;
     margin: 0 auto;
-    z-index: 9999;
+    z-index: 9999 !important;
     bottom: 0;
     left: 0;
     float: left;
diff --git a/index.html b/index.html
index c3311fe..6118c40 100644
--- a/index.html
+++ b/index.html
@@ -111,7 +111,7 @@ <h2>Usage</h2>
                         <pre>
                             <code class="language-markup">
 
-&lt;div id="#floativ"&gt;
+&lt;div class="floativ" id="floativ"&gt;
     &lt;div class="floativ-container"&gt;
         &lt;div class="floativ-head"&gt;
             &lt;span&gt;
@@ -193,7 +193,7 @@ <h1>License</h1>
 
 
     <!-- Floativ Section -->
-    <div id="floativ">
+    <div class="floativ" id="floativ">
         <div class="floativ-container">
             <div class="floativ-head">
                 <span>
diff --git a/js/floativ.js b/js/floativ.js
index 6617757..81563c0 100644
--- a/js/floativ.js
+++ b/js/floativ.js
@@ -12,14 +12,14 @@
         floativ: function(options) {
             var defaults = {
                 breakPoint: "#floativ-break", // The class where we hide our element
-                height: "100px", // Height of the float box
-                width: "auto", // Width of the float box
-                offsetPercentage: 0.33, // Adds offset to the breaking point
-                heightExpand: "160px", // Expandable height
-                widthExpand: "160px", // Expandable width
-                animate: "slow", // Animation method
-                customClass: null, // Extra class for the parent object
-                scrollbar: {} // mCustomScrollbar (default) options
+                height: "100px",              // Height of the float box
+                width: "auto",                // Width of the float box
+                offsetPercentage: 0.33,       // Adds offset to the breaking point
+                heightExpand: "160px",        // Expandable height
+                widthExpand: "160px",         // Expandable width
+                animate: "slow",              // Animation method
+                customClass: null,            // Extra class for the parent object
+                scrollbar: {}                 // mCustomScrollbar (default) options
             };
 
             var o = $.extend(defaults, options); // Merge defaults with user inputs
@@ -31,15 +31,24 @@
 
             // Do it for every element that matches selector
             this.each(function(){
-                var $this = $(this); // Assign current element to variable
+                var $this = $(this),
+                    collapseBtn = $(".floativ-collapse", $this),
+                    expandBtn = $(".floativ-expand", $this),
+                    floativWrapper = $(".floativ-wrapper", $this),
+                    floativBody = $('.floativ-body', $this),
+                    resizeTimeout;
+
                 $this.data("floativ", o); // Save settings
-                $(".floativ-collapse", $this).hide(); // Hide minus-collapse sign
-                $(".floativ-wrapper", $this).css({height: o.height, width: o.width}).mCustomScrollbar(o.scrollbar); // Apply mCustomScrollbar on element
+                collapseBtn.hide();       // Hide minus-collapse sign
+                floativWrapper.css({
+                    height: o.height,
+                    width: o.width
+                }).mCustomScrollbar(o.scrollbar); // Apply mCustomScrollbar on element
 
                 floativLoad(); // Start the plugin
 
                 function floativLoad(){
-                    $this.css({height: o.height, width: o.width})
+                    $this.css({height: o.height, width: o.width});
                     if (o.customClass !== null) $this.addClass(o.customClass);
                 }
 
@@ -54,44 +63,44 @@
                     }
                 }
 
-                $('.floativ-body', $this).bind('mousewheel DOMMouseScroll', function (e) {
+                floativBody.bind('mousewheel DOMMouseScroll', function (e) {
                     var delta = e.wheelDelta || -e.detail;
                     this.scrollTop += (delta < 0 ? 1 : -1) * 30;
                     e.preventDefault();
                 });
 
                 // Click expand button
-                $(".floativ-expand", $this).click(function (e) {
+                expandBtn.on('click', function (e) {
                     e.preventDefault();
-                    $(".floativ-collapse", $this).show();
-                    $(".floativ-expand", $this).hide();
+                    collapseBtn.show();
+                    expandBtn.hide();
                     $this.animate({height: o.floativHeight_expand, width: o.floativWidth_expand}, o.animate);
-                    $(".floativ-wrapper", $this).animate({height: o.floativHeight_expand, width: o.floativWidth_expand}, o.animate, function() {
-                        $(".floativ-wrapper", $this).mCustomScrollbar("update");
+                    floativWrapper.animate({height: o.floativHeight_expand, width: o.floativWidth_expand}, o.animate, function() {
+                        floativWrapper.mCustomScrollbar("update");
                     });
                 });
 
                 //  Click collapse button
-                $(".floativ-collapse", $this).click(function (e) {
+                collapseBtn.on('click', function (e) {
                     e.preventDefault();
-                    $(".floativ-expand", $this).show();
-                    $(".floativ-collapse", $this).hide();
+                    expandBtn.show();
+                    collapseBtn.hide();
                     $this.animate({height: o.height, width: o.width}, o.animate);
-                    $(".floativ-wrapper", $this).animate({height: o.height, width: o.width}, o.animate, function() {
-                        $(".floativ-wrapper", $this).mCustomScrollbar("update");
+                    floativWrapper.animate({height: o.height, width: o.width}, o.animate, function() {
+                        floativWrapper.mCustomScrollbar("update");
                     });
                 });
 
-                $(window).resize(function () {
-                    floativLoad();
-                    setTimeout(function () {
+                $(window).
+                    on('resize', function () {
+                        clearTimeout(resizeTimeout);
+                        resizeTimeout = setTimeout(function () {
+                            floativToggle();
+                        }, 500);
+                    }).
+                    on('scroll', function () {
                         floativToggle();
-                    }, 1000);
-                });
-
-                $(window).scroll(function () {
-                    floativToggle();
-                });
+                    });
 
                 setTimeout(function () {
                     $this.css({display: "none"});