who can I make the 3 widgets same size always?

[lindebjerg]

Hi there,
I work on this site: http://chirurg.lindebjerg.de/
On the homepage widget areas: middle- left, middle, right I have 3 text-widgets.

How can I make these 3 widget areas to appear with the same height always.
The content on the homepage will not change much, but I will have more languages later on.
So setting a fix height will not be the best solution, but a solution where the biggest widget makes the height for all 3 widget areas, if possible?

Best regards,
Jesper

[Chinmoy Paul]

You can try

http://brm.io/jquery-match-height/

OR

http://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery

[lindebjerg]

hi Paul,
I still need some help;

I have loaded the file jquery.matchHeight.js into the folder js in sunshine-pro
I wrote this into functions.php:

// Load and initialize matchHeight jQuery
wp_enqueue_script( 'match-height', get_stylesheet_directory_uri() . '/js/jquery.matchHeight.js', array( 'jquery' ), CHILD_THEME_VERSION, true );

but I don’t know how to use this?

Best regards,
Jesper

[Davinder Singh Kanith]

This is advance customization. You can refer following resources:

gist.github.com/wpsmith/3383785

sridharkatakam.com/equal-height-elements-wordpress-using-jquery-equalheights/

[lindebjerg]

Thank you Davinder,
“you must know where to find the answers;-)”

Your link to sridharkatakam.com made it possible for me to understand.

Here’s how I did it, if someone else need “Equal height” in sunshine-pro:

Upload jquery.equalheights.min.js to child theme directory/js.
Create a file named say, equalheights-init.js in the same location as above having this code:

jQuery(document).ready(function($) {

	$(window).load(function() {
		if (window.innerWidth > 1024) {
			$('.home-middle .widget-area').equalHeights();
		}
	});

	$(window).resize(function(){
		if (window.innerWidth > 1024) {
			$('.home-middle .widget-area').height('auto');
			$('.home-middle .widget-area').equalHeights();
		}
	});

});

Add this in functions.php:

//* Enqueue scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {

	if ( is_home() ) {

		wp_enqueue_script( 'equalheights', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.equalheights.min.js', array( 'jquery' ), '', true );
		wp_enqueue_script( 'equalheights-init',  get_stylesheet_directory_uri() . '/js/equalheights-init.js', array( 'equalheights' ), '1.0.0', true );

	}

}

Best Regards,
Jesper

[Author]

Posts