| Recent Articles |
Random Subroutines In Perl
I'll bet your first question might be "why on earth would I ever want to call subroutines randomly?". Admittedly, it isn't a need that comes up that often, but (for example) it's used right here on this very page that you are...
Bouncing Around Perl On The Web
Once you have trounced the rest of the Perl class in Prisoner's Dilemma and are ready to take your skills into the field, it's good to know plenty of resources exist online. The drumbeat of PHP, Java, and Rails has...
Stripping Out Bad Characters Generated By A Perl...
There is an interesting thread in the WebProWorld forum that solves a problem a member was having trying to strip bad characters from a block of text generated by his perl shopping cart. The member's initial post reads...
ColdFusion Brands With Adobe, Shares Data with Perl
ColdFusion's latest version emerges for the first time under the Adobe brand name; it's changed a lot since its early dot-com days of doing database calls for HTML. The arrival of the public beta of Adobe ColdFusion 8...
How to Make your URLs SEO Friendly
It is a well-known fact nowadays that without SEO a Web site stands many chances of not being indexed by search spiders, therefore risking not being ranked high enough (or even at all) in the SERPs. The result: poor...
Apache, PHP, Suhosin Security Patch and mod_perl
For many reasons many people want to compile their own source code to build apache and php / mod_perl these days. We will discuss the steps required in doing just that. But unlike most others we will throw in some...
|
|
12.14.07
Equal Height CSS Columns With Filler Text
 By
A.P. Lawrence
If you search for "column alignment" or "css columns", you'll probably eventually end up at In search of the One True Layout at positioniseverything.net. That's great stuff, but it is not what I wanted.
I want to fill the left hand column with text so that it matches the height (the page length) of the main text in the right hand column. I can't always do that - for one thing, I may not have enough filler text, because the text I want is links to related content (that is, other articles related to the content in the main text). Also, there's a certain amount of content I want on the left hand side no matter how short the right hand side is. So I can't always be perfect, but I can get everything aligned most of the time.
The problem, of course, is knowing when to stop writing text in the left column. At some point, the length of that column will exceed the text already displayed in the right column, and that produces an unattractive page. I could just write a few things in the left side, but that can leave lots of wasted space if the right hand side is long, and while that's not extremely ugly, it is unused space that I'd like to fill with content.
The problem with client side Javascript is that it can't read files on the webserver. You wouldn't want it to be able to, because it is running from the browser of the person reading your page and could be modified by them. Perl running on your server through a SSI (Server Side Include) of course can read files, so we'll use that to create Javascript code. If that confuses you, you probably just need to play with this to see it in action.
This is the Perl code that produces the Javascript that aligns the left column:
print <<EOF;
<script type="text/javascript">
function getht(h) {
var x=0;
while(h) {
x += h.offsetTop;
h= h.offsetParent;
}
return x;
}
var nb =document.getElementById("nearbottom");
var nbht=getht(nb);
var cht=0;
var leftside =document.getElementById("leftside");
var leftheight=getht(leftside);
var filler=new Array();
EOF
for ($x=0;$x < 50; $x++) {
print qq(filler[$x]=');
randompage();
print qq(';\n);
}
print <<EOF;
for (var x=0; x < 50; x++)
{
if (nbht > leftheight ) {
id='p' + x;
var pfiller=document.createElement("p");
pfiller.id=id;
// use next line if you want to see the variables for debugging
// pfiller.innerHTML=filler[x] + " " + leftheight + " " + nbht;
pfiller.innerHTML=filler[x] + " ";
leftside.appendChild(pfiller);
leftheight=getht(document.getElementById(id));
}
}
document.write('<br /></div>');
</script>
EOF
Continue reading this article.
|
