Beaver Builder Wrap Column in Link Tag with jQuery
(function($){ | |
$(function() { | |
clickColumn(); | |
}); | |
/* | |
* Make a BeaverBuilder Column clickable. | |
* There must be a link tag in the column element. | |
* Add the CSS class .click-col in the Column Settins Advanced Tab CSS value | |
*/ | |
function clickColumn() { | |
$('.click-col').css('cursor', 'pointer'); | |
$('.click-col').on('click', function(event){ | |
$(this).find('a')[0].click(); | |
}); | |
$('.click-col a').on('click', function(event){ | |
event.stopPropagation(); | |
}); | |
} | |
})(jQuery); |
/* Equal Heights Across columns needs to be turned off. | |
So a height needs to be set, or padding needs to be used to get the height on the .link-col .fl-module-heading selector */ | |
.link-col .fl-col-content{ | |
padding: 0; | |
} | |
.link-col .fl-module-heading { | |
height: 145px; | |
display: flex; | |
flex-flow: row nowrap; | |
justify-content: center; | |
} | |
.link-col .fl-module-content { | |
align-self: center; | |
} |
jQuery(document).ready(function($) { | |
$('.link-col-1').each(function() { // Target a column class | |
var content_link = $(this).find('a').first().attr('href'); // Set a variable for the first link in the column | |
$('.link-col-1 .fl-module').wrap('<a href=" ' + content_link + ' " ></a>'); // Wrap a tag around the module content with the variable | |
}); | |
$('.link-col-2').each(function() { | |
var content_link = $(this).find('a').first().attr('href'); | |
$('.link-col-2 .fl-module').wrap('<a href=" ' + content_link + ' " ></a>'); | |
}); | |
$('.link-col-3').each(function() { | |
var content_link = $(this).find('a').first().attr('href'); | |
$('.link-col-3 .fl-module').wrap('<a href=" ' + content_link + ' " ></a>'); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment