Docs

[RLav]

Hi Support,

I’m just starting on a new site for a client. The site is partnersinperspectief.nl but it’s behind the “X – Under Construction” plugin. I’ll send you the login in a private msg.

I’m trying out the onepage feature of X. I’ve followed the instructions on https://community.theme.co/kb/how-to-setup-one-page-navigation/ but there is someting wrong with the end position of the scrolling. It works well on bigger screens, but as soon as the mobile menu is activated things go wrong. I’ve found many questions and potential answers for this on the forum but I can’get it to work properly.

In my external js file I now use this jquery function I found on the forum:

jQuery(function($){
	$(document).ready(function(){
		
		// Fixing One Page Navbar Offset on Mobiles
		function onePageScrollFixer() {
			var $body           = $('body');
			var $bodyHeight     = $body.outerHeight();
			var $adminbarHeight = $('#wpadminbar').outerHeight();
			var $navbarHeight   = $('.x-navbar').outerHeight();

			var scrollSpyLinks = $('.x-nav > li > a[href^="#"]');
			
			if ($(window).width() <= 979) {
				// alert("below 979");
				scrollSpyLinks.off('click touchstart'); 
				scrollSpyLinks.on('click touchstart', function(e) {
					e.preventDefault();
					var $LinkTarget = $(this).attr('href');
					$('html, body').animate({
						scrollTop: $($LinkTarget).offset().top + 1
					}, 850, 'easeInOutExpo');
					
				});
			}
			
			else {
				scrollSpyLinks.off('click touchstart'); 
				scrollSpyLinks.on('click touchstart', function(e) {
					e.preventDefault();
					var $LinkTarget = $(this).attr('href');
					$('html, body').animate({
						scrollTop: $($LinkTarget).offset().top - $adminbarHeight - $navbarHeight + 1
					}, 850, 'easeInOutExpo');
				});
			}
	   }

	   onePageScrollFixer();

	   $(window).resize(onePageScrollFixer);
		
	});
});

This works well for smaller resized browsers and corrects the offset, but on an ipad (and most likely on an iphone too) it first scrolls to the correct position and then scrolls again to an offset the same height as the navbar. I know that the navbar is not fixed anymore, but that’s fine with me.

So my questions are:

1. where does the offset (looks like 100px, same as the navbar) come from
2. why is there a second scroll event on ipad portrait

I’ve been searching for hours for a solution, hope you guys can help me out!

Richard

[RLav]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Would you mind granting admin access? I like to test some changes directly and I can only do that with admin capability.

Thanks

[RLav]

This reply has been marked as private.

[Rad]

Hi there,

Couldn’t test it since it’s added on external script

1. Let’s do this, please add stop() before animate()

$('html, body').stop().animate( { ............... } );

2. Set the navbar height to zero when while in mobile

var $navbarHeight = ( $(window).width() <= 979 ) ? 0 : $('.x-navbar').outerHeight();

Hope this helps.

[RLav]

Rad,

I removed the exyernal js and moved the function with your suggested changes to rhe customizer (so you’re able to test) but it didn’t change anything.

I was assuming that e.preventDefault(); should prevent the original animation from happening…

Could you please take a look?

Richard

[Rad]

Hi there,

Please check now 🙂

Cheers!

[RLav]

Rad,

it works now on the ipad and samsung galaxy s3 (still have to check on iphone).

Still have a couple of questions:
1. why doesn’t e.preventDefault(); take care of preventing the initial animation?
2. why is there a need for .stop() and e.stopPropagation();
3. could you please tell me where the build in animation function is, so I can take a look at the default behaviour of X when it comes to onePage enabled? If I know where it is I can unminify the code right?
4. If there’s a need for a custom function for onePage sites to work across platforms/browsers isn’t it time for a bugfix? Regarding the amount of questions/problems on this topic!

Will test on different iphones and what have you a.s.a.p.

I’ll let you know!

Richard

[Jack]

Hi Richard,

1) One possible cause of e.preventDefault(); not working correctly is if the event is already binded to an earlier event, that means that when the element starts it’s bound to an earlier binding call which actually prevents the function from having any effect at all, as it still is in the DOM.

2) .stop() only stops the animation effect, whereas e.stopPropagation(); stops and prevents the event from bubbling up through the other events and in the DOM, there’s actually a great explanation of how this works here: http://jsforallof.us/2014/07/08/epreventdefault-estoppropagation/ in addition this could also be a contributing factor to 1) and helps explain why that may not work.

3) We use a modified version of Scroll Spy from bootstrap. The actual code is in a couple of places;

/framework/js/src/site/inc/x-body-scrollspy.js
/framework/js/dist/site/x-body.js line 1752. This is the un-minified file
/framework/functions/global/navbar.php line 61 onwards there is a check for if one page navigation is active and if it is add the scrollspy class.

4) We are and have been looking into a one size fits all fix, though there are many different browsers, browser versions and other considerations before we implement something directly within the theme. Though please be assured it’s something we’re looking at.

Thanks!

[RLav]

Jack,

thank you so much for the info. i’ll look into it and see if i understand the way it’s implemented by X.

Yet another example of exelent support by you guys!

Richard

[Rupok]

You are welcome Richard! Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts