[Happy CowParticipant]

hey guys!

url: happycowstudios.com

under the process section, you’ll find some tabbed content. each time you select one of the tabs, the page scrolls a little, until eventually, the whole section is off the page. not sure what is causing it. please advise.

thanks so much!

cheers!
shaun

[Kosher KMember]

Hi Shuan,

I noticed that you have some custom script on your site for scrolling behavior,

there are some script I see on your site that is affecting the tab_navs like this one

$('html,body').animate({ scrollTop: $('#' + hash ).offset().top - $('.x-navbar').height()},700 ,'swing');

or most likely the script from here,
view-source:https://happycowstudios.com/
from line 423 to line 476

Can please you advise where did you got those script so we can get an idea on whats happening.

Cheers

[Happy CowParticipant]

hey! thanks for the help. i got two scripts from you guys on another thread. one was to allow smooth scrolling from other pages on the site. the other was to allow smooth scrolling from a link other than a menu item.

both scripts were from this thread (one pn page one, the other on page two): http://theme.co/x/member/forums/topic/nav-bar-not-fully-working-on-1-page-scrolling/

here is a copy of what we have in the custom javascript:

jQuery(function($){

var window_base = window.location.href.split(“#”).slice(0)[0];
var window_hash = window.location.href.split(“#”).slice(-1)[0];
var outbound = /^https?:///i;

$(‘.x-nav a’).each(function(){ //Scan links and convert them to relative hash for one page navigation’s Active statuses to work properly when manually scrolling

var hash = $(this).attr(‘href’).split(“#”).slice(-1)[0];
var anchor_base = $(this).attr(‘href’).split(“#”).slice(0)[0];

if(hash) { //Does it have hash? then perform check
if(anchor_base == window_base) { //If same page, then no need to reload, just make it relative
$(this).attr(‘href’, ‘#’+hash);
} // Else, leave it that way. So when user clicked, it will just link them to outbound page
}

}).click(function(e){ //Enable Parent and Submenu scrolling

var hash = $(this).attr(‘href’).split(“#”).slice(-1)[0];

if(hash && !outbound.test( $(this).attr(‘href’) ) ) { //Does it have relative hash?

e.preventDefault(); //Disable jumping

$(‘html,body’).animate({ scrollTop: $(‘#’ + hash ).offset().top – $(‘.x-navbar’).height()},700 ,’swing’);

//Now add active status for automatic scrolling
$(‘.x-nav li’).removeClass(‘current-menu-item’);
$(this).parent().addClass(‘current-menu-item’);

}

});

$(document).ready(function(){ // Enable auto scroll when loaded.

$(‘.x-nav li’).removeClass(‘current-menu-item’);
//$(‘a:not([href*=”#”])’).parent().addClass(‘current-menu-item’); For experiment only

if(window_hash) {
$(‘a[href$=”#’+window_hash+'”]’).click(); //Click it, so it will use default click from one page navigation event and submenu event
}
})

});

jQuery(function($){
$(‘.scroll-link’).click(function(e){
e.preventDefault();

$(‘html,body’).animate({
scrollTop: $(‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] ).offset().top – $(‘.x-navbar’).height()
},700 ,’swing’);
});
});

[Happy CowParticipant]

no worries. i think we are going to remove the tabbed content section anyway. thanks!

[AlexanderKeymaster]

Ok, thanks for the update. If you need other help, feel free to get back in touch.

[Gregory WParticipant]

I need support with this. An example is on your own demo page:
http://theme.co/x/demo/integrity/1/shortcodes/tabbed-content/

I don’t want users having to scroll back up once they clicked a tabbed element (LEFT or RIGHT TABS).

[RadModerator]

Hi Gregory,

Thanks for posting in.

Add this code at your customizer’s custom javascript.

jQuery(function($){

$('.x-nav-tabs-item a').on('click', function(){

$('html,body').stop().animate({
      scrollTop: $( $(this).attr('href') ).offset().top - $('.x-navbar').height()
    },700 ,'swing');

});

});

Hope this helps.

[Tyler LParticipant]

Hey, I added the code into my Customizer’s JavaScript section and am still having the issue of the page moving up a little upon each click on the Left Tabbed Content.

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Tyler LParticipant]

This reply has been marked as private.

[RadModerator]

Hi Tyler,

In that case, we might need to turn it off completely.

Please change the code to this.

jQuery( function($) {

$(document).on('click', '.x-accordion-toggle, .x-nav-tabs .x-nav-tabs-item a', function( e ){
$('html, body').stop();
});

});

Hope this helps.

[Tyler LParticipant]

Perfect, thank you very much!

[ChristopherModerator]

You are welcome.

[snapadvParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s because you’re using different tab. The code above is only applicable for X’s tab.

You may need this one,

jQuery( function($) {

$('.vc_tta-tab a').on('click', function( e ){

setTimeout( function() { 
$('html, body').stop().stop();
console.log('scrolling stopped');
}, 100 );

});

});

Cheers!

[Author]

Posts