Vertical tabs - page shifting

Design help General
1

I’m trying to work out how to stop the page from “sifting” when changing tabs on https://0578-1ca39b7666c19.webflow.io/test

It’s more obvious on the second set of vertical tabs.
See Imgur: The magic of the Internet

Any assistance would be greatly appreciated!

Chris.

Here is my site Read-Only: https://preview.webflow.com/preview/0578-1ca39b7666c19?utm_medium=preview_link&utm_source=designer&utm_content=0578-1ca39b7666c19&preview=3c92ced7ef7dd573517007f5f4a51ea0&pageId=5f6ca6d99743ac7a741f5d4c&mode=preview**[LINK][1]**
(how to share your site Read-Only link)

2

Hi @chris.s, it seems that this happens when you select a tab lower than the one currently selected, e.g. clicking Tab 3 if Tab 2 is selected. It shifts down because when you click on the new tab, the tab title e.g. “Tab3” will stay where the cursor is, and because the other tab’s text now hides, the page will shift downwards to ensure the selected tab stays in place.

If you want to avoid the page actually shifting, it’s best if we just add some small custom code to essentially move the page up by the same amount of height as the current open tab’s text so that to the user the page remains still. Might sound a bit complicated but if you’re able to give me a version I can clone that would be great and I can test it out for you.

Thanks,
Andrew

3

Hi @chris.s, I sent you an email separately about this but leaving the feedback here in case anyone else runs into this issue.

It seems to be a couple things - I changed the Tabs element to be aligned to the top (so the height of the tabs within will always stick to the top rather than float in the middle)

Screenshot 2020-09-29 at 17.25.29

Then, give the “Tabs Menu” element have a top position of 180px (so that it moves down 180px).

Finally, add this custom code to the tag:

<script>
$('.w-tab-link').click(function(){
    var oldTab = $(this).parent().find('.w--current').index(); //position of old tab
    var newTab = $(this).index(); //position of new tab
    if(newTab > oldTab) { // only keep position in place if you select a tab lower than the previous
        $(this).parent().find('.w--current').find('.tabs-info-text').each(function(){
            var y = $(window).scrollTop();  //your current y position on the page
            $(window).scrollTop(y+$(this).height()+11);
        });
    }
});
</script>

You can see a working example here: https://0578-1ca39b7666c19-0e846593dfa1dcdc5adf.webflow.io/test

1 Like
4

Amazing, thank Andrew. Your solution works perfectly!

Thank you too for the update you emailed to target the script at Chrome only. For other reference here is the final version:

<script>
  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if(isChrome) {
    $('.w-tab-link').click(function(){
      var oldTab = $(this).parent().find('.w--current').index(); //position of old tab
      var newTab = $(this).index(); //position of new tab
      if(newTab > oldTab) { // only keep position in place if you select a tab lower than the previous
        var y = $(window).scrollTop();  //your current y position on the page
        $(window).scrollTop(y+$(this).parent().find('.w--current').find('.tabs-info-text').height()+11);
      }
    });
  }
</script>