Equal Div Height with JQuery

Last Updated: June 28, 2017 | Reading Time: < 1 minute

jQuery is a fast solution if you need support on your  HTML layout. Having an issue to keep your divs in an equal height? Check out this cool and easy script to keep your divs in an equal height: jQuery Match Height Plugin.

If you are on WordPress, you can try this simple line on ‘functions.php’ file:

function add_custom_script() {
	wp_enqueue_script( 'match-height', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );

Call the function on header or footer:

function inject_script() {
	echo <<< EOT
		<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('.map .column-4').matchHeight();
		});
		</script>
	EOT;
}
add_action('wp_footer', 'inject_script');

Or you can simply use a plugin to add the codes above.

 

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

    Any idea? Fill the comment below

    This site uses Akismet to reduce spam. Learn how your comment data is processed.