| Getting your Trinity Audio player ready... |
When coding a site, it’s common to have multiple facets and widths to various elements on the page – mainly a container elements for your content that floats in the middle of a page, and background elements that go full width behind your content, giving it added depth. Now, it’s easy to make this work with z-index and some absolute positioning on a desktop screen, with set heights, but what about when you go down to an iPhone and the height of the foreground element changes, but your background is left at a static height?
Here’s a little example from our own website:
This looks nice at Desktop size – the white background wrapper extends beyond the content, and is the right height
But look what happens when the portfolio bumps to three rows and the background doesn’t adjust
Well, you fix it with Javascript. Just to show you what we’re doing with the wrapper, here’s the styles that we have applying to the background wrapper. We have this placed outside of the container element, positioned absolute to the body.
[cc lang=”css”]
body{
position:relative;
}
.wrapper{
width:100%; /* Makes it span the whole width of the page */
position:absolute; /* Locks it into the relative position of the body */
bottom:149px; /* We want this particular wrapper close to the bottom of the page */
left:0; /* Start it on the left*/
z-index:1; /* Forces the wrapper behind the container */
background:#ffffff;
}
.container{
width:100%;
width:1200px\9;
max-width:1200px; /* The last three lines will ensure it is 100% width, up to 1200px with an IE fallback */
margin:auto; /* Center the container */
.container>div>*, .container>header>*{
position:relative;
z-index:11; /* Force the container elements above the background */
}
}
.recent-work{} /* Our portfolio wrapper (for reference) */
[/cc]
Now we have a basic background wrapper (with no height setting you’ll notice) and a container to hold all of our content. Now, we need to write some Javascript (we’ll use some simple jQuery functions) to match the height of our wrapper to the height of the recent-work div. You’ll notice that all of our js lines are pre-fixed with [cci lang=”js”]jQuery[/cci] instead of [cci lang=”js”]$[/cci] – this is because we primarily work in WordPress, and WP forces [cci lang=”js”]jQuery[/cci] in safe mode which requires the jQuery prefix.
[cc lang=”js”]
function adjust_portfolio_background(){
// Grab the portfolio
var recentWork = jQuery(‘.recent-work’);
jQuery(‘.wrapper’).css({
‘height’ : recentWork.height(),
});
}
jQuery(window).load(adjust_header_banner);
jQuery(window).resize(adjust_header_banner);
[/cc]
You can see the result below:
Voila, we keep the white background the whole time!
Let’s deconstruct this real quick – we’re creating a simple function that grabs the height of the object [cci lang=”css”].recent-work[/cci], and assigning it as the css height of the [cci lang=”css”].wrapper[/cci] element. We’re then triggering the function to run every time you load the page and every time that you re-size the window (there’s the responsive trick).
You can also do computations with this method, for example let’s say you had a background that needed to span the height of several elements + some padding at the bottom, you can similarly do this:
[cc lang=”js”]
function adjust_header_banner(){
// Header Wrapper Height
var nav = jQuery(‘.nav’);
var header = jQuery(‘.header’);
var banner = jQuery(‘.banner’);
var footer = jQuery(‘.footer’);
var highlights = jQuery(‘.home-highlights’);
height = (nav.height() + header.height() + bannerWrapper.height() + highlights.height() + 25 );
jQuery(‘.header-wrapper’).css({
‘height’ : height,
});
}
[/cc]
Once you start grabbing variables off the page and moving them back and forth to keep everything in line.
Now, this does have a couple of draw-backs. The first one being that if the user has Javascript disabled (it’s silly, but people do), then they won’t see the background at all so you probably want to set a good default height. The second disadvantage is that you have a small flash of un-styled content (FOUC). If you have a quick loading page it won’t be a big problem, but any FOUC is a bummer. Thirdly, the jQuery pushes the height value into the element inline. This isn’t really a problem per-se, but it’s a bit messy and no one likes messy code.