topic Re: HubSpot Tabber not working in CMS Development

HubSpot Tabber not working

KarenBP — Wed, 05 May 2021 17:42:52 GMT

I downloaded the HubSpot Tabber from the marketplace.

We're going to use it for a podcast for our clients.

It works when I try it on the HubSpot Preview and Editor, but when I open a new tab or the live page, it won't work and it won't stop scrolling to the top whenever I click on the second tab.

I think this might be a problem with JS, I just started learning, so I don't know how to catch it quickly. Client needs it for this week, so any help is deeply appreciated. Thanks in advance for your time.

Live page example here:

https://www.cmtc.com/shiftinggears

[----------- Module HTML -----------]

<div class="hs-tabs">
<ul class="hs-tabs__nav">
{% for item in module.tab -%}
<li><a href="#tab-{{ loop.index }}" class="hs-tabs__navitem{% if loop.index == 1 %} hs-tabs__navitem--active{% endif %}">{% inline_text field="tab_label" value="{{ item.tab_label }}" %}</a></li>
{%- endfor %}
</ul>
{% for item in module.tab %}
<div id="tab-{{ loop.index }}" class="hs-tabs__item{% if loop.index == 1 %} hs-tabs__item--active{% endif %}">{% inline_rich_text field="content" value="{{ item.content }}" %}</div>
{% endfor %}
</div>

{% require_css %}
<style>
.hs-tabs__navitem:not(.hs-tabs__navitem--active) {
background-color: {{ module.tab_bg_color.color }};
color: {{ module.tab_text_color.color }};
}
</style>
{% end_require_css %}

[-------- Module CSS----------]

.hs-tabs__item{
display: none;
padding: 20px;
border: 1px solid #efefef;
}
.hs-tabs__item--active{
display: block;
}
.hs-tabs__item img{
/* Protect images from overflowing the tab */
max-width: 100%;
height: auto;
}
.hs-tabs__nav{
list-style: none;
margin: 0;
padding: 0;
margin-bottom: -1px;
}
.hs-tabs__nav li{
display: inline-block;
}
.hs-tabs__navitem{
text-decoration: none;
display: block;
padding: 20px;
border: 1px solid #efefef;
border-bottom: none;
}
.hs-tabs__navitem--active{
color: #000;
background: #fff;
}
/* fix for hubspot injected div */
.hs-tabs__navitem *{
pointer-events: none;
}

[------------- Module JS-------------]

var tabbers = document.querySelectorAll('.hs-tabs');
for(var i = tabbers.length; i--;){
tabs(tabbers[i]);
}

Re: HubSpot Tabber not working

Kevin-C — Thu, 06 May 2021 16:47:11 GMT

Hey @KarenBP

Looks like you're smooth scrolling function in the Global.js file is causing this issue.

In the screen shot below you can see that the function is targeting all anchor tags that have an href containing a "#":

To test that this was the issue I added the ID "responsive-menu-button" which as you can see excludes it from the smooth scrolling function.

The fastest solution might be to add the "hs-tabs__navitem" class to the smoothscroll function's exclusion list. The ".not" function:

// smooth scrolling if ($('.horizontal-tab-wrapper').length === 0 || $('.hs-content-path-growth-pipeline-assessment').length === 0) { $('a[href*="#"]').not('#responsive-menu-button, .hs-tabs__navitem').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); console.log(target) if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }

FYI: I was not able to test this.

Hope this gets you moving!

Re: HubSpot Tabber not working

KarenBP — Thu, 06 May 2021 23:37:05 GMT

Hey @Kevin-C this worked!

Thank you so much for your clarification and very quick response.

The screenshot and js code were super helpful. ⭐

Re: HubSpot Tabber not working

simonp — Wed, 07 Jul 2021 13:10:45 GMT

SimilAar problem - just trying to find the global.js file or what file gets added to the compiled js file

Re: HubSpot Tabber not working

simonp — Wed, 07 Jul 2021 13:12:04 GMT

Hello Karen - got a similar problem - struggling to locate the relevant js file

Re: HubSpot Tabber not working

Kevin-C — Wed, 07 Jul 2021 13:53:07 GMT

Hey @simonp

If you could post a link i'm sure we can help ya dig it up!

Re: HubSpot Tabber not working

simonp — Wed, 07 Jul 2021 13:56:48 GMT

Preview Page - https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs_preview=fsKIfGbo-50328930343

Page based on giant template

Re: HubSpot Tabber not working

simonp — Wed, 07 Jul 2021 13:58:45 GMT

Preview Page - https://www.vistair.com/-temporary-slug-7d7aeaff-e950-441d-87be-ee4521b49610?hs_preview=fsKIfGbo-503...

Page based on giant template

Re: HubSpot Tabber not working

Kevin-C — Wed, 07 Jul 2021 14:53:25 GMT

@simonp So you're function is located in the main.js

Re: HubSpot Tabber not working

simonp — Wed, 07 Jul 2021 15:28:08 GMT

Thanks Kevin i dont seem to see main.js in the html inspector altough as i look with hubspot design i can see main.js with the theme folder

THIS LOOKS SUSPICIOUSLY LIKE SMOOTH SCROLLING SCRIPT i try and add this to a cloneed version of the script