4
\$\begingroup\$

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 }?>
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

This isn't an actual solution to your problem, but I noticed that you aren't using var to declare your JavaScript variables. Doing so automatically declares them in the global scope, which is a bad idea as a general rule of thumb and can quickly lead to unpredictable behavior. Declaring variables should be done like var myvar = myvalue:

<script>
    function measure(){
        var $total_count=document.getElementById("total_product_count").value;
        for(var i = 1; i <= $total_count; i++){
            var $description_id='description['+i+']';
            var $second_description_id='description['+i+']_second';
            var $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>

...
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.