모바일 플로팅 메뉴 스크립트 수정

js/jquery.floatmenu.js

@@ -1,266 +1,159 @@
 (function($) {
-    $.fn.topFloatMenu = function(timeout, duration, interval, count)
+    $.fn.floatTopMenu = function(option)
     {
         var cfg = {
-                timeout: 200,
+                duration: 200
-                duration: 300,
-                interval: 500,
-                count: 5
             };
 
-        if(typeof timeout == "object") {
+        var $this = this;
-            cfg = $.extend( cfg, timeout);
+        var height = 0;
-        } else {
-            if(timeout) {
-                cfg = $.extend({ timeout: timeout });
-            }
-
-            if(duration) {
-                cfg = $.extend({ duration: duration });
-            }
-
-            if(interval) {
-                cfg = $.extend({ interval: interval });
-            }
-
-            if(count) {
-                cfg = $.extend({ count: count });
-            }
-        }
-
-        var $menu = this;
         var scroll_y = 0;
-        var origin_y = 0;
-        var timeout = null;
-        var interval = null;
-        var height = parseInt($menu.height());
-        var interval_count = 0;
 
-        function init_menu()
+        var methods = {
-        {
+            init: function(option)
-            hide_menu();
+            {
+                if($this.data("animated") == true)
+                    return;
 
-            timeout = setTimeout(function() {
+                $this.data("animated", true);
-                $menu.css("top", (scroll_y - height)+"px").css("display", "block");
-                $menu.animate({ top: scroll_y }, cfg.duration);
 
-                return;
+                if(typeof option == "object") {
-            }, cfg.timeout);
+                    cfg = $.extend( cfg, option);
-        }
+                }
 
-        function float_menu()
+                $this.data("cfg", cfg);
-        {
+                $this.css({ top: "-500px", display: "block" });
-            hide_menu();
 
-            origin_y = $(window).scrollTop();
+                height = parseInt($this.outerHeight());
-
-            timeout = setTimeout(function() {
-                height = parseInt($menu.height());
                 scroll_y = $(window).scrollTop();
 
-                if(origin_y == scroll_y) {
+                $this
-                    $menu.css("top", (scroll_y - height)+"px").css("display", "block");
+                    .css("display", "none")
-                    $menu.animate({ top: scroll_y }, cfg.duration);
+                    .clearQueue()
+                    .stop()
+                    .css("top", (scroll_y - height)+"px").css("display", "block")
+                    .animate({ top: scroll_y }, cfg.duration, function() { $this.data("animated", false); });
+            },
+            show: function()
+            {
+                if($this.data("animated") == true)
+                    return;
+
+                $this.data("animated", true);
+
+                if($this.data("cfg")) {
+                    cfg = $.extend( cfg, $this.data("cfg"));
                 }
-            }, cfg.timeout);
-        }
 
-        function hide_menu()
+                $this.css({ top: "-"+height+"px", display: "block" });
-        {
-            $menu.css("display", "none").clearQueue().stop().css("top", "-"+height+"px");
 
-            clearTimeout(timeout);
+                height = parseInt($this.outerHeight());
-            clearInterval(interval);
+                scroll_y = $(window).scrollTop();
 
-            interval_count = 0;
+                $this
-            interval = setInterval(check_menu, cfg.interval);
+                    .css("display", "none")
-        }
+                    .css("top", (scroll_y - height)+"px").css("display", "block")
-
+                    .animate({ top: scroll_y }, cfg.duration, function() { $this.data("animated", false); });
-        function check_menu()
+            },
-        {
+            hide: function()
-            clearTimeout(timeout);
+            {
-
+                $this.css({ display: "none", top: "-"+height+"px" });
-            if(interval_count == parseInt(cfg.count)) {
-                clearInterval(interval);
-                interval_count = 0;
-                return;
-            } else {
-                interval_count++;
             }
+        };
 
-            origin_y = $(window).scrollTop();
+        if (methods[option])
-
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
-            timeout = setTimeout(function() {
+        else
-                scroll_y = $(window).scrollTop();
+            return methods.init.apply(this, arguments);
-
-                if(origin_y == scroll_y) {
-                    element_y = parseInt($menu.css("top"));
-
-                    if(!$menu.is(":animated") && ($menu.is(":hidden") || (element_y - scroll_y) != 0)) {
-                        float_menu();
-                    }
-                }
-            }, cfg.timeout);
-        }
-
-        $(window).on("scroll",function(event) {
-            float_menu();
-        });
-
-        $(window).on("resize", function(event) {
-            if(origin_y != scroll_y)
-                float_menu();
-        });
-
-        $(window).on("load", function(event) {
-            init_menu();
-        });
-
-        document.addEventListener('touchmove', function(event) {
-            hide_menu();
-        }, false);
     }
 
-    $.fn.bottomFloatMenu = function(timeout, duration, interval, count)
+    $.fn.floatBottomMenu = function(option)
     {
         var cfg = {
-                timeout: 200,
+                duration: 200
-                duration: 300,
-                interval: 500,
-                count: 5
             };
 
-        if(typeof timeout == "object") {
+        var $this = this;
-            cfg = $.extend( cfg, timeout);
+        var height = 0;
-        } else {
-            if(timeout) {
-                cfg = $.extend({ timeout: timeout });
-            }
-
-            if(duration) {
-                cfg = $.extend({ duration: duration });
-            }
-
-            if(interval) {
-                cfg = $.extend({ interval: interval });
-            }
-
-            if(count) {
-                cfg = $.extend({ count: count });
-            }
-        }
-
-        var $menu = this;
         var scroll_y = 0;
-        var origin_y = 0;
-        var element_y = 0;
-        var timeout = null;
-        var interval = null;
-        var height = parseInt($menu.height());
         var w_height = 0;
-        var interval_count = 0;
+        var element_y = 0;
 
-        function init_menu()
+        var methods = {
-        {
+            init: function(option)
-            hide_menu();
+            {
+                if($this.data("animated") == true)
+                    return;
 
-            timeout = setTimeout(function() {
+                $this.data("animated", true);
+
+                if(typeof option == "object") {
+                    cfg = $.extend( cfg, option);
+                }
+
+                $this.data("cfg", cfg);
+
+                $this.css({ top: "-500px", display: "block" });
+
+                height = parseInt($this.outerHeight());
                 scroll_y = $(window).scrollTop();
                 w_height = $(window).height();
                 element_y = scroll_y + w_height;
-                $menu.css("top", element_y+"px").css("display", "block");
-                $menu.clearQueue().stop().animate({ top: "-="+height }, cfg.duration);
-            }, cfg.timeout);
-        }
 
-        function float_menu()
+                $this
-        {
+                    .css("display", "none")
-            hide_menu();
+                    .clearQueue()
+                    .stop()
+                    .css({ top: element_y+"px", display: "block" })
+                    .animate({ top: "-="+height }, cfg.duration, function() { $this.data("animated", false); });
+            },
+            show: function()
+            {
+                if($this.data("animated") == true)
+                    return;
 
-            origin_y = $(window).scrollTop();
+                $this.data("animated", true);
 
-            timeout = setTimeout(function() {
+                if($this.data("cfg")) {
+                    cfg = $.extend( cfg, $this.data("cfg"));
+                }
+
+                $this.css({ top: "-"+height+"px", display: "block" });
+
+                height = parseInt($this.outerHeight());
                 scroll_y = $(window).scrollTop();
+                w_height = $(window).height();
+                element_y = scroll_y + w_height;
 
-                if(origin_y == scroll_y) {
+                if (/iP(hone|od|ad)/.test(navigator.platform)) {
-                    height = parseInt($menu.height());
+                    if(window.innerHeight - $(window).outerHeight(true) > 0)
-                    w_height = $(window).height();
+                        element_y += (window.innerHeight - $(window).outerHeight(true));
-                    element_y = scroll_y + w_height;
+                }
 
-                    if (/iP(hone|od|ad)/.test(navigator.platform)) {
+                $this
-                        if(window.innerHeight - $(window).outerHeight(true) > 0)
+                    .css("display", "none")
-                            element_y += (window.innerHeight - $(window).outerHeight(true));
+                    .clearQueue()
-                    }
+                    .stop()
-
+                    .height(0)
-                    $menu.height(0).css("top", element_y+"px").css("display", "block");
+                    .css({top: element_y+"px", display: "block"})
-                    $menu.animate({
+                    .animate({
                         top: "-="+height,
                         height: "+="+height
-                    }, cfg.duration);
+                    }, cfg.duration,
-                }
+                        function() {
-            }, cfg.timeout);
+                            $this.data("animated", false);
-        }
+                        }
-
+                    );
-        function hide_menu()
+            },
-        {
+            hide: function()
-            $menu.css("display", "none").css("top", (w_height + height)+"px").clearQueue().stop();
+            {
-
+                this.css({ display: "none", top: "-"+height+"px" });
-            clearTimeout(timeout);
-            clearInterval(interval);
-
-            interval_count = 0;
-            interval = setInterval(check_menu, cfg.interval);
-        }
-
-        function check_menu()
-        {
-            clearTimeout(timeout);
-
-            if(interval_count == parseInt(cfg.count)) {
-                clearInterval(interval);
-                interval_count = 0;
-                return;
-            } else {
-                interval_count++;
             }
+        };
 
-            origin_y = $(window).scrollTop();
+        if (methods[option])
-
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
-            timeout = setTimeout(function() {
+        else
-                scroll_y = $(window).scrollTop();
+            return methods.init.apply(this, arguments);
-
-                if(origin_y == scroll_y) {
-                    w_height = $(window).height();
-                    element_y = parseInt($menu.css("top"));
-
-                    var h = 0;
-                    if (/iP(hone|od|ad)/.test(navigator.platform)) {
-                        if(window.innerHeight - $(window).outerHeight(true) > 0)
-                            h = window.innerHeight - $(window).outerHeight(true);
-                    }
-
-                    if(!$menu.is(":animated") && ($menu.is(":hidden") || element_y != (scroll_y + w_height + h - height))) {
-                        float_menu();
-                    }
-                }
-            }, cfg.timeout);
-        }
-
-        $(window).on("scroll",function(event) {
-            float_menu();
-        });
-
-        $(window).on("load", function(event) {
-            init_menu();
-        });
-
-        $(window).on("resize", function(event) {
-            if(origin_y != scroll_y)
-                float_menu();
-        });
-
-        document.addEventListener('touchmove', function(event) {
-            hide_menu();
-        }, false);
     }
 }(jQuery));

mobile/shop/iteminfo.php

@@ -101,7 +101,39 @@ switch($info) {
 
 <script>
 $(function() {
-    $("#info_top_layer").topFloatMenu();
+    var scroll_timeout = null;
+    var timeout = 200;
+
+    $(window).on("load", function(e) {
+        setTimeout(function() {
+            $("#info_top_layer").floatTopMenu();
+        }, timeout);
+    });
+
+    if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
+        $(window).on("resize", function(e) {
+            setTimeout(function() {
+                $(window).trigger("scroll");
+            }, timeout);
+        });
+    }
+
+    $(window).on("scroll", function(e) {
+        clearTimeout(scroll_timeout);
+        $("#info_top_layer").floatTopMenu("hide");
+
+        scroll_timeout = setTimeout(function() {
+            $("#info_top_layer").floatTopMenu("show");
+        }, timeout);
+    });
+
+    // scroll event enable
+    $(window).on("movestart", function(e) {
+        if ((e.distX > e.distY && e.distX < -e.distY) ||
+        (e.distX < e.distY && e.distX > -e.distY)) {
+            e.preventDefault();
+        }
+    });
 });
 </script>
 

mobile/skin/shop/basic/item.form.skin.php

@@ -385,9 +385,6 @@ $(function(){
         return false;
     });
 
-    // 하단 플로팅 메뉴
-    $("#form_btn_layer").bottomFloatMenu();
-
     // 이전 다음상품 swipe
     $(window)
         .on("swipeleft", function(e) {
@@ -490,6 +487,32 @@ $(function(){
             <?php } ?>
         });
 
+    var scroll_timeout = null;
+    var timeout = 200;
+
+    $(window).on("load", function(e) {
+        setTimeout(function() {
+            $("#form_btn_layer").floatBottomMenu();
+        }, timeout);
+    });
+
+    if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
+        $(window).on("resize", function(e) {
+            setTimeout(function() {
+                $(window).trigger("scroll");
+            }, timeout);
+        });
+    }
+
+    $(window).on("scroll", function(e) {
+        clearTimeout(scroll_timeout);
+        $("#form_btn_layer").floatBottomMenu("hide");
+
+        scroll_timeout = setTimeout(function() {
+            $("#form_btn_layer").floatBottomMenu("show");
+        }, timeout);
+    });
+
     // scroll event enable
     $(window).on("movestart", function(e) {
         if ((e.distX > e.distY && e.distX < -e.distY) ||
@@ -503,11 +526,16 @@ function load_message()
 {
     var w = $(window).width();
     var h = $(window).height();
-    var img_w = 32;
+    var img_w = 64;
-    var img_h = 32;
+    var img_h = 64;
     var top, left;
     var scr_top = $(window).scrollTop();
 
+    if (/iP(hone|od|ad)/.test(navigator.platform)) {
+        if(window.innerHeight - $(window).outerHeight(true) > 0)
+            h += (window.innerHeight - $(window).outerHeight(true));
+    }
+
     top = parseInt((h - img_h) / 2);
     left = parseInt((w - img_w) / 2);
 

mobile/skin/shop/basic/style.css

@@ -80,5 +80,5 @@
 
 
 /* 로딩안내 레이어 */
-#loading_message {position:absolute;top:0;left:0;z-index:10000;background-color:#000;opacity:.5}
+#loading_message {position:absolute;top:0;left:0;z-index:10000;background-color:#eee;opacity:0.5}
-#loading_message img {position:relative}
+#loading_message img {position:relative;opacity:1.0}