Forum Replies Created
-
Posts
-
I’ve been messing around with this piece of code, and made some improvements. Notice that I’m not using LayerSlider as I did before, so I removed this part of the height calculation.
add_action('wp_footer', 'avf_socket_height', 10); function avf_socket_height() { ?> <script> ( function($) { $(window).load(function() { var headerh = $("#header_main").height(); var windowh = $(window).height(); var socketh = $("#socket").height(); if ($("#wpadminbar").length > 0) { var wpadminbarh = $("#wpadminbar").height(); } else { var wpadminbarh = 0; } var mainh = windowh - headerh - socketh - wpadminbarh; $('#main .main_color').css("height", mainh + 'px'); }); $(window).resize(function() { var headerh = $("#header_main").height(); var windowh = $(window).height(); var socketh = $("#socket").height(); if ($("#wpadminbar").length > 0) { var wpadminbarh = $("#wpadminbar").height(); } else { var wpadminbarh = 0; } var mainh = windowh - headerh - socketh - wpadminbarh; $('#main .main_color').css("height", mainh + 'px'); }); } )(jQuery); </script> <?php }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?Hi Vinnie,
I just tried this, but it seems that the iconbox.php file in the child theme directory (/wp-content/themes/enfold-child/config-templatebuilder/avia-shortcodes/iconbox.php) is not overriding the parent file. Any suggestions?
Can this also be done by using the child theme? Without making adjustments to the original enfold theme files.
Problem solved. There actually was no problem. The transitions only apply to the slider backgrounds, and don’t apply to the slide layer objects. Because I’m using a transparent background, I didn’t notice the backgrounds were actually transitioning as configured.
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 resizeMy 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?
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.
