Docs

[nacho]

I’m using x child theme. I have installed a responsive timetable plugin that allows users to filter the timetable to show times for the selected event. This works fine in full screen, but not in mobile view. In mobile view the user can press the filter dropdown list and see all options, but cannot select any option. The reason for this was due to scrollspy plugin.

The timetable developer was kind enough to provide the following fix…

/framework/js/dist/site/x-body.js file and on line 1950 there was:

$('a[href*="#"]').on('touchstart click', function(e) {
    href        = $(this).attr('href');

Change above code to:

$('a[href*="#"]').on('touchstart click', function(e) {
	if($(this).closest('.timetable_clearfix').length)
		return;
    href        = $(this).attr('href');

I have looked at this post which indicates the best way to make the javascript change is via the Customizer.

Can you please advise what code I add via Customizer so that the x-body.js and minified version x-body.min.js are both affected?

Thanks

[Rupok]

Hi there,

Thanks for writing in! You can’t edit theme files since it will be overwritten when you update. You can try to add them in Customizer and see if that works.

Cheers!

[nacho]

I tried adding this in Customizer to no effect.

jQuery(document).ready(function($) {
    // allows timetable filter selection on mobile.
  $('a[href*="#"]').on('touchstart click', function(e) {
	if($(this).closest('.timetable_clearfix').length)
		return;
    href        = $(this).attr('href');
  
  });

[nacho]

This reply has been marked as private.

[Paul R]

Hi,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[nacho]

I don’t mind testing and playing around with the customizer code.

To be more general and not discuss the external plugin, if I want to modify any javascript function that is in the supplied javascript files of the X-theme, how do I do this?

EG. if I want to modify the code in x-body.js from line 1950 what is the correct syntax to load it into the customizer? Looking at other posts I thought it just required the line jQuery(document).ready(function($) {

 $('a[href*="#"]').on('touchstart click', function(e) {
	href        = $(this).attr('href');
//my modifcations to go here
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

[Rad]

Hi there,

Any change made to core files will be overwritten by updates. I like to check some alternative (unbinding registered event/method). Would you mind providing your site’s URL that has this issue?

Thanks!

[nacho]

This reply has been marked as private.

[Paul R]

Hi,

Let’s try to reset the onclick event then exclude the timetable links from the onclick event.

jQuery(document).ready(function($) {
  $('a[href*="#"]').off('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);

  //
  // 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*="#"]').not('.sf-timetable-menu a').on('touchstart 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();
        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.

[nacho]

Unfortunately that didn’t work.
Can you please answer these three questions?

1/ What is the process when you update an existing js function via the Customizer? ie. does it modify the js file (in my case the x-body.js file), or is another file updated?

2/ update the core js file with my changes since this works, and revoke validation. Please confirm this will stop automatic updates and therefore preserve the core .js file.

3/ Would another option be to create a new .js file with the code I know that works, and store it in the child theme and call it via functions.php?

[Paul R]

Hi

1. No, it does not modify the file, this is stored in the database. The code provided was to override the default script.

2. Yes, by revoking your license it will stop automatic update

3. Yes, you can try this.

Thanks

[Author]

Posts