diff --git a/README.md b/README.md index 0b5706c..f3947f9 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,9 @@ Initialize * * * ### Changelog +#### v.1.1 : August 11th, 2013 +* Adds timeout flags to aid in stopping double touch/click events for some Android browsers + #### v.1.0.1 : August 5th, 2013 * Fixes hover out bug if user clicks arrow on large screens diff --git a/coffeescripts/jquery.flexnav.coffee b/coffeescripts/jquery.flexnav.coffee index 49e2d51..a74ceab 100644 --- a/coffeescripts/jquery.flexnav.coffee +++ b/coffeescripts/jquery.flexnav.coffee @@ -1,7 +1,7 @@ ### - FlexNav.js 1.0 + FlexNav.js 1.1 - Copyright 2013, Jason Weaver http://jasonweaver.name + Created by Jason Weaver http://jasonweaver.name Released under http://unlicense.org/ // @@ -20,6 +20,7 @@ $.fn.flexNav = (options) -> options $nav = $(@) + flag = false # Set some classes in the markup $nav.addClass('with-js') @@ -109,7 +110,11 @@ $.fn.flexNav = (options) -> bs = settings['buttonSelector'] $btnParent = if ($(@).is(bs)) then $(@) else $(@).parent(bs) $thisNav = $btnParent.data('navEl') - $thisNav.toggleClass('show') + if flag is false + flag = true + setTimeout( -> flag = false + 100) + $thisNav.toggleClass('show') ) # Toggle for sub-menus @@ -118,16 +123,20 @@ $.fn.flexNav = (options) -> e.stopPropagation() $sub = $(@).parent('.item-with-ul').find('>ul') $touchButton = $(@).parent('.item-with-ul').find('>span.touch-button') - # remove class of show from all elements that are not current - if $nav.hasClass('lg-screen') is true - $(@).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide() - # add class of show to current - if $sub.hasClass('show') is true - $sub.removeClass('show').slideUp(settings.animationSpeed) - $touchButton.removeClass('active') - else if $sub.hasClass('show') is false - $sub.addClass('show').slideDown(settings.animationSpeed) - $touchButton.addClass('active') + if flag is false + flag = true + setTimeout( -> flag = false + 100) + # remove class of show from all elements that are not current + if $nav.hasClass('lg-screen') is true + $(@).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide() + # add class of show to current + if $sub.hasClass('show') is true + $sub.removeClass('show').slideUp(settings.animationSpeed) + $touchButton.removeClass('active') + else if $sub.hasClass('show') is false + $sub.addClass('show').slideDown(settings.animationSpeed) + $touchButton.addClass('active') ) # Sub ul's should have a class of 'open' if an element has focus diff --git a/css/flexnav.css b/css/flexnav.css index 9a68004..2be83a0 100644 --- a/css/flexnav.css +++ b/css/flexnav.css @@ -156,7 +156,7 @@ top: 0; right: auto; max-width: 1080px; } - .oldie .flexnav li { + .oldie .flexnav li { position: relative; list-style: none; float: left; @@ -177,7 +177,7 @@ border-bottom: none; overflow: visible; } .oldie .flexnav li > ul { - background:#acaca1; + background: #acaca1; position: absolute; top: auto; left: 0; @@ -186,9 +186,6 @@ overflow: visible; } .oldie .flexnav li ul li ul { top: 0; } - .oldie .flexnav li ul li { - padding-bottom: 0; - margin-bottom: 0;} .oldie .flexnav li ul li a { border-bottom: none; } .oldie .flexnav li ul.open { diff --git a/index.html b/index.html index ce39984..5db5bad 100644 --- a/index.html +++ b/index.html @@ -111,7 +111,7 @@

Options

devices
-

Get FlexNav v1.0.1

+

Get FlexNav v1.1

Download on GitHub →

diff --git a/js/jquery.flexnav.js b/js/jquery.flexnav.js index af17678..ed7f05c 100644 --- a/js/jquery.flexnav.js +++ b/js/jquery.flexnav.js @@ -1,7 +1,7 @@ /* - FlexNav.js 1.0 + FlexNav.js 1.1 - Copyright 2013, Jason Weaver http://jasonweaver.name + Created by Jason Weaver http://jasonweaver.name Released under http://unlicense.org/ // @@ -14,7 +14,7 @@ $ = jQuery; $.fn.flexNav = function(options) { - var $nav, breakpoint, resetMenu, resizer, selector, settings, showMenu; + var $nav, breakpoint, flag, resetMenu, resizer, selector, settings, showMenu; settings = $.extend({ 'animationSpeed': 250, 'transitionOpacity': true, @@ -23,6 +23,7 @@ 'hoverIntentTimeout': 150 }, options); $nav = $(this); + flag = false; $nav.addClass('with-js'); if (settings.transitionOpacity === true) { $nav.addClass('opacity'); @@ -94,7 +95,13 @@ bs = settings['buttonSelector']; $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs); $thisNav = $btnParent.data('navEl'); - return $thisNav.toggleClass('show'); + if (flag === false) { + flag = true; + setTimeout(function() { + return flag = false; + }, 100); + return $thisNav.toggleClass('show'); + } }); $('.touch-button').on('touchstart click', function(e) { var $sub, $touchButton; @@ -102,15 +109,21 @@ e.stopPropagation(); $sub = $(this).parent('.item-with-ul').find('>ul'); $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button'); - if ($nav.hasClass('lg-screen') === true) { - $(this).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide(); - } - if ($sub.hasClass('show') === true) { - $sub.removeClass('show').slideUp(settings.animationSpeed); - return $touchButton.removeClass('active'); - } else if ($sub.hasClass('show') === false) { - $sub.addClass('show').slideDown(settings.animationSpeed); - return $touchButton.addClass('active'); + if (flag === false) { + flag = true; + setTimeout(function() { + return flag = false; + }, 100); + if ($nav.hasClass('lg-screen') === true) { + $(this).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide(); + } + if ($sub.hasClass('show') === true) { + $sub.removeClass('show').slideUp(settings.animationSpeed); + return $touchButton.removeClass('active'); + } else if ($sub.hasClass('show') === false) { + $sub.addClass('show').slideDown(settings.animationSpeed); + return $touchButton.addClass('active'); + } } }); $nav.find('.item-with-ul *').focus(function() { diff --git a/js/jquery.flexnav.min.js b/js/jquery.flexnav.min.js index c38adac..70072e9 100644 --- a/js/jquery.flexnav.min.js +++ b/js/jquery.flexnav.min.js @@ -1,2 +1,2 @@ -/*! flexnav https://github.com/indyplanets/flexnav http://unlicense.org/ 2013-08-05 */ -!function(){var a;a=jQuery,a.fn.flexNav=function(b){var c,d,e,f,g,h,i;return h=a.extend({animationSpeed:250,transitionOpacity:!0,buttonSelector:".menu-button",hoverIntent:!1,hoverIntentTimeout:150},b),c=a(this),c.addClass("with-js"),h.transitionOpacity===!0&&c.addClass("opacity"),c.find("li").each(function(){return a(this).has("ul").length?a(this).addClass("item-with-ul").find("ul").hide():void 0}),c.data("breakpoint")&&(d=c.data("breakpoint")),i=function(){return c.hasClass("lg-screen")===!0?h.transitionOpacity===!0?a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},h.animationSpeed):a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"]},h.animationSpeed):void 0},e=function(){return c.hasClass("lg-screen")===!0&&a(this).find(">ul").hasClass("show")===!0?h.transitionOpacity===!0?a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},h.animationSpeed):a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"]},h.animationSpeed):void 0},f=function(){if(a(window).width()<=d)return c.removeClass("lg-screen").addClass("sm-screen"),a(".one-page li a").on("click",function(){return c.removeClass("show")});if(a(window).width()>d){if(c.removeClass("sm-screen").addClass("lg-screen"),c.removeClass("show"),h.hoverIntent===!0)return a(".item-with-ul").hoverIntent({over:i,out:e,timeout:h.hoverIntentTimeout});if(h.hoverIntent===!1)return a(".item-with-ul").on("mouseenter",i).on("mouseleave",e)}},a(h.buttonSelector).data("navEl",c),g=".item-with-ul, "+h.buttonSelector,a(g).append(''),g=h.buttonSelector+", "+h.buttonSelector+" .touch-button",a(g).on("touchstart click",function(b){var c,d,e;return b.preventDefault(),b.stopPropagation(),e=h.buttonSelector,c=a(this).is(e)?a(this):a(this).parent(e),d=c.data("navEl"),d.toggleClass("show")}),a(".touch-button").on("touchstart click",function(b){var d,e;return b.preventDefault(),b.stopPropagation(),d=a(this).parent(".item-with-ul").find(">ul"),e=a(this).parent(".item-with-ul").find(">span.touch-button"),c.hasClass("lg-screen")===!0&&a(this).parent(".item-with-ul").siblings().find("ul.show").removeClass("show").hide(),d.hasClass("show")===!0?(d.removeClass("show").slideUp(h.animationSpeed),e.removeClass("active")):d.hasClass("show")===!1?(d.addClass("show").slideDown(h.animationSpeed),e.addClass("active")):void 0}),c.find(".item-with-ul *").focus(function(){return a(this).parent(".item-with-ul").parent().find(".open").not(this).removeClass("open").hide(),a(this).parent(".item-with-ul").find(">ul").addClass("open").show()}),f(),a(window).on("resize",f)}}.call(this); \ No newline at end of file +/*! flexnav https://github.com/indyplanets/flexnav http://unlicense.org/ 2013-08-11 */ +!function(){var a;a=jQuery,a.fn.flexNav=function(b){var c,d,e,f,g,h,i,j;return i=a.extend({animationSpeed:250,transitionOpacity:!0,buttonSelector:".menu-button",hoverIntent:!1,hoverIntentTimeout:150},b),c=a(this),e=!1,c.addClass("with-js"),i.transitionOpacity===!0&&c.addClass("opacity"),c.find("li").each(function(){return a(this).has("ul").length?a(this).addClass("item-with-ul").find("ul").hide():void 0}),c.data("breakpoint")&&(d=c.data("breakpoint")),j=function(){return c.hasClass("lg-screen")===!0?i.transitionOpacity===!0?a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},i.animationSpeed):a(this).find(">ul").addClass("show").stop(!0,!0).animate({height:["toggle","swing"]},i.animationSpeed):void 0},f=function(){return c.hasClass("lg-screen")===!0&&a(this).find(">ul").hasClass("show")===!0?i.transitionOpacity===!0?a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"],opacity:"toggle"},i.animationSpeed):a(this).find(">ul").removeClass("show").stop(!0,!0).animate({height:["toggle","swing"]},i.animationSpeed):void 0},g=function(){if(a(window).width()<=d)return c.removeClass("lg-screen").addClass("sm-screen"),a(".one-page li a").on("click",function(){return c.removeClass("show")});if(a(window).width()>d){if(c.removeClass("sm-screen").addClass("lg-screen"),c.removeClass("show"),i.hoverIntent===!0)return a(".item-with-ul").hoverIntent({over:j,out:f,timeout:i.hoverIntentTimeout});if(i.hoverIntent===!1)return a(".item-with-ul").on("mouseenter",j).on("mouseleave",f)}},a(i.buttonSelector).data("navEl",c),h=".item-with-ul, "+i.buttonSelector,a(h).append(''),h=i.buttonSelector+", "+i.buttonSelector+" .touch-button",a(h).on("touchstart click",function(b){var c,d,f;return b.preventDefault(),b.stopPropagation(),f=i.buttonSelector,c=a(this).is(f)?a(this):a(this).parent(f),d=c.data("navEl"),e===!1?(e=!0,setTimeout(function(){return e=!1},100),d.toggleClass("show")):void 0}),a(".touch-button").on("touchstart click",function(b){var d,f;if(b.preventDefault(),b.stopPropagation(),d=a(this).parent(".item-with-ul").find(">ul"),f=a(this).parent(".item-with-ul").find(">span.touch-button"),e===!1){if(e=!0,setTimeout(function(){return e=!1},100),c.hasClass("lg-screen")===!0&&a(this).parent(".item-with-ul").siblings().find("ul.show").removeClass("show").hide(),d.hasClass("show")===!0)return d.removeClass("show").slideUp(i.animationSpeed),f.removeClass("active");if(d.hasClass("show")===!1)return d.addClass("show").slideDown(i.animationSpeed),f.addClass("active")}}),c.find(".item-with-ul *").focus(function(){return a(this).parent(".item-with-ul").parent().find(".open").not(this).removeClass("open").hide(),a(this).parent(".item-with-ul").find(">ul").addClass("open").show()}),g(),a(window).on("resize",g)}}.call(this); \ No newline at end of file diff --git a/package.json b/package.json index 15fc40a..4356212 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flexnav", - "version": "0.8.0", + "version": "1.1", "repository": "https://github.com/indyplanets/flexnav", "license": "http://unlicense.org/", "devDependencies": { diff --git a/single-page-pattern.html b/single-page-pattern.html index 821fd0a..1aa604d 100644 --- a/single-page-pattern.html +++ b/single-page-pattern.html @@ -85,7 +85,7 @@

Section 5

devices
-

Get FlexNav v1.0.1

+

Get FlexNav v1.1

Download on GitHub →