Repeating background tile with a specific height

The other day I was working on a site that used curvy lines to surround content on the site instead of the more usual straight-line boxes around content.

Up until that point the content on the site was fairly static.

However the new addition to the site was a blog and so the blog articles would be of variable length and so too were the number of comments for every article.

So the challenge was to ensure the curvy lines always connected up at the bottom of the container.

Here is a quick peak at the design:

curvy-lines

Here is the html code

<div class="blog-box-container">
 <div class="blog-box-container-top"></div>
 <div class="blog-box-container-mid" style="min-height: 450px">
 <div class="blog-box-container-padding">
 <h1>Here is a heading</h1>
 <p>Here is some content</p>
 </div>
 </div>
 <div class="blog-box-container-bottom"></div>
</div>

Here is the css:

.blog-box-container{
 width: 847px;
 margin: 22px auto 0 auto;
}

.blog-box-container-top{
 background: url('img/top.png') no-repeat;
 height: 82px;
}

/* Use the "resizeBoxes" jquery script
 to ensure all elements with this class are multiples of
 the height of the background image used */
.blog-box-container-mid{
 background: url('img/middle.png') repeat-y;
}

.blog-box-container-bottom{
 background: url('img/bottom.png') no-repeat;
 height: 22px;
}

.blog-box-container-padding{
 padding: 1px 15px;
 position: relative;
}

To solve this problem I used a JavaScript function to ensure the middle panel always had a height that was a multiple of the tile background image to be used.

Here is the JavaScript:

// This function will ensure all matched elements have a height
// that is a multiple of the ideal height specified.
// If we have a repeating tiled background of a specific height
// this will ensure the full tile is shown.
function resizeBoxes(selector, idealHeight) {
 var elements = $(selector).each(function () {

$(this).css("height", "auto"); // need to clear any preset height on the element first

var height = $(this).height();
 var remainder = height % idealHeight;

if (remainder != 0) {
 var divisor = parseInt(height / idealHeight) + 1;
 var newHeight = divisor * idealHeight;
 $(this).height(newHeight);
 }
 });
}

So to use the JavaScript function you just call it like this on the page:


$(function () {
 resizeBoxes(".blog-box-container-mid", 172);
 });

I hope this code helps someone else out who faces a similar problem.

Advertisements
Tagged with: ,
Posted in Layout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: