• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Responsive design logo and header height jQuery

#1
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: