Last active
May 17, 2023 18:13
-
-
Save zackpyle/5bb764b356e5c30d75b6dd20a214dddf to your computer and use it in GitHub Desktop.
Set equal heights using 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
jQuery(document).ready(function($) { | |
$.fn.equalHeights = function() { | |
let max_height = 0; | |
$(this).each(function() { | |
max_height = Math.max($(this).height(), max_height); | |
}); | |
$(this).each(function() { | |
$(this).height(max_height); | |
}); | |
}; | |
// Equal Heights on All Screen Sizes | |
$(".fl-heading").equalHeights(); | |
// Recheck equal height on screen size change | |
$(window).resize(function() { | |
setTimeout(function() { | |
$(".fl-heading").css('height', 'auto'); | |
$(".fl-heading").equalHeights(); | |
}, 500); | |
}); | |
// Only Mobile - Useful when things are stacked so equal heights don't matter anymore | |
if ($(window).width() > 768) { | |
const ppInfoboxDescriptions = $(".pp-infobox-description"); | |
ppInfoboxDescriptions.equalHeights(); | |
$(window).resize(function() { | |
setTimeout(function() { | |
ppInfoboxDescriptions.css('height', 'auto'); | |
ppInfoboxDescriptions.equalHeights(); | |
}, 500); | |
}); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment