Collapsing Funnel When Using Jquery

[kenc138]

Hello,

I created 3 funnels on my homepage with 3 IDs.

I used the following jquery to wrap them in anchor tags:

jQuery(document).ready(function($) {
$(’#web-service-funnel-1,#web-service-funnel-2,#web-service-funnel-3’).hover(function(){
$(this).wrap(“anchor tag here”);
});
});

When I hover, all 3 div live the padding between them and behave like marginless columns. I’ve checked the console and there are no JS errors.

Any idea why that is happening?

[thai]

Hi There,

Could you please update your custom JS to this:

jQuery(document).ready(function($) {
	$('#web-service-funnel-1, #web-service-funnel-2, #web-service-funnel-3').hover(function(){
		if(!$(this).hasClass('active')){
			$(this).wrap("anchor tag here");
		}
		$(this).addClass('active');
	});
});

Let us know how it goes!

[ruenel]

Hello There,

I am not sure what you want to do with the code. So far it is already working perfectly.
You have this:

jQuery("#web-service-funnel-1,#web-service-funnel-2,#web-service-funnel-3").wrap("<a href='#'></a>");

All it does is to wrap the columns with an anchor tag that goes nowhere. Could you please clarify further what you want to do with it?

Thanks.

[kenc138]

Hi,

I achieved the fix by adding margin-right: 4% on the first and second divs. I’m not sure why .wrap() caused the to collapse, but them margin CSS seemed to fix the issue.

Thanks RueNel

[rad]

Glad it works now, maybe the wrapper increased its width. Cheers!