-
Posts
-
Hi,
I made some CSS edits in a child theme, to shift the content over the menu bar and make the menu bar transparent. So the
#main-element has a negative margin of the height of the header (-66px). That works fine, except for the homepage where I have a 100% browser height section. Now there is a gap of 66px at the underside of the page. I found out the window height is calculated in theshortcodes.js-file:wh100 = win.height(),I want to overwrite this with:
wh100 = win.height() + 66,so the gap is added to the calculation. How can I do this without breaking the updates? I could enqueue a new js-file in my child theme and dequeue the main file, but then I would have to replace the
shorcodes.jsat every update. Is there a simpler method to overwrite this value (or an alternative to achieve the same effect)?Hey Bas!
Please copy the block of jQuery and place it in the below code. The code below can now be added in your child theme function.php that way it won’t break any update :)
// Remove subject value function custom_excerpt(){ ?> <script> // custom jQuery here </script> <?php } add_action('wp_footer', 'custom_excerpt');Best regards,
VinayI think you mean
wp_headinstead ofwp_header. But simply copying and editing the function from theshortcodes.jsis not overwriting the function. I am not experienced in JS or jQuery, so am I doing it right?functions.phpfunction fix_full_height_gap(){ ?> <script> // ------------------------------------------------------------------------------------------- // Section Height Helper // ------------------------------------------------------------------------------------------- $.fn.avia_browser_height = function() { if(!this.length) return; var win = $(window), html_el = $('html'), subtract = $('#wpadminbar, #header.av_header_top:not(.html_header_transparency #header), #main>.title_container'), css_block = $("<style type='text/css' id='av-browser-height'></style>").appendTo('head:first'), sidebar_menu= $('.html_header_sidebar #top #header_main'), full_slider = $('.html_header_sidebar .avia-fullscreen-slider.avia-builder-el-0.avia-builder-el-no-sibling').addClass('av-solo-full'), calc_height = function() { var css = "", wh100 = win.height() + 66, ww100 = win.width(), wh100_mod = wh100, whCover = (wh100 / 9) * 16, wwCover = (ww100 / 16) * 9, wh75 = Math.round( wh100 * 0.75 ), wh50 = Math.round( wh100 * 0.5 ), wh25 = Math.round( wh100 * 0.25 ), solo = 0; if(sidebar_menu.length) solo = sidebar_menu.height(); subtract.each(function(){ wh100_mod -= this.offsetHeight - 1; }); var whCoverMod = (wh100_mod / 9) * 16; //fade in of section content with minimum height once the height has been calculated css += ".avia-section.av-minimum-height .container{opacity: 1; }\n"; //various section heights (100-25% as well as 100% - header/adminbar in case its the first builder element) css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container{height:"+wh100+"px;}\n"; css += ".av-minimum-height-75 .container {height:"+wh75+"px;}\n"; css += ".av-minimum-height-50 .container {height:"+wh50+"px;}\n"; css += ".av-minimum-height-25 .container {height:"+wh25+"px;}\n"; css += ".avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow{height:"+wh100_mod+"px;}\n"; css += "#top .av-solo-full .avia-slideshow {min-height:"+solo+"px;}\n"; //fullscreen video calculations if(ww100/wh100 < 16/9) { css += "#top .av-element-cover iframe, #top .av-element-cover embed, #top .av-element-cover object, #top .av-element-cover video{width:"+whCover+"px; left: -"+(whCover - ww100)/2+"px;}\n"; } else { css += "#top .av-element-cover iframe, #top .av-element-cover embed, #top .av-element-cover object, #top .av-element-cover video{height:"+wwCover+"px; top: -"+(wwCover - wh100)/2+"px;}\n"; } if(ww100/wh100_mod < 16/9) { css += "#top .avia-builder-el-0 .av-element-cover iframe, #top .avia-builder-el-0 .av-element-cover embed, #top .avia-builder-el-0 .av-element-cover object, #top .avia-builder-el-0 .av-element-cover video{width:"+whCoverMod+"px; left: -"+(whCoverMod - ww100)/2+"px;}\n"; } else { css += "#top .avia-builder-el-0 .av-element-cover iframe, #top .avia-builder-el-0 .av-element-cover embed, #top .avia-builder-el-0 .av-element-cover object, #top .avia-builder-el-0 .av-element-cover video{height:"+wwCover+"px; top: -"+(wwCover - wh100_mod)/2+"px;}\n"; } //ie8 needs different insert method try{ css_block.text(css); } catch(err){ css_block.remove(); css_block = $("<style type='text/css' id='av-browser-height'>"+css+"</style>").appendTo('head:first'); } setTimeout(function(){ win.trigger('av-height-change'); /*broadcast the height change*/ },100); }; win.on( 'debouncedresize', calc_height); calc_height(); } </script> <?php } add_action('wp_head', 'fix_full_height_gap');Never mind, I figured it out: I had to wrap the whole function in
jQuery(document).ready(function ($) {to get the$-sign working in the function. It works now, thanks for your support!Hey!
Glad it worked for you :) We have put together some useful info about enfold theme please feel free to check it out here – http://kriesi.at/documentation/enfold/
Regards,
Vinay
- You must be logged in to reply to this topic.