Question

I’ve been looking through the Fancybox API and the forums here with no luck so far.

Basically when the window is resized the embedded PDF in the fancybox resizes, but the fancybox container does not and bleeds off the right side of the browser.

Heres when it first opens: http://lizbmorrison.net/fancybox1.png

And when the window is resized: http://lizbmorrison.net/fancybox2.png

HTML:

<li class="pdf"><a class="fancypdf" href="#mydoc">View PDF</a></li>
<div id="mydoc" style="display:none;">
    <embed class="embed" src="<?php echo wp_get_attachment_url( $PDF->ID ); ?>"></embed>
</div>

JS:

$(document).ready(function() {
var width = $(window).width() * 0.9;
var height = $(window).height() * 0.9;
$('.embed').css('width', width).css('height', height);
$('a.fancypdf').fancybox({
    'type': 'inline',
    'margin': 0,
    'centerOnScroll': false,
    'hideOnContentClick': false,
    'autoDimensions': true,
    'autoScale': true,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
});
});
$(window).resize(function () {
var width = $(window).width() * 0.9;
var height = $(window).height() * 0.9;
$('.embed').css('width', width).css('height', height);
});

Any ideas?

Answer 1

This is what I’ve settled on, still not perfect though.

HTML:

<li class="pdf"><a class="fancypdf" style="padding-top: 20px;"  href="<?php echo wp_get_attachment_url( $PDF->ID ); ?>">View PDF</a></li>

JS:

$('.fancypdf').fancybox({
    'type': 'iframe',
    'centerOnScroll': true,
    'width': 800,
    'height': 600,
    'margin': 20,
    'autoScale': false,
    'autoDimensions': false
});