Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-29-2012, 08:50 AM   PM User | #1
lizzmo
New to the CF scene

 
Join Date: May 2012
Location: London, UK
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
lizzmo is an unknown quantity at this point
Question Fancybox not resizing with embedded PDF

I've been looking through the Fancybox API and I'm not sure what to change in order to have the fancybox resize nicely with the PDF inside it. Right now when the window is resized the fancybox bleeds off the right side of the page.

Heres when it first opens: http://lizbmorrison.net/fancybox1.png
and when the window is resized: http://lizbmorrison.net/fancybox2.png

HTML:
Code:
<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:
Code:
$(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?
lizzmo is offline   Reply With Quote
Reply

Bookmarks

Tags
embed, fancybox, fluid, pdf, resize

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:19 PM.


Advertisement
Log in to turn off these ads.