Anchor Scrolling Tablet mode

[alamtfuerwerbung]

Hi, pls check http://sub.protecmobil.com/entdeckedenq18/

For better usability and look I added a few different sections which are hidden on desktop mode and displayed in tablet mode. The sections have the same id, but the onepagescrolling doesn´t work in tablet mode.

Example 1: If you click on one of the three buttons on top of the page, lets say Grundrisse,
than it´s scrolling to the section Grundrisse. That works fine in desktop mode. The section for desktopmode has the id grundrisse. The same should work in tablet mode, but it doesn´t. The section for the tablet mode has the same id.

Thx for help.

Andre

[paul.r]

Hi,

Upon checking, I can see three sections with the same ID

https://www.screencast.com/t/gfxubfjt

Please set you visibility to your row instead of your section.

Create only one section with grundrisse id then in that section there will be three rows, each with different visibility.

Hope that helps.

[alamtfuerwerbung]

Thats it, thank you.
Would be great if it´s possible to name the rows.

Best
Andre

[john]

Hi,

I`ve checked your site on my iPad and all is working normally - did you fix it with the Paul solution?

[alamtfuerwerbung]

Yes so far, but there is another problem with direct linking to sections on another page.
I couldn´t creat a topic because I was only allowed to add two links to the thread. But to explain it understandable, I added a few screenshots (links to ctrvl.it).

So I wrote an email to a collegue and I hope to get help soon.

Thx
Andre

[paul.r]

Hi Andre,

You can try adding this in PRO > Launch > Theme Options > JS

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchend click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 96; //fixed header height
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
      dragging = true;
  } );
  
  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // 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;
    if ( href !== '#' && notComments ) {
      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);

  }

});

Hope that helps.

[alamtfuerwerbung]

That seems to work great.

Thx
Andre

[Prasant]

You are most welcome.