In my free time, I like to play with websites. I am currently working on a project to help an organization move its website into WordPress. Unlike designing a website from scratch, I have to recreate the existing design by using my knowledge of CSS, PHP, and Javascript.
This process creates some real challenges, and I recently made a breakthrough. The design demanded code to deal with two issues: The front page has two columns that must be of equal height, and the rest of the pages have one column that needs to have at least the same height as a second column. Because the content in these columns is dynamic, I couldn’t just set a fixed height for any of them. I needed to find a solution that would automatically adjust the design when the content changed.
Luckily, I found a solution to the first problem with a little research. Someone had already written Javascript code to set equal column heights:
<script type="text/javascript">
jQuery.noConflict();
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = jQuery(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
jQuery(document).ready(function() {
equalHeight(jQuery("#container,#primary"));
});
</script> |
The real problem came when I wanted to work with other pages. Try as I might, I couldn’t find a piece of code that successfully set a minimum column height based on the height of another column. So I took matters into my own hands—I modified the code above to fit my needs. Then I added an if/else statement so all of the code could be pasted into my theme’s functions.php file:
// script for column height function
function my_scripts() {
if (is_front_page()) { ?>
<script type="text/javascript">
jQuery.noConflict();
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = jQuery(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
jQuery(document).ready(function() {
equalHeight(jQuery("#container,#primary"));
});
</script>
<?php } else { ?>
<script type="text/javascript">
jQuery.noConflict();
function fixMinHeight(group) {
thisHeight = 0;
group.each(function() {
thisHeight = jQuery(this).height();
});
jQuery("#container").css("min-height", thisHeight+100);
}
jQuery(document).ready(function() {
fixMinHeight(jQuery("#secondary"));
});
</script>
<?php } }
add_action('wp_head','my_scripts'); |
The result? All the columns work as they should. Someone else may come up with a more elegant solution, but I solved the problem. I jumped around the living room for a good five minutes after I got that to work!
For me, this process is very similar to translating. Like coding a website with an existing design, translating requires me to write based on a source text. When a puzzling term or tricky bit of grammar arises, a little research can sometimes lead me to a solution. If, however, a solution doesn’t already exist, I have to rely on a bit of ingenuity to come up with my own.
