Docs

[RLav]

Rad,

no matter where I put this code (in or outside my onePageScrollFixer() function), it works the first time I touch the ‘wat’ menu-item (ipad) or click (laptop), the submenu closes. If I then touch/click another main-menu-item and after that try again toching/clicking the ‘wat’ menu-item, the page scroll instantly to the section and the submenu stays open.

Richard

[RLav]

Rad,

thaks for your suggestion! While it did not work, it did spark some ideas and most of all inspiration on my side… I suddenly realised that I needed a global variable to keep track of the state things are in touch-wise.

I declared a global variable outside my main $(document).ready(function()

var xActiveIs = "false";

Then inside my main $(document).ready(function() I used:

$('a[href="#wat"]').off('touchstart touchend').on('touchstart', function(e) {
	e.preventDefault();
	e.stopPropagation();
	var $LinkTarget = $(this).attr('href');
	// check if submenu is open via global variable
	if (xActiveIs == "true") {
		$('html, body').stop().animate({
			scrollTop: $($LinkTarget).offset().top - $adminbarHeight - $navbarHeight + 1
		}, 850, 'easeInOutExpo');
		//close submenu
		$(this).parent().toggleClass("x-active");
		// set global variable for next touch
		xActiveIs = "false";
	}
	
	else {
		// check global variable if submenu should be opened
		$(this).parent().toggleClass("x-active");
		// set global variable for next touch
		xActiveIs = "true";
	}
}); 

Now if I touch the menu-item "wat" and thus open the submenu and then touch another (non-submenu) menu-item, the submenu will stay opened. So I added this to the prior existing touch-logic:

if (xActiveIs == "true") {
	$(document).find('.menu-item-has-children').removeClass("x-active");
	xActiveIs = "false";
}

So this one we can consider ‘tackled’!

The next problem is the fact that in portrait mode on ipad the submenu toggle (arrow double down) doesn’t work, instead it scrolls directly to the section.

For now thanks again!

Richard

[Rad]

Hi there,

Please use “on click” instead of “on touchstart”, like this

$('a[href="#wat"]').off('touchstart touchend').on('click', function(e) {

I just checked it and it works.

Thanks!

[RLav]

Rad,

where did you put this code? It must be after the if ($(window).width() <= 979) { part of the function I guess! Can’t get it to work on my side.

Richard

[Rad]

Hi there,

It’s within your code that you just provided, it’s not there yet, you have to do the change and make it like that. Example, from this line

$('a[href="#wat"]').off('touchstart touchend').on('touchstart', function(e) {

to this line

$('a[href="#wat"]').off('touchstart touchend').on('click', function(e) {

I didn’t put any, it’s a recommendation.

Thanks!

[RLav]

Rad,

how did you check it? I tried the same code as the code for >979 but with a different offset for the scroll. Nothing I try works. As you can see I don’t use the global variable anymore because $(this).parent().hasClass(“x-active”) gave me the same info for the desktop version.

Richard

For clarity, here’s my full code:

jQuery(function($){

// class now added in _navbar.php in child theme
// $(document).find(‘.x-navbar’).addClass(‘x-navbar-fixed-top’);

// set global variable for detecting weather the submenu is open or not
// var xActiveIs = “false”;
// not used anymore

$(document).ready(function(){

// replace the url in the address bar in case there’s a hash
// find a solution for the delay!!!
if (location.hash) {
history.replaceState( {}, ”, ‘http://partnersinperspectief.nl&#8217; );
}

// 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^=”#”]’);
var $introBtn = $(document).find(‘.intro-btn’);
var $subMenu = $(document).find(‘.sub-menu’);
var $xSubToggle = $(document).find(‘.x-sub-toggle’);

if ($(window).width() <= 979) {
// $(window).width() is not the same as the width used in the css media query
// find a fix for this later !!!
// console.log($(window).width());
scrollSpyLinks.off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top
}, 850, ‘easeInOutExpo’);
});

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
// what to put here?
});

$introBtn.on(‘click touchstart’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = “#home”;
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top
}, 850, ‘easeInOutExpo’);
});
}

else {
scrollSpyLinks.off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top – $adminbarHeight – $navbarHeight + 1
}, 850, ‘easeInOutExpo’);
// close submenu
$(document).find(‘li.x-active’).removeClass(“x-active”);
});

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
// check if submenu is open
if ( $(this).parent().hasClass(“x-active”) ) {
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top – $adminbarHeight – $navbarHeight + 1
}, 850, ‘easeInOutExpo’);
//close submenu
$(this).parent().toggleClass(“x-active”);
}

else {
// open submenu
$(this).parent().toggleClass(“x-active”);
}
});

$introBtn.on(‘click touchstart’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = “#home”;
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top – $adminbarHeight – $navbarHeight + 1
}, 850, ‘easeInOutExpo’);
});
}
}

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

// fixing the behaviour of the parent menu-item ‘wat’ on other pages
// suggestion provided by Rad (seems to work)
$(‘a[href=”http://partnersinperspectief.nl/#wat”%5D&#8217;).off(‘touchstart touchend’).on(‘click’, function(){ window.location = this; } );

});
});

[RLav]

Rad,

using:

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top
}, 850, ‘easeInOutExpo’);
});

causes the toggle (double arrow) to scroll to the section, instead of toggling the submenu.

Richard

[Paul R]

Hi Richard,

You can try this code instead.

jQuery(function($) {
$(".x-nav-wrap.mobile li.menu-item-has-children a").off("touchstart touchend click"); 
$(".x-nav-wrap.mobile a").not('.x-nav-wrap.mobile li.menu-item-has-children a').on( "click", function() {

setTimeout(
  function() 
  {
     $('.x-btn-navbar').click(); 
  }, 150);
    
});
});

I have tested this in my test site and it seems to work.

Please let us know how it goes.

Thanks

[RLav]

Paul,

what has $(‘.x-btn-navbar’).click(); have to do with this problem. That’s the toggle for the whole mobile menu. The problem lies in the submenu toggle (double arrow down icon).

If you look at my full function above, you can see that I have:

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
// what to put here?
});

The part $(‘a[href=”#wat”]’).off(‘click touchstart touchend’) causes the submenu toggle to work properly! But of course clicking the main menu item ‘wat’ doesn’t do anything anymore, because there’s nothing within the .on(‘click’, function(e) { // what to put here? });

If I use the same functionality within this .on(‘click’, function(e) to scroll to the desired section ie ‘wat’, this breaks the submenu toggle again (but scrolls to the section). This is because of the fact that touching the submenu toggle also triggers the click event for $(‘a[href=”#wat”]’) So they are somehow connected!

Richard

[Paul R]

Hi Richard,

Sorry for the confusion.

Try to change $('a[href="#wat"]') to $('.x-nav-wrap.mobile a[href="#wat"]')

Hope that helps

[RLav]

Guys,

It gave me a headache, but I found the solution.

// rebuild submenu toggle functionality beause it gets broken by scrollSpyLinks.off
$(‘.x-sub-toggle’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass(“x-active”).closest(‘li’).toggleClass(“x-active”);
$(‘.sub-menu’).toggleClass(“in”);
});

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top
}, 850, ‘easeInOutExpo’);
});

So this one is tackled as well. Up to the next thing!
I will ask in a new reply.

Richard

[Rad]

Glad to hear that and thanks for sharing!

[RLav]

Hi guys,

Most of my problems are fixed. Both the menus (as well as the submenu) are working on desktop and ipad for hashtag links and for external links, but there are 2 problems left.

The first and most important one is that after navigating to one of the 2 external pages (‘missie’ and ‘het-wiel-van-perspectief’), going back to the one-page-page (set as frontpage) on screens below 979px using the menu or the brand link doesn’t land on the right spot. The difference is exactly the height of the header. Like I stated before, I don’t expect it to scroll nicely to right spot. But something is throwing it off. The weird thing is that it does work on desktop (probably because the header is sticky).

The fact that returning to the one-page-page shows an url in the addressbar with a hash, for example http://partnersinperspectief.nl/#wat , I was able to fix using this code:

$(window).load(function() {
// replace the url in the address bar in case there’s a hash
if (location.hash) {
history.replaceState( {}, ”, ‘http://partnersinperspectief.nl&#8217; );
}
});

But removing this code doesn’t fix my problem though …

The second one (less of a problem) is that a page refresh also leads to an unpredicted position on the page.

Hope you can enlight me on this one!

Regards,

Richard

p.s. full code for reference below:

jQuery(function($){

$(window).load(function() {
// replace the url in the address bar in case there’s a hash
// find a solution for the delay!!!
if (location.hash) {
history.replaceState( {}, ”, ‘http://partnersinperspectief.nl&#8217; );
}
});

$(document).ready(function(){

// replace icon for submenu toggle to a plus: x-icon-plus
$( “.x-sub-toggle” ).replaceWith( ‘<div class=”x-sub-toggle” data-toggle=”collapse” data-target=”.sub-menu.sm-0″><span><i class=”x-icon-plus” data-x-icon=””></i></span></div>’ );

// 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();
// target all links that need tweaked functionality (menu-items with hash, logo-link on all but home, intro-btn)
var scrollSpyLinks = $(‘.x-nav > li > a[href^=”#”], a[href^=”#home”], .intro-btn-link’);
// var scrollSpyLinks = $(‘.x-nav > li > a[href^=”#”]’);

if ($(window).width() <= 979) {

// $(window).width() is not the same as the width used in the css media query
// find a fix for this later !!!
scrollSpyLinks.off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top
}, 850, ‘easeInOutExpo’);
});

// rebuild submenu toggle functionality because it gets broken by scrollSpyLinks.off
$(‘.x-sub-toggle’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass(“x-active”).closest(‘li’).toggleClass(“x-active”);
$(‘.sub-menu’).toggleClass(“in”);
});

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top
}, 850, ‘easeInOutExpo’);
});

}

else {
scrollSpyLinks.off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top – $adminbarHeight – $navbarHeight + 1
}, 850, ‘easeInOutExpo’);
// close submenu
$(document).find(‘li.x-active’).removeClass(“x-active”);
});

$(‘a[href=”#wat”]’).off(‘click touchstart touchend’).on(‘click’, function(e) {
e.preventDefault();
e.stopPropagation();
var $LinkTarget = $(this).attr(‘href’);
// check if submenu is open
if ( $(this).parent().hasClass(“x-active”) ) {
$(‘html, body’).stop().animate({
scrollTop: $($LinkTarget).offset().top – $adminbarHeight – $navbarHeight + 1
}, 850, ‘easeInOutExpo’);
//close submenu
$(this).parent().toggleClass(“x-active”);
}

else {
// open submenu
$(this).parent().toggleClass(“x-active”);
}
});

}

}

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

});
});

[Lely]

Hello Richard,

It seems that it is still factoring the space for sticky header.
Look for this part:

			if ($(window).width() <= 979) {
				
				// $(window).width() is not the same as the width used in the css media query
				// find a fix for this later !!!
				scrollSpyLinks.off('click touchstart touchend').on('click', function(e) {
					e.preventDefault();
					e.stopPropagation();
					var $LinkTarget = $(this).attr('href');
					$('html, body').stop().animate({
						scrollTop: $($LinkTarget).offset().top
					}, 850, 'easeInOutExpo');
				});

Try updating to this:

			if ($(window).width() <= 979) {
				
				// $(window).width() is not the same as the width used in the css media query
				// find a fix for this later !!!
				scrollSpyLinks.off('click touchstart touchend').on('click', function(e) {
					e.preventDefault();
					e.stopPropagation();
					var $LinkTarget = $(this).attr('href');
					$('html, body').stop().animate({
						scrollTop: $($LinkTarget).offset().top - $adminbarHeight - $navbarHeight + 1
					}, 850, 'easeInOutExpo');
				});

Hope this helps.

[RLav]

Lely,

on the 2 external pages the menu has links like <span>home</span> for example. They are not part of scrollSpyLinks, because they have the full path in the href (http://partnersinperspectief.nl/#home)

Only nabar links that have a href starting with a # are targetted ( $(‘.x-nav > li > a[href^=”#”] ), as well as the lnk on the logo ( a[href^=”#home”] ) and the link on the arrow ( .intro-btn-link ).

So clicking these links doen’t trigger the scroll functionality. Besides that, the suggested change in code is wrong because it will break the desired calculation for the onepage menu links.

My guess is that there is something happening upon loading the onepage page. The only thing I found that could be the cause is in x-body.js :

$(window).on(‘load’, function () {
$(‘[data-spy=”scroll”]’).each(function () {
var $spy = $(this)
$spy.scrollspy($spy.data())
})
})

But I can’t figure out how to interact with it ….

Richard

[Author]

Posts