Jumplinks jump to wrong locaiton after PRO V2 update

bracas · April 7, 2018, 1:14pm

hey,

we have a customized JS for confirmation the jump links which do not jump to the id. it’s jumps to far away and not even close to where the ID is.

jQuery(document).ready(function($) {

 var $body                = $('body');
 var bodyHeight           = $body.outerHeight();
 var adminbarHeight       = $('#wpadminbar').outerHeight();
 var navbarFixedTopHeight = $('.hm1').outerHeight()+$('.hm10').outerHeight();
 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) {
     console.log($('.hm1.x-bar-fixed').outerHeight());
   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');
     }
   }
 });
});

It does not work and all jumplinks is going totally wrong.

rad · April 7, 2018, 6:48pm

Hi there,

Please change this line,

var navbarFixedTopHeight = $('.hm1').outerHeight()+$('.hm10').outerHeight();

to this

var navbarFixedTopHeight = 133;

You copied the code from another thread where it’ only applicable on their setup. Your site has different class for header bar, but since we know the total height of your header bars, then we can safely add it as above without needing a class.

Thanks!

bracas · April 8, 2018, 7:37am

Hmm no this has been our code with help from you guys as I remember it. Ok it’s seems to jump bot not smooth as before.

nabeel · April 8, 2018, 12:10pm

Hi again,

Please replace your code with the following code:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 134;
  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*="#"]').off('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    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, 'xEaseInOutExpo');
      }
    }
  });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

rad · April 8, 2018, 12:11pm

Hi there,

I see, but again, your header now has different classes. Plus the codes are only applicable to the version where is created, or to intended setup.

How about restoring your site to when it’s still working? Clone your site into staging and update it there. With this, we can simply compare what’s changed.

Thanks!

bracas · April 8, 2018, 12:24pm

Right now we don’t use staging setup, since it created more issues without a proper setup and integration fom hosting at our server.

Of course we have backup but we have had a few updates on the site so we do not want to revert at the moment. It would mean a cost to do the work once again our employees have done.

bracas · April 8, 2018, 12:31pm

We still have a jquery issue see print and example page in secure note.

nabeel · April 8, 2018, 12:43pm

Hi again,

It looks like you have not cleared the browser’s cache, please clear the first and then check the site again. I just tested your site and I’m not getting that error now.

Also make sure to remove the old code from everywhere and use the code provided above.

Hope this helps!

bracas · April 8, 2018, 2:03pm

All cache instances is cleared many times. It works in incognito but still don’t trust it though.
It jumps to wrong direction see video in secure note.

rad · April 8, 2018, 5:09pm

Hi there,

In that case, please provide your login credentials so we could remove the javascript. I tried adding a new one but it’s not working due to already active scripts.

Thanks!

bracas · April 9, 2018, 7:44pm

It jumps to wrong direction the jQuery issue is now gone. So it’s only issue where it jumps right now.

See that the according open doesn’t work. See our side bar on a lot of pages now where you can’t open the accordion. Url example shared in secure note.

paul.r · April 10, 2018, 7:39am

Hi,

It jumps because there are two js codes with different scroll offset that is being triggered.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

Link to your site
WordPress Admin username / password

You may change your login it immediately after we check.

Thanks

bracas · April 10, 2018, 7:18pm

How could it be? This is the only customized javascript we have on the site:

jQuery(document).ready(function($) {
  $('.img-zoom').hover(
    function(e) { 
      $(this).css('z-index','999999999');
    $(this).css('position','relative');

      $('body').addClass( "darken");
    }, function(e) {
       $('body').removeClass( "darken");
    } );  
});
 //
 // Above is dark opacity when hover
 //

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 134;
  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*="#"]').off('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    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, 'xEaseInOutExpo');
      }
    }
  });
});

paul.r · April 11, 2018, 3:21am

Hi,

Try to change it with this.

jQuery(document).ready(function($) {
  $('.img-zoom').hover(
    function(e) { 
      $(this).css('z-index','999999999');
    $(this).css('position','relative');

      $('body').addClass( "darken");
    }, function(e) {
       $('body').removeClass( "darken");
    } );  
});
 //
 // Above is dark opacity when hover
 //
 
jQuery(document).ready(function($) {
  $('a[href*="#"]').off('touchend click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 134;
  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) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    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, 'xEaseInOutExpo');
      }
    }
  });
});

Hope that helps.

bracas · April 11, 2018, 6:30pm

Above code still jumps correct but then jump further and to wrong locations.

See that the according open doesn’t work. See our side bar on a lot of pages now where you can’t open the accordion. Url example shared in secure note.

Could you check this as well shared once again in secure note. Plus the white space see in secure note.

jumar · April 14, 2018, 10:40am

Hello there,

Can you share to us your Wordpress User/Pass in a secure note? This is so we can take a closer look of the issues for the jump links and accordion.

Thank you.

bracas · April 12, 2018, 7:43pm

Will have a look at this tomorrow.

friech · April 12, 2018, 10:22pm

Let us know how it goes,

Cheers!

bracas · April 14, 2018, 7:30am

Will have a look during the day. thanks

rad · April 20, 2018, 12:13pm

Hi there,

It’s now moved too. Please note that we can only continue the troubleshooting once the credentials are provided. We can’t fully check due to existing custom javascript.

Thanks!