CODEWITHSUNDEEP
javascriptjquerypdfheightembed
Brieneke
Brieneke

Reputation: 45

Dynamically set height of embedded pdf

I managed to dynamically set the height of my embed element that contains a pdf. Using jQuery to set the new height. But I don't have the feeling I have used the best 'solution'.

Old height = height set in the html
New height = New calculated height set with jQuery

I came across a problem: My embed element had an old height of 200px. When I tried to overwrite it with the new height the embed element did change to the new height but the PDF height stayed at 200px. But when I set the old height much higher, 5000px, the pdf reacted correctly to the new height.
Short version:
New embed height > old embed height = pdf height stays at old embed height
New embed height < old embed height = pdf height is correct

My current code looks like this:

<object>
    <embed id="embed_pdf" type='application/pdf' src="/files/<?=$var['filename']?>" data-width="<?=$var['image_width']?>" data-height="<?=$var['image_height']?>" style="max-width:<?=$var['image_width']?>px;" width="100%" height="<?=$var['image_height']?>"/>
    <p>Error message</p>
</object>

And my 'script' code:

$(document).ready(function() {
    var pdf_width = $("#embed_pdf").attr("data-width");
    var pdf_height = $("#embed_pdf").attr("data-height");
    var object_width = $("#embed_pdf").width();
    var object_height = (object_width/pdf_width)*pdf_height;
    $("#embed_pdf").attr('height', object_height);
});

At the moment it is working because the old height is always the same or higher than the new height. But is this a known or normal problem? Or am I doing something wrong? What might be a better solution?

Upvotes: 2

Views: 2587

Answers (1)

Greg
Greg

Reputation: 2600

I had no issues resizing a PDF plugin embed in IE 11, which browser are you using, and are you using the standard Adobe PDF plugin?

$(window).resize( function(){
    //$('embed').attr('height', 200);
    height = $(window).height() - 75;
    //alert(height);
    $('embed').attr('height', height);
});

I was able to do similar to the above on document ready and on window resize. I did, however, set all items to 100% width, such as html, body, and all div containers that housed my embed.

If you are trying to take the document or element height or etc, you may have to actually shrink your PDF first, but Window height should be fine.

Upvotes: 1

Related Questions