1. 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

Discussion in 'Styling and Customization Questions' started by MikeDat, Nov 24, 2013.

  1. MikeDat

    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: Nov 24, 2013
    Spo0f and Lindal_Oronar like this.
  2. Lindal_Oronar

    Lindal_Oronar Well-Known Member

    Thanks i was looking for this kind of script.
     
  3. MikeDat

    MikeDat Member

    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.
     

Share This Page