[Jeroen RParticipant]

Hi there,

My website is located at http://cropped.nl
After the latest batch of updates, bringing WP to 4.1, the theme to 3.1.1 and the plugins to 4.3.5 for visual composer and 2.6.1 for the shortcodes some things happened to my site. A lot of text was ‘off’ but this has been manually solved. Only things remaining is weird flashing when hitting a ‘scroll to’ button and scrolling at the same time. (like the buttons under the initial header on the home page). Now I can imagine you shouldn’t scroll during a scrolling animation after clicking a button, but I do not believe this was there before the updates. I have X-smoothscrolling enabled. I also had some custom javascript code for the smooth scrolling, but removed that as it is no longer needed.

In addition to this, items that have loaded on the portfolio and the blog page (after the loading animation) flicker once or twice before just popping up. It looks a bit silly. Also – this was not there before the update.

These issues are minor, but still make the site less appealing than it looked before the updating of the theme and WP.

Is there anything that can be done about these issues?

Thanks a lot and keep up the good work!

[ZeshanMember]

Hi there,

Thanks for writing in!

Upon checking, I’m not able to see the “scroll to bottom” button at all on your website (see: http://prntscr.com/5m8uli), would you mind confirming again?

However, you can try adding following under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.x-slider-container.above .x-slider-scroll-bottom').off('click');
  $('.x-slider-container.above .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $('.x-slider-container.above').outerHeight()
    }, 850);
  });

  $('.x-slider-container.below .x-slider-scroll-bottom').off('click');
  $('.x-slider-container.below .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    var $mastheadHeight       = $('.masthead').outerHeight();
    var $navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
    var $sliderAboveHeight    = $('.x-slider-container.above').outerHeight();
    var $sliderBelowHeight    = $('.x-slider-container.below').outerHeight();
    var $heightSum            = $mastheadHeight + $sliderAboveHeight + $sliderBelowHeight - $navbarFixedTopHeight;
    $('html, body').animate({
      scrollTop: $heightSum
    }, 850);
  });

});

Regarding the portfolio issue, upon checking, I’m not able to replicate the issue. Can you provide us more detail about this issue? Perhaps you could provide us with some screenshots or a video of the issue you’re facing?

Thank you.

[Jeroen RParticipant]

By the scroll-to buttons I mean the red buttons below the header. They scroll to anchors on the page (expect for the portfolio one), but the scrolling animation flickers a lot when, during the animation, the user scrolls. Not a major issue, but something that I believe was not there before the update.

About the portfolio – I’ll capture a video of it asap.

[Jeroen RParticipant]

Here is the video of the issue. Again, minor issue – just a tad weird and not there before updating:

If video is not showing: youtu . be / h6tB-mCzlHs (remove empy spaces)

[ZeshanMember]

Hi Jeroen,

#1: Regarding the smooth scroll, try adding following code under Custom > CSS in the Customizer:

jQuery(document).ready(function($) {
  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);

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

  $('a[href*="#"]').off('click');
  $('a[href*="#"]:not([href^="#"])').click(function() {
    return true;
  });

  $('a[href^="#"]').click(function(e) {
    $href = $(this).attr('href');
    if ( $href !== '#' ) {
      var $id = $href.split('#').pop();
      var $el = $('#' + $id);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset( $el, 850 );
      }
    }
  });
});

#2: Regarding the portfolio issue, I’m still not able to replicate this issue. It could be a caching issue, you can try clearing your browser’s cache or test on a different browser.

Thanks!

[Jeroen RParticipant]

Thanks for the quick response.
The code does not seem to alter the situation, however, disabling the x-smooth-scroll plugin does fix the issue. I tested this in several browsers with, and without the new code. Only disabling the plugin seems to work, but naturally…the smooth scrolling effect dissapears then. If I have to choose between the two I will pick the smooth scrolling with the added issues.

About the portfolio: I tested it with several browsers and indeed the probleem only exists in my current Chrome build. When loaded in Chrome on a different PC the problem does not exist, so I will no longer worry about that ‘issue’.

Thanks again. Hoping there may still be a fix to the first minor issue…if not, I can live with it 🙂

[Nabeel AModerator]

Glad you’ve resolved the issue.

Take care!

[Author]

Posts