Last active
October 2, 2019 11:13
-
-
Save neilgee/89b7a769e707a77c0d42de0c957b5084 to your computer and use it in GitHub Desktop.
Beaver Builder Wrap Column in Link Tag with jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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