CMS Development

js18
Member

Stop scroll during a click event in Jquery - Vast Tabber

Below is my Vast Tabber Custom Module code.

Here is a link to the page I'm editing.

 

It is working perfectly, EXCEPT,  e.preventDefault(); is not working to prevent scroll. I don't want any scrolling. The page needs to remain still, with only the content changing. I've tried several other solutions, and while some do prevent the scroll, it also the correct info to populate with each respective click. Is there a confilct that prevents this from working in Hubspot? I would be grateful for anyone who would chime in with an idea!


<div class="tabber-wrap">
<ul class="clearfix tabber-tabs">
<li class="active"><a>{{ widget.tab_1 }}</a></li>
<li><a>{{ widget.tab_2 }}</a></li>
<li><a>{{ widget.tab_3 }}</a></li>
<li><a>{{ widget.tab_4 }}</a></li>
</ul>
<div class="tabber-content">
<div class="tab-pane active">{{ widget.tab_1_content }}</div>
<div class="tab-pane" id="tab-2">{{ widget.tab_2_content }}</div>
<div class="tab-pane" id="tab-3">{{ widget.tab_3_content }}</div>
<div class="tab-pane" id="tab-4">{{ widget.tab_4_content }}</div>
</div>
</div>

<script>

$(function(){

$(".tab-pane").not(".active").hide();

$('.tabber-content .tab-pane').each(function(i,el){

$(el).attr("id","tab-"+i);});

$(".tabber-tabs a").each(function(i,el){

$(el).attr("href","#tab-"+i);

var ID=$(el).attr("href");

$(this).click(function(e){

e.preventDefault();

if(!$(this).parent().hasClass("active")){

$(this).parent().addClass("active").siblings().removeClass("active");

$(ID).fadeIn().siblings().hide();}});});

});

</script>

0 Upvotes
2 Replies 2
TRooInbound
Key Advisor

Stop scroll during a click event in Jquery - Vast Tabber

Hi js18,

I've investigation on your problem and reach a solution of this problem,

 

problem with javascript conflict,

so now you have to find out this JS from your page and insert this in "Edit Head" the Tab Javascript code,

a link.PNG  After this "e.preventDefault(); " will working fine.

 

Hope this work!

Thanks

0 Upvotes
js18
Member

Stop scroll during a click event in Jquery - Vast Tabber

Thank you so much for your help on this. I appreciate your time so much!

For anyone who is looking for the same answer, here is the solution that worked.

You will need to replace this code:

$(el).attr("href","#tab-"+i);

with this:

$(el).attr("id","#tab-"+i);
$(el).attr("href","javascript&colon;void(0);");

0 Upvotes