Accordions always expanded in Safari / One Page navigation not working in Chrome

There’s some weird stuff going on since PRO 2.0 (I’m on the current version 2.0.4). Check out https://www.tv-magden.ch/juniors/.

In Safari, all accordions are expanded by default and it’s not possible to close them. They work fine in Chrome.

In Chrome, on the other hand, the One Page Navigation is not working (see submenu header on the page mentioned above). This feature works in Safari.

Hi there,

Thanks for writing around! That’s happening due to a custom JavaScript added in your site, please go to your Cornerstone-custom-content-js section and replace the JS with:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.hm1.x-bar').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*="#"]').unbind('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, 1200, 'xEaseInOutExpo');
      }
    }
  });
});

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

No, that’s not the problem. The same thing happens on the home page where I don’t have any custom JS code.

Also, I tried to delete the custom JS code from the /juniors page. But now I noticed that it automatically re-appears after going back to the editor?! Had that problem before: https://theme.co/apex/forum/t/cannot-delete-custom-css-code-on-a-single-page/20772. Is this bug still not tackled?

Hi again,

This looks like a cache issue as I still see the old code in there and I see you’re using Cloudflare. Please clear the CDN’s cache and disable all optimization services. Also see https://theme.co/apex/forum/t/troubleshooting-site-frontend-appears-broken-after-updating/24859 and this may be helpful in your case too https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Content re-appearing is due to the cache problem. Always make sure to disable optimization services while you’re developing your site so you see the latest changes on the front-end.

Let us know how this goes!

I never used Cloudflare’s Rocket Loader due to the well-known problems with the X Theme. I am also not minifying CSS or JS (neither with Cloudfare nor with my W3 Total Cache plugin). And yet, the problem still remains. I can’t delete or change the custom JS code on the /juniors page. Putting Cloudflare to the developer mode didn’t help either.

This is getting old…! As mentioned earlier, I had the same problem back in January. Why is this bug not being tackled? Also, why do we actually have to manually add custom JS code in order for the one page feature to work. This should just work out of the box in my opinion (when activated in the meta settings of the page). I’m tired of having to change the custom JS after every update.

Yeah… except that I was not developing. Rather the update caused the issue…

PS: I was able to resolve the accordion problem with Safari after deleting the browser cache a couple more times.

Would you mind purging all caches in W3TC and completely uninstall it? Also, disconnect your site from Cloudflare. Both steps will help us determine if the issue is coming from Pro.

Thank you.

Hi Christian,

I actually do mind. Look, I know that you’re just trying to debug here. The thing is, though, that it’s quite a pain to set up W3TC and Cloudflare again later. More importantly, I really don’t think that this is going to fix the issue. I did what you suggested last time I had the same problem and it didn’t solve anything.

Last time, the final resolution was that you guys logged in to my site and removed the JS code from the page. When I asked how you did it, the answer was:

We have have imported the page as a Cornerstone template and re saved the changes. Afterwards, we removed the code that needs to be removed.

From that description, I still don’t know exactly how they did it back then, though. Am I supposed to save all my sections as a template, then delete the page, create a new one with the same name, and finally load the template to that new page?

Hi,

Yes, you need to save all as a page template then create a new page and load that template.

After that check the new page is working fine, if it’s working then you can now delete the old page and rename the new one.

With regards to onepage nav, 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

Thanks

Okay, I did that and it solved the problem. Now I have a new page without the custom JS code.

I really hope this is not your vision of the future! Please don’t make us do this after every update. As I said before, I think the one page navigation should just work out of the box or, even better, there should be an (actually working) part in Cornerstone where you can choose a specific menu to act as a one page navigation with options to set the animations and margins/offsets.

Also, I just compared the code @Nabeel gave me earlier in this thread with the old code I had on my /juniors/ page and quickly realized that it was the exact same code! Since the one page navigation worked before the update, this proves that the problem was not a wrong custom JS code but rather some other bug caused by this update.

It was also most certainly not a caching problem. Despite my earlier hesitation I completely uninstalled W3TC yesterday, put Cloudflare in development mode, and cleared all the caches. And yet, I was still not able to remove the custom JS.

I’m not a professional developer by any means but I would like to think of myself to be somewhat advanced in using Wordpress and the X/PRO theme. I like the direction you are developing your theme, that you are making it more flexible for advanced users, and that you don’t rely on pre-designed elements so much anymore but rather give us room for our own creativity with your framework.

Please keep in mind, however, that X/PRO probably has a steeper learning curve today compared to other premium themes. When I think about how much time I spend with your product to tweak, optimize and debug it, I can only imagine how overwhelmed and frustrated less advanced users must be.

Thank you,
Patrick

Credentials to my site are attached in a secure note in case you want to have a look at it.

Hey @zedinho,

Please note that this issue does not happen to everyone so this is not a bug. This has to do with something in your setup that is why I asked earlier to completely uninstall the caching plugin and disconnect CloudFlare. If those did not solve the issue, there could be something in your setup preventing the save operation. I created a test page in your site and JS saving is working fine though (see Secure Note). So the issue is most probably something in the page and/or the custom JS code.

One page navigation is not supported in the Pro header yet. We understand that this should work. This is why our development team is working on fixing bugs and improvements now that the Template Manager is finished. Please stay tuned for updates.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.