We recently finished building the harmony-blog.com website. Our buddy Peter brainstormed with the owners of the blog and came up with a great idea to make the blog look like real postcards. When we got the finished design it looked amazing. Problem was, it had a few things here and there that are “impossible” for the web.

But with our turbo nerdy know-how, nothing is impossible at Sol Design. We have more than a few magic tricks up our sleeves. One of the most obvious challenges was the repeating panel background on the main post pages. It was designed to look like a real letter where you unfold it to reveal more text. “No problem”, a web designer might say, “I’ll just put a repeating background on the postcard body”. Wait, think about this for a second… when your text goes half way down the last card and the background just cuts off slicing the last card in half, how real is that going to look? No good.

Here are some more options that a designer might think of:

What about inline images? You can’t count those and what about irregular word wrapping? Did you consider different browsers? They all kind of wrap in different places and do their own thing. You could try this but you’re going to get some unexpected results that will break things. Bad solution.

True, you could. But that’s cheating and a huge waste of time for the bloggers after a year or two of usage. Also what if the viewer is using a different browser than the blogger? This is a copout solution.

Our Solution

Figuring there are so many possibilities for unexpected user input and no way to predict what a browser is going to do server-side, we decided to figure out our problems client-side.

Here are the steps:

1. Display the page with our special marker thingy at the end of all the content
2. Using Javascript, figure out how far from the top of the page our marker thingy landed
3. Decide how many panels we would need to completely cover that distance
4. Display the panels & achieve the “impossible”

Body HTML & CSS Code:

You are going to need to have two divs. One that will receive the repeating background and one on top of it that will contain the content. Use absolute positioning in CSS to place the content frame on top of the background frame.

<div id=”framebg”>
</div>

<div id=”blogpost”>

Content content content, bla bla bla.

</div>

Now for the special marker thingy. Place this tag at the end of all the content in the overlaying content frame, it will be pushed to the bottom of the page when everything has loaded in.

<img src=”images/spacer.gif” id=”endPoint” />

Javascript Code:
showbg() should be called onLoad or in a script tag after the endPoint marking thingy has been created.

function showbg(){
var coords = getPageCoords(document.getElementById(’endPoint’));
var frames;
var topstart = 300; // how far from the top of the page the panels will start displaying

frames = 1;
if(coords.y > 0){
frames = Math.ceil((coords.y - topstart)/361) + 0; // replace the 361 with a number that is close
// to one panels height.
}

bghtml = “”;
for(x = 0; x < frames ; x++){
rowType = (x % 2) + 1;
bghtml = bghtml + “<img src=’http://harmony-blog.com/wp-content/themes/harmony/images/cardbg” + rowType + “.jpg’ height=’364′ width=’512′><BR>”;

}

document.getElementById(’framebg’).innerHTML = bghtml;

}

function getPageCoords (element) {
var coords = { x: 0, y: 0};
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
return coords;
}

And there you have it. Check it out in action; it’s pretty cool (at the harmony blog).

Side Note

One problem we ran into was images without height tags. We were building plugins for wordpress to accomplish the repeating backgrounds and noticed wordpress didn’t automatically input height tags on IMG tags. Therefore, the page would load, we’d determine the location of our marker thingy, display the background, and then the images would load in increasing the height and bust out of our panels. To fix this we wrote another Wordpress plugin that adds height and width tags to all inline images. If you use WP check it out: The iMax Width Wordpress Pluggin

** Harmony Blog was designed by Peter Belsky in New York and Built out in plugins and themes for Wordpress by Sol Design Company in Atlanta. The blog is to promote the happenings of the Harmony Hotel Resort in Costa Rica. Good times.

This entry was posted on Friday, February 16th, 2007 at 1:13 am and is filed under nerdy, how to, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.