I'd like to share my implementation to you to confirm if it's a correct way to solve my problem. I have a list of products which have an attributes table and a description table (both in html_encoded strings). Every product starts at a new print-page using page break. When the attributes and description tables don't fit in one page I want to print the description in the next page.
My solution is to print the attributes table and then print the description div twice: once in the same page with the attributes and once at the next page using a page break; After the page has loaded using JavaScript, I measure the height of both attributes+description and if that is higher than 800 pixels (which means that two pages will be needed) I hide the first description. If their height is lower than 800 pixels (which means they can fit in the same page) I hide the second one.
(I know for certain that neither of the two tables will exceed one page by itself)
Is this a solid solution or are there possible cases in which it will lead to a big mess?
<script>
function measure(){
$total_count=document.getElementById("total_product_count").value;
for(var i = 1; i <= $total_count; i++){
$description_id='description['+i+']';
$second_description_id='description['+i+']_second';
$attributes_id='attributes['+i+']';
$combined_height = document.getElementById($description_id).clientHeight + document.getElementById($attributes_id).clientHeight;
if($combined_height>800){
document.getElementById($description_id).style.display = 'none';
}
else{
document.getElementById($second_description_id).style.display = 'none';
}
}
}
</script
<body onload="measure()">
.
.
.
<input id="total_product_count" type="hidden" value="<?php echo $total_product_count; ?>" />
<?php foreach ($products as $product) { ?>
<div>...small image + title....<div/>
<div class="attribute" id="attributes[<?php echo $product['product_count']; ?>]" ><?php echo $product['attributes']; ?></div>
<br/>
<!--show the first description in the same page as attributes -->
<div id="description[<?php echo $product['product_count']; ?>]" class="tab-content"> <?php echo $product['description']; ?></div>
<div id="second_description[<?php echo $product['product_count']; ?>]" class="tab-content">
<!-- show the second description at the next page -->
<p style="page-break-after: always; text-align: center;"></p>
<?php echo $product['description']; ?>
</div>
<?php }?>