Hello. I updated my PRO theme today to 2.1.6.
Unfortunately, there seem to be several issues which have suddenly appeared:
None of these were issues before my update. Could you please advise?
Also, another issue I’ve noticed. There is now a small gap between the angled section dividers and the sections themselves. This was previously solved with some custom CSS I was given on the forum but it looks like it’s not working anymore.
Ok, I’ve managed to more or less fix the one page navigation using the big chunk of code here. Why it’s necessary to add this to get one page navigation working when it worked perfectly well out of the box without any code before the update I’m not sure. It’s pretty unsatisfying but at least it broadly works (though it’s still a bit glitchy).
I’ve also fixed the issue with the gaps between sections and section dividers, by adding !important to the code I was previously using successfully before the update from here.
I’ve found a workaround for the iframe. So the last remaining problem is the scroll bottom anchor not working. Please help. Also, a new issue has emerged which is the navigation dropdown not automatically closing after clicking on a link in the one page navigation. This was previously solved using code from here but, again after the update, this is no longer working. Please advise.
As an aside, I’m really disappointed that this update has caused so many bugs which have taken hours for me to unexpectedly have to address when things were working perfectly before. Simple things like one page navigation and scroll anchor which were previously out of the box functionality now require lots of custom code to fix. That doesn’t make sense.
Hi @dsmillie
I understand your point, I’m sorry for all these troubles you had to go through.
For the “Scroll bottom anchor” issue, it has been logged already in our issues tracker and I can see it’s scheduled for the next cycle release, however, I don’t have an ETA for that update yet.
For the “All in one navigation” issue, it’s also logged in the tracker, and I can see you have applied the temporary fix.
Regarding the feature request you asked for, I’ve added this JS snippet into (Theme Options > JS):
jQuery(document).ready(function($){
$('.x-menu.x-menu-dropdown .x-anchor').on("click touchend", function(event) {
if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
$('.x-anchor-toggle').click();
}
});
});
and I can see it’s working fine, the drop down menu disappears right after clicking on any link.
As this is considered as a custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.
Thanks.
@Alaa I appreciate your help - thank you for adding that code to the customiser. I would argue it should be an automatic feature of the navigation dropdown i.e. to close itself once a link has been clicked. That would then work whether the link was on the same page (one page navigation) or a different page, so it seems a better default behaviour. Can that be added as a feature request?
In terms of the scroll bottom anchor, is there any workaround code you can suggest to overcome the issue while we wait for the next release?
Thanks.
Hi dsmillie,
I am not sure if I understood correctly, by scroll bottom you mean this one?
If yes then it is working ok for me and you need to clear your browser cache and go to Pro > Settings > Clear Style Cache and click on that button.
Thank you.
That’s because I adapted this code which I found elsewhere on the forum:
jQuery(document).ready(function($) {
$('.x-slider-scroll-bottom').off('click');
$('.x-slider-scroll-bottom').click(function(e) {
e.preventDefault();
var $mastheadHeight = $('.x-masthead > .x-bar').outerHeight();
var $curContentBand = $('.x-main');
$('html, body').animate({
scrollTop: $curContentBand.next().offset().top
}, 850, 'xEaseInOutExpo');
});
});
However, it’s not working on mobile. Do you know how I can adapt it to work there?
Hello There,
Keep in mind that there are no click events in smaller screen devices. You will have to modify your code:
$('.x-slider-scroll-bottom').click(function(e) {
and replace this line with this instead:
$('.x-slider-scroll-bottom').on('click touchstart',function(e) {
We would loved to know if this has work for you. Thank you.
Thank you, works perfectly.
One last thing, the code provide by @Alaa above to close the dropdown menu after a link has been clicked:
jQuery(document).ready(function($){
$('.x-menu.x-menu-dropdown .x-anchor').on("click touchend", function(event) {
if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
$('.x-anchor-toggle').click();
}
});
});
doesn’t work on mobile. Looking at your comment above, it’s already got “click touchend” rather than just “click” so how else can I adjust this to work on mobile?
Hey @dsmillie,
You don’t need that code anymore in the latest version of Pro because that should be the built-in behavior since Pro 2.1.0
See https://youtu.be/gf6O-PTZS9Y
Would you mind removing the code?
Thanks.
Hi @christian_y,
Thank you for your response. If I remove all of my custom JS then indeed the modal does close itself. However, then my one-page navigation doesn’t work.
If I just remove the JS above then the modal doesn’t close but at least my one page navigation still works. So I know the issue must lie in the JS that enables one page navigation to hit the right links. That’s below (adapted from elsewhere on the forum - see above) - please help me identify how to adapt that to retain the modal closing behaviour but ensure the one page navigation works:
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-navbar').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);
return false;
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').off('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;
}
/* Instant, exact jumps */
$('html, body').scrollTop( $el.offset().top );
/* Smoother scrolling but glitchy */
/* animateOffset($el, 850, 'xEaseInOutExpo');
if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
$('.x-btn-navbar').click();
}*/
return false;
if($('.x-anchor.x-anchor-toggle').hasClass('x-active') && $('.x-menu.x-menu-dropdown.x-dropdown').hasClass('x-active')) {
$('.x-anchor.x-anchor-toggle').click();
}
}
}
});
});
I’ve already tried taking out the last few lines referring to .x-anchor.x-anchor-toggle but it makes no difference.
Hello There,
Thanks for updating in. Please clear your plugin cache first since you have installed W3 Total Cache. At the moment, this is the JS code loaded in the page:
/* FOR INTERACTIVE TABS FOR FEEDBACK FROM CLIENTS */
(function($){
$('#tabsection .x-container').on('click', '.x-column', function(){
var textshow = $(this).index('#tabsection .x-column');
$('#textsection .x-container').addClass('hidden');
$('#textsection .x-container').eq(textshow).removeClass('hidden');
});
})(jQuery);
/* FOR MENU TO HIDE ON SCROLLING UNTIL SCROLL UP */
jQuery(function($) {
/* Hide header on scroll down */
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var header = $(".hide-scroll-bar.x-bar");
var navbarHeight = header.outerHeight();
var $menuitem = $('.x-anchor.x-anchor-toggle');
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
/* Make sure they scroll more than delta */
if(Math.abs(lastScrollTop - st) <= delta)
return;
/* If they scrolled down and are past the navbar, add class .nav-up.*/
/* This is necessary so you never see what is "behind" the navbar.*/
if (st > lastScrollTop && st > navbarHeight){
/* Scroll Down */
header.removeClass('nav-down').addClass('nav-up');
menuitem.removeClass('x-active')
} else {
/* Scroll Up */
if(st + $(window).height() < $(document).height()) {
header.removeClass('nav-up').addClass('nav-down');
menuitem.removeClass('x-active')
}
}
lastScrollTop = st;
}
});
/* FIXING ONE PAGE NAVIGATION */
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-navbar').outerHeight();
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
var $menuitem = $('.x-anchor.x-anchor-toggle');
$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);
return false;
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').off('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;
}
/* Instant, exact jumps */
$('html, body').scrollTop( $el.offset().top );
return false;
}
}
});
});
/* TO MAKE THE MENU DROPDOWN CLOSE AUTOMATICALLY AFTER CLICKING SAME PAGE LINK */
jQuery(document).ready(function($){
$('.x-menu.x-menu-dropdown .x-anchor').on("click touchend", function(event) {
if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
$('.x-anchor-toggle').click();
}
});
});
/* FIXING THE SCROLL BOTTOM ANCHOR */
jQuery(document).ready(function($) {
$('.x-slider-scroll-bottom').off('click');
$('.x-slider-scroll-bottom').on('click touchstart',function(e) {
e.preventDefault();
var $mastheadHeight = $('.x-masthead > .x-bar').outerHeight();
var $curContentBand = $('.x-main');
$('html, body').animate({
scrollTop: $('#home-anchor').offset().top
}, 850, 'xEaseInOutExpo');
});
});
If you already remove the blocks that is no longer need, then there must be an error in the JS code.
@RueNel, no offence but that’s not helpful.
What I want is simple:
All three of these things were working perfectly before your most recent update. All of them broke at that point and I’ve now spent hours trying to fix what should be standard in-built behaviour that just works (the reason I chose this theme). I’ve now spent ages back on forth on this thread to now end up with replies such as “there must be an error in the JS code”.
Let me repeat, once I removed ALL custom JS code, the one page navigation doesn’t work although the menu drop-down does close. So there is still an issue with your theme!! The JS code I’ve put in which stops the dropdown working is the one which I found on this forum which at least fixes the one page navigation. Please can you help me fix BOTH the one page navigation and menu dropdown closing, on both desktop and mobile?? I’m not asking for any custom development or advanced features, just some basic functionality that should work out of the box (and was working before your update).
(And any changes I make, I always flush the cache.)
Hello There,
Can we have the permission to turn on the under construction mode, test for a plugin conflict and remove the JS code first so that we can investigate why your One Page navigation and other issues does not work in the latest update?
Kindly let us know.
Hi @RueNel,
Yes, please go ahead and do this - I’ve backed up the custom code.
(Bear in mind the one page navigation should be scrolling to the exact top of the section, as it currently is. Without the custom code, it is offset and also glitchy i.e sometimes you need to click twice to get to the right section.)
Many thanks.
Hi there,
I deactivated the optimization plugin and temporarily disabled the custom codes and it works. It scrolls in correct position, it only creates an illusion that it doesn’t because your header is transparent.
One page navigation includes the height of the header when it scrolls, so the scroll position is right under the edge of the header.
Try setting your header bar height to zero while the custom codes and optimization plugins aren’t there. I just tried it and it works.
Thanks!
Ok, thank you @Rad, I see what you are saying regarding my transparent header. Is there anyway I can simply adjust for the navbar height in the navigation without breaking anything else?
Edit: Actually never mind, I’ve inadvertently stumbled upon the solution: I’ve discovered if I turn off the sticky setting in the header builder while retaining a class I already had which keeps the position of the header fixed then it gives me the exact behaviour I wanted.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.