[John SParticipant]

Hi,

I added both tab navs and accordions to different areas on a webpage to try them out for content options.

I set everything up properly.

When I test them as a user on the actual website, the page jumps or auto scrolls up or down when the items are clicked on.
This does not seem like natural behavior as it will scroll the information in the tabs and accordion out of sight.

Needless to say, I would like the title area of the accordion to remain still and just the contents within the accordion to drop down. No movement (other than the drop down and change of tab item) when the user clicks on a tab nav or accordion.

Any ideas?

[ChristopherModerator]

Hi there,

Please add the following code under Customize -> Custom -> Java Script :

jQuery(document).ready(function($) {
   $('.x-accordion-toggle').click(function() {
      var $adminbarHeight = $('#wpadminbar').outerHeight();
      var $navbarHeight   = $('.x-navbar').outerHeight();
      var $this = $(this);

      setTimeout(function() {
         $('html, body').animate({ 
            scrollTop: $this.offset().top - $adminbarHeight - $navbarHeight + 1
         }, 400)
      }, 300)
   });
});

To fix tabs add this as well :

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 it helps.

[NCPMRParticipant]

Hello. Sorry to bear some bad news, I just pasted these in and I’m still having issues 🙁

https://drive.google.com/file/d/0B_RjEO4O9yNMZXhUaXF6QVU4YzQ/view?usp=sharing – I’ll try to keep this up here for a while.

http://alvein.com/expect/

[ChristopherModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[microartsParticipant]

Hi, same thing happens to me with the tab nav. if you click on the tabs on the page below, it just keeps scrolling down about 50px or so

http://development.bynaturepetfoods.com/by-nature-dog-food/grain-free-dry-dog/ocean-whitefish-green-peas/

[NCPMRParticipant]

This reply has been marked as private.

[microartsParticipant]

any update on this?

[RadModerator]

Hi NCPMR,

I tried this code and it makes the the scrolling stop.

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

Or do you wish the scrolling still enabled?

@microarts, could you try this code too?

Thanks guys!

[microartsParticipant]

yes, that works for me! thanks 🙂

[RubinKeymaster]

You’re welcome!

[NCPMRParticipant]

Yep thats great! Thanks, +1 for X Support 🙂

[RadModerator]

You’re soo much welcome! 😉

[kaczorroParticipant]

Helped me as well, thanks support team!

[ChristopherModerator]

You’re welcome.

[Ulrich MParticipant]

Hi there,

unfortunately this fix doesn’t work for me. I’m using three tabs in a tab navigation and it’s still jumping back to the top, like a #top.

I’m already using another fix for the tab navigation combined with sliders from this thread https://theme.co/x/member/forums/topic/issue-with-image-slider-in-a-2-column-tabbed-setup/#post-227114

I tried to combine the JS code but also just used this solution alone.

What else could be wrong?

[Author]

Posts