XF 1.2 Responsive design logo and header height jQuery

MikeDat

Member
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
Code:
.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?)
Code:
<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?
 
Last edited:
Top Bottom