XF 1.2 Responsive design logo and header height jQuery

[MikeDat]

In the responsive design on XenForo the logo in the header will scale down proportionally when the browser width is narrowed, but there will be a letterboxing effect around the logo. I modified some CSS and wrote some jQuery to recalculate the header height and do away with the letterboxing.

In EXTRA.css

.Responsive #logo {
    height: auto;
    line-height: normal;
}

This causes the logo to not be centered vertically nor pushed down, and there's no longer a set height for the div.

In PAGE_CONTAINER before </head> (There's probably a better place for this code. Is there a proper template for custom JavaScript in XenForo?)

<script type="text/javascript">
function responsiveHeaderHeight(){
    if ($('html').hasClass('Responsive') && $(window).width() < 1000) // my .pageWidth has max-width: 1000px;
        // set the height of #headerProxy to the responsively calculated #header height
        $('#headerProxy').css({'height':($('#header').height()+'px')});
}

// preloaded logo needed for uncached load on Firefox
if (document.images){
    logoPreload = new Image();
    logoPreload.src = "/path/logo.png";
}

// adjust header height on page load
$(document).ready(function(){
    responsiveHeaderHeight();
});

// adjust header height when browser window is resized
// also applies to mobile/tablet devices when going from portrait to landscape and vice versa
$(window).resize(function(){
    responsiveHeaderHeight();
});
</script>

I tested this code in Chrome and IE 10 without the logo preloaded, and the #headerProxy height was calculated fine. However in Firefox if the logo isn't cached then the #header height doesn't include the height of the scaled logo. In that case preloading is necessary. An alternative is to use $(window).load instead of $(document).ready, but if that's used I believe responsiveHeaderHeight() wouldn't be triggered until everything is loaded in the page including all the images.

I know this method is hacky, but I just wanted the header and logo down-scaling to be more dynamic with respect to the responsive design.

EDIT: Does anyone see any potential browser issues with this? Is this not a best practice since the formatting relies on jQuery?

 

[Lindal_Oronar]

Thanks i was looking for this kind of script.

 

[MikeDat]

You're welcome . I was originally trying to use the Respollo add-on, but I wanted something more flexible so instead I wrote that code.