Setting min-height of main content window using jQuery

Hi Ismael,

Thank you for your reply.
When using your code, my socket becomes even bigger. That’s because you are setting the height of the socket, while the idea is to set the heigt of the main window. I think it should be something like this:

add_filter('wp_footer', 'avf_socket_height', 10);
function avf_socket_height() { ?>
<script>
(function($){
    $(window).load(function(){
		var headerh = $("#header").height(),
			footerh = $("#footer").height(),
			windowh = $(window).height(),
			socketh = $("#socket").height(),
			mainh = windowsh - footerh - headerh - socketh;
			
			$('#top .main_color.container_wrap.fullsize').css("height", mainh + 'px')
	});
	
})(jQuery);
</script>
<?php
}

This code however has no effect. I’ve also tried to set the height manually to for example 1000 px (.css(“height”, 1000 + ‘px’) ) just to check if there is any change. But this is also not working. When setting the same CSS identifier and selector to 1000 px in the Child theme’s style.css it is working correct. So there is still something wrong with the way i am trying to set the height from the jQuery script.

Hi Ismael,

Getting closer… :-)
With your help I’ve been able to make some changes to the script because:
– I’m using a 250px height layerslider on one of my pages.
– I don’t only want this to work on page load, but also on window resize

My current code:

add_filter('wp_footer', 'avf_socket_height', 10);
function avf_socket_height() { ?>
<script>
(function($){
   	 $(window).load(function(){
		var headerh = $("#header").height(),
		footerh = $("#footer").height(),
		windowh = $(window).height(),
		socketh = $("#socket").height(),
		wpadminbarh = $("#wpadminbar").height(),
		layersliderh = $("#layer_slider_1").height(),
		afterlayersliderh = $("#after_layer_slider_1").height();
		
		if ($("#layer_slider_1").length > 0) { 
			mainh = (windowh - footerh - headerh - socketh - wpadminbarh - 250 - 1) / 2;
			$('#top .main_color.container_wrap.fullsize').css("height", mainh + 'px');
			$('#layer_slider_1').css("height", 250 + 'px');
		}
		else {
			mainh = windowh - footerh - headerh - socketh - wpadminbarh;
			$('#top .main_color.container_wrap.fullsize').css("height", mainh + 'px');
		}
	});
	$(window).resize(function(){
		var headerh = $("#header").height(),
		footerh = $("#footer").height(),
		windowh = $(window).height(),
		socketh = $("#socket").height(),
		wpadminbarh = $("#wpadminbar").height(),
		layersliderh = $("#layer_slider_1").height(),
		afterlayersliderh = $("#after_layer_slider_1").height();
		
		if ($("#layer_slider_1").length > 0) { 
			mainh = (windowh - footerh - headerh - socketh - wpadminbarh - 250 - 1) / 2;
			$('#top .main_color.container_wrap.fullsize').css("height", mainh + 'px');
			$('#layer_slider_1').css("height", 250 + 'px');
		}
		else {
			mainh = windowh - footerh - headerh - socketh - wpadminbarh;
			$('#top .main_color.container_wrap.fullsize').css("height", mainh + 'px');
		}
	});
})(jQuery);
</script>

<?php
}

As you can see it was quite the puzzle to figure this out when using layerslider. Layerslider adds two extra DIVs (so 3 in total) to the main part of the page: layer_slider_1 and after_layer_slider_1. When only setting the height of “#top .main_color.container_wrap.fullsize”, this height is applied to all the 3 div’s and then the main part becomes 3 times the height I need it to be. In order to work around this problem, I’ve set the height of the layer_slider_1 div manually (although you specifiy the size in the layerslider pluging, it’s not applied by default), and divided the remaining part by 2 so “#top .main_color.container_wrap.fullsize” and “after_layer_slider_1” are equal.

Although this seems to be working for the moment, this doesn’t seem a nice and futureproof solution. Any idea’s on howto improve this code further?

• This reply was modified 9 years, 9 months ago by dennisbaaten.

After upgrading to WordPress 5.6 this solution stopped working. I’ve run a quick test, and it seems that the code within the function “avf_socket_height” is not executed at all.
Any suggestions?