navigation drop downs using tablets

Question

I am working on a website and I have a problem with the navigation drop downs using tablets. I have tried using Modernizr using no-touch events and had no luck.

The issue is that on Android tablets when click on the navigation drop-downs it loads the parent page rather than holding the drop-down. I came across this fix http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly and it fixed the issue on Android tablets but it triggered two-three taps using the iOs tablets on navigation.

Code that fixed Android issue:

<script>
/*
AUTHOR: Osvaldas Valutis, www.osvaldas.info
*/
;(function( $, window, document, undefined )
{
$.fn.doubleTapToGo = function( params )
{
    if( !( 'ontouchstart' in window ) &&
        !navigator.msMaxTouchPoints &&
        !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

    this.each( function()
    {
        var curItem = false;

        $( this ).on( 'click', function( e )
        {
            var item = $( this );
            if( item[ 0 ] != curItem[ 0 ] )
            {
                e.preventDefault();
                curItem = item;
            }
        });

        $( document ).on( 'click touchstart MSPointerDown', function( e )
        {
            var resetItem = true,
                parents   = $( e.target ).parents();

            for( var i = 0; i < parents.length; i++ )
                if( parents[ i ] == curItem[ 0 ] )
                    resetItem = false;

            if( resetItem )
                curItem = false;
        });
    });
    return this;
};
})( jQuery, window, document );</script>

And this: <script>
$( function() { $( '#second-menu li:has(ul)' ).doubleTapToGo(); }); </script>

The website that I am working on is www.bpcdev.co.uk for your inspection. Please if you could let me know if there are any more fixes available for iOS two - three taps on navigation drop - downs. Thanks in advanced! :)

Any help on this please please? – pv619 Sep 12 '13 at 15:11 — pv619, Sep 12 '13 at 15:11

score 0 · Answer 1 · edited May 23 '17 at 12:03

You could detect android and add doubletaptogo() only when it is android.

edit: better is to check for iOS which does the odd touch = :hover, touch again = :click behaviour. Also added the aria-haspopup attribute for windows (see end of page at http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly )

Detect iOS
Detect if device is iOS

  $(function () {
    var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
    if( ! iOS) {
        $( '#nav li:has(ul)' ).attr('aria-haspopup','true').doubleTapToGo();
    }
  });

Detect Android
Detect Android phone via Javascript / jQuery
(ps. this will not add doubletaptogo on windows mobile anymore)

  $(function () {
    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    if(isAndroid) {
        $( '#nav li:has(ul)' ).doubleTapToGo();
    }
  });

navigation drop downs using tablets

1 Answers1