resize genesis footer widgets to equal sizes

[matt101]

Hello 🙂 I found the following code on Resize footer widgets height - so that they are the same . It is to resize the footer widgets so that they are set dynamically to the same size. It doesn't seem to work.

Please can someone recommend what needs to be changed? I'm learning how to use Jquery right now.

Here is the code - JS:

'use strict';
// Get current browser width
var browserWidth = jQuery(window).width();
 
// Responsive: Get Width
jQuery(window).resize(function() {
	browserWidth = jQuery(this).width();
	
	// Set size of footer-widgets-*
	selectorSizing( browserWidth );
});
 
/*
 * Resizes the selector to the designated size
 *
 * @param int    size     Browser Size to do nothing
 * @param string selector Selector, defaults to '#footer-widgets .widget-area'
 */
function selectorSizing( size, selector ) {
	'use strict'; 
	var heights = [];
	
	// selector as optional argument
	if ( !selector)
		var selector = '#footer-widgets .widget-area';
	
	// size is required
	if ( !size)
		return false;
	
	// Responsive Code
	// Widgets move to 100% width if width of the browser window is < 960px
	// Done via @media only screen and (max-width: 960px) { } in style.css
	if( 960 < size ) {
		jQuery(selector).each( function( index, value ) {
			heights[index] = jQuery(this).height();
		});
 
		// Set max height
		var max = Math.max.apply( Math, heights );
 
		// Assign max height to the footer-widgets
		jQuery(selector).each( function( index, value ) {
			jQuery(this).height(max);
		});
	}
	else {
		// Remove max height to the footer-widgets
		jQuery(selector).each( function( index, value ) {
			jQuery(this).height('auto');
		});
	}
}
 
selectorSizing( browserWidth );

PHP:

add_action( 'wp_enqueue_scripts', 'wps_enqueue_refooterwidgets' , 15 );
/*
 * Enqueue reFooterWidgets to the footer
 * 
 */
function wps_enqueue_refooterwidgets() {
	wp_enqueue_script( 'wps-footer-widgets-height' , get_stylesheet_directory() . '/js/footer-widgets-height.js' , NULL , '1.0.0' , true );
}

http://dynamically-resize-footer-widgets

[Christoph]

Hi,

since I cannot see the website or know what theme you are using, make sure you target the right css selectors for the footer widgets.
The selectors are defined in this line of the js:
var selector = '#footer-widgets .widget-area';

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[matt101]

Hi Christoph,

Thank-you for the support. I seem to be struggling with this still.

I have created a JS fiddle https://jsfiddle.net/d4q05to6/8/ . I have found this tutorial http://wpsmith.net/2012/genesis/resize-genesis-footer-widgets-to-equal-sizes/ . I just can't seem to make it work with my code.

Any tips would be hugely appreciated. Thank-you.

[Author]

Posts