[SOLVED] Filling up a variable-height div

[raytri]

This question is part Javascript, part PHP.

 

I have a site where the pages are a fixed depth, but the amount of content varies quite a bit from page to page.

 

Rather than leave big chunks of white space at the bottom of some of the pages, my client wants me to find "filler" to put there.

 

Leaving aside the wisdom of that request, here's what I would like to do:

 

1. Get the actual height of the main content div on the page (it's not set with CSS);

 

2. Give the "filler" div a dynamic height [(maximum height of main-content div) minus (actual height of main-content div)].

 

3. Fill the "filler" div with content from a database

 

4. Keep the content from ending in the middle of a paragraph or line or anything ugly like that (ideally, some sort of "keep lines together" function like you get with word processing programs).

 

I know how to do #1 in Javascript, and am in the process of figuring out #2. I know how to do #3 in PHP. I have no idea how to do #4 in either.

 

If there's a way to do it entirely in PHP, I'd be very happy. But it doesn't look to me like it can be.

 

Any suggestions?

[raytri]

Aargh. Minutes after posting this I realized that steps #1 and #2 are easily done with CSS (given the main-content div a maximum height, set it to "overflow:hidden;" and then put the filler div inside the main-content div). I've got #3 covered.

 

So now I'm down to #4: figuring out how to only put in as much content as the div will actually hold. Which may still require a variation of #1 (finding out the actual height of the filler div).

[raytri]

Ok, here's what I've done with a combination of PHP and Javascript:

 

<?php
$random_query = mysql_query("select * from Quotes order by rand() limit 12"); ?>

<div class="quotebox"><h1 style="color:#ffce39;">Testimonials</h1>
<div id="quoteboxtest" style="visibility:hidden; overflow:hidden; position:absolute;">

<?php 
$quotecount=0;
while ($random_quote=mysql_fetch_array($random_query)) { 
$quotecount ++; ?>

<div id="fillerquote<?php echo $quotecount; ?>" style="margin-top:15px; padding-top:15px; border-top:dotted 1px #ffffff;">
<p class="dropcap" style="color:#ffffff; margin-bottom:-30px;">“</p>
<p class="quote"><?php echo $random_quote['Quote']; ?></p>
<p class="credit"><strong><?php echo $random_quote['Name']; ?></strong>, <?php echo $random_quote['Title']; ?></p></div>

<?php } ?></div>

<script type="text/javascript">
var maxheight = document.getElementById("quoteboxtest").offsetHeight;
var actualheight=0;
var quote = 0;
while (quote<=11) {
quote ++;
var quotename = "fillerquote" + quote;
var quotediv = document.getElementById(quotename).innerHTML;
var quoteheight = document.getElementById(quotename).offsetHeight;
actualheight += quoteheight;

if (actualheight <= (maxheight-40)) {document.write ('<div style="margin-top:15px; padding-top:15px; border-top:dotted 1px #ffffff;">');
document.write(quotediv);
document.write('</div>');}


}




</script>

</div>

 

First, I use PHP to pull quotes from the database and write them as individual divs into a hidden div that is the size of the white space on the page.

 

On top of the hidden div is a visible div of the same dimensions. I use Javascript to loop through the individual quote divs in the hidden div. For each quote, it measures the height of the quote and then adds that height to the total height of quotes it has measured in previous loops. If the total height is less than the height of the white space, it writes the quote to the visible div.

 

At least, that's how it's supposed to work. For some reason the "if" statement at the end of the javascript doesn't appear to be working properly. It should be comparing actualheight to maxheight, but it appears to return "true" regardless of the values of actualheight and maxheight.

 

Can someone help with this last bit?

[raytri]

Okay, figured out the last little bit.

 

For the record:

 

<!-- HTML structure, for reference. maincontentWrap has a fixed height of 1350px.  -->

<div id="maincontentWrap">
<div id="maincontentWide">
This div contains the unique page content.
</div>
Code below appears here: inside the "Wrap" div but outside the "Wide" div.
</div>

<?php
$random_query = mysql_query("select * from Quotes order by rand()"); ?>

/* Create hidden, absolutely positioned div with the same padding and width as the visible div */
<div id="quoteboxtest" class="quotebox" style="visibility:hidden; overflow:hidden; position:absolute; width:715px;">

<?php

/* Fill hidden div with quotes from database, each wrapped in its own div with a unique ID */
$quotecount=0;
while ($random_quote=mysql_fetch_array($random_query)) { 
$quotecount ++; ?>

<div id="fillerquote<?php echo $quotecount; ?>" style="margin-top:15px; padding-top:15px; border-top:dotted 1px #ffffff;">
<p class="dropcap" style="color:#ffffff; margin-bottom:-60px;">“</p>
<p class="quote"><?php echo $random_quote['Quote']; ?></p>
<p class="credit"><strong><?php echo $random_quote['Name']; ?></strong>, <?php echo $random_quote['Title']; ?></p></div>

<?php } ?></div>

<!-- This is the visible div -->
<div class="quotebox"><h1 style="color:#ffce39;">Testimonials</h1>
<script type="text/javascript">
// Script to loop through the hidden quotes and write them to visible div if they fit
var maindivheight = document.getElementById("maincontentWide").offsetHeight; //get height of main div
var maxheight = 1350 - maindivheight; // Get height of quote div by subtracting maindiv from height of Wrap div
var actualheight=40; // Set starting actualheight to account for padding and headline in visible div
//Loop through quotes. I've picked 11 because I'll never need more quotes than that, and hardcoding it avoids having to pass a variable (the number of quotes in the database) from PHP to Javascript
var fillerquote = 0;
while (fillerquote<=11) {
fillerquote +=1;
var quotename = "fillerquote" + fillerquote; //calculate ID of quote div
var quotediv = document.getElementById(quotename).innerHTML; //get content of quote div
var quotebaseheight = document.getElementById(quotename).offsetHeight; //measure height of the quote div
var quoteheight= quotebaseheight+15; //add 15 pixels to measured height of quote div to account for margin and padding
actualheight += quoteheight; //Add adjusted height of quote div to the total height of all previous quote divs

//If total height of quote divs is less than the height of the white space, write the quote div to the visible div

if (actualheight <= maxheight) {document.write ('<div style="margin-top:15px; padding-top:15px; border-top:dotted 1px #ffffff;">');
document.write(quotediv);
document.write('</div>');}
else {actualheight -= quoteheight;} //If quote is too big, remove its height from actualheight tally and move on to the next quote, looking for a quote that will fit in the remaining space.
}
</script>
</div>

Thanks for letting me talk to myself!