[mertkahraman42Participant]

Hi,

My dropdown menu works great on desktop browsers, but at mobile devices if you are on a page which has dropdown menu items at the header and you are viewing the sub menu items at the header of your current page the user experience drastically changes. Here’s what I would you to checkout:

– Open http://tttwebsite.wpengine.com/ from a mobile device
– Open the dropdown menu that says ‘Choose Your Path’
– And try to scroll down and up at the sub menu items area that open

Because I have anchor tags in that page for that sub menu items, whenever a user wants to scroll down and up on the dropdown menu items, they are immediately taken to the anchor tag.

This is very bad user experience because on touch devices, they are always taken to the place where the anchor tags are.

Can you please guide me?

[mertkahraman42Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-navbar .mobile .x-nav li ul li a {
    display: inline-block;
border: none;
}
.x-navbar .mobile .x-nav li ul li {
    border-bottom: 1px solid #fff;
}
.x-navbar .mobile .x-nav li ul li:last-child {
    border: none;
}

Hope it helps.

[mertkahraman42Participant]

Hi,

Thanks for the help, but this is not what I wanted. Because of the links on the page, you keep getting scrolled down when you touch the links. Can you help me out with the following function to deal with :hover on touch screen devices?

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

jQuery(document).ready(function(){
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
    if(isTouchDevice()) {
        // 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
        jQuery("#menu-main-menu > li > a").click(function(event) {
            // Perform a reset - Remove the "clicked" class on all other menu items
            jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked");
            jQuery(this).toggleClass("clicked");
            if (jQuery(this).hasClass("clicked")) {
                event.preventDefault();
            }
        });
    }
});

[RadModerator]

Hi there,

This script should help you 🙂

jQuery( function($) {

$('.x-nav-wrap.mobile #menu-menu-1 .sub-menu a').off('click touchstart touchend');
$('.x-nav-wrap.mobile #menu-menu-1 .sub-menu a').on('click', function( e ){

e.preventDefault();

$('html,body').stop();

$('.x-btn-navbar').trigger('click');

var target =  $(this);

setTimeout( function() {
$('html,body').stop().animate({
      scrollTop: $('#' + target.attr('href').split("#").slice(-1)[0] ).offset().top
    },700 ,'swing');

}, 200 );

} );

 } );

The problem is that touchstart and touchend triggers on first tap. There is no way to tell if you tap to scroll or you tap to click, so it’s best to disable them.

Cheers!

[mertkahraman42Participant]

YOU, and really, YOU ARE THE BEST!!!

[Rue NelModerator]

You are most welcome!
We’re glad we were able to help you out.

[mertkahraman42Participant]

Hi,

Unfortunately, my code stopped working.

[ZeshanMember]

Hi there,

Instead of the last provided code, please try using this JS code:

jQuery(document).ready(function($) {
    
  $('a[href*="#"]').not('a[href*="#"].x-slider-scroll-bottom').off('touchend touchstart click');
  
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  var dragging             = false;

  $body.on('touchmove', function(){
    dragging = true;
  });

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchend click', function(e) {
    $href            = $(this).attr('href');
    notComments      = $href.indexOf('#comments') === -1;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      var theId = $href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();

        if (dragging) {
          return;
        }

        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

  $body.on("touchstart", function(){
    dragging = false;
  });

  $('.x-btn-navbar').click(function(e) {
    e.preventDefault();
  });

});

Hope this helps. 🙂

Thank you!

[mertkahraman42Participant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for updating the thread!

Upon checking, there seems to be a syntax error in your custom JavaScript code. Please try replacing your JS code with following under Custom > JavaScript in the Customizer:

jQuery(function($) {
  $('#courses-pickYourPath .x-nav-tabs-item a').on('click', function() {
    var theTab = $(this);
    setTimeout(function() {
      $('html,body').stop().animate({
        scrollTop: $('#courses-tabs ' + theTab.attr('href')).offset().top - ($('.x-navbar').height() + $('#wpadminbar').height())
      }, 700, 'swing');
    }, 200);
  });

  /* Choose Your Path */

  $('a.x-btn.x-btn-rounded.x-btn-large.lightbox-selector-request-detailed-syllabus-ios').on('click', function(e) {
    $('html, body').stop();
  });

  $('a.x-btn.x-btn-rounded.x-btn-large.lightbox-selector-request-detailed-syllabus-android').on('click', function(e) {
    $('html, body').stop();
  });

  $('a.x-btn.x-btn-rounded.x-btn-large.lightbox-selector-choose-your-path-start-now').on('click', function(e) {
    $('html, body').stop();
  });

  /* Hiring Companies */

  $('a.x-btn.x-btn-rounded.x-btn-large.lightbox-selector-hiring-drop-us-a-line').on('click', function(e) {
    $('html, body').stop();
  });

  /* About */
  $('a.x-btn.x-btn-rounded.x-btn-large.lightbox-selector-about-start-now').on('click', function(e) {
    $('html, body').stop();
  });

  /* Menu Linking to Tabs */
  $('.page-id-1318 #menu-item-1444 a, .page-id-1318 .menu-item-1444 a').on('click', function() {
    $('.page-id-1318 #tab-1').addClass('active');
    $('.page-id-1318 #tab-2').removeClass('active');
    $('.page-id-1318 #tab-3').removeClass('active');
  });

  $('.page-id-1318 #menu-item-1445 a, .page-id-1318 .menu-item-1445 a').on('click', function() {
    $('.page-id-1318 #tab-2').addClass('active');
    $('.page-id-1318 #tab-1').removeClass('active');
    $('.page-id-1318 #tab-3').removeClass('active');
  });

  $('.page-id-1318 #menu-item-1446 a, .page-id-1318 .menu-item-1446 a').on('click', function() {
    $('.page-id-1318 #tab-3').addClass('active');
    $('.page-id-1318 #tab-1').removeClass('active');
    $('.page-id-1318 #tab-2').removeClass('active');
  });

  $(".lightbox-button").click(function() {
    $('body').css('overflow', 'hidden');
    $('body').css('height', '100%');
  });

  $('.x-nav-wrap.mobile #menu-menu-1 .sub-menu a').off('click touchstart touchend');
  $('.x-nav-wrap.mobile #menu-menu-1 .sub-menu a').on('click', function(e) {

    e.preventDefault();

    $('html,body').stop();

    $('.x-btn-navbar').trigger('click');

    var target = $(this);

    setTimeout(function() {
      $('html,body').stop().animate({
        scrollTop: $('#' + target.attr('href').split("#").slice(-1)[0]).offset().top
      }, 700, 'swing');

    }, 200);
  });

});

Hope this helps. 🙂

Thank you!

[Author]

Posts