I show an iframe with fancybox. Inside the HTML of the iframe I do this:
<body style="width: 650px; height: 430px;">
Then in JS I do the followig:
$(".popup").fancybox({
padding : 0,
closeBtn : false,
autoSize : true,
fitToView : false,
beforeShow: function()
{
this.width = ($("iframe").contents().find("body").width());
this.height = ($("iframe").contents().find("body").height());
}
});
Where ".popup" is:
<a href="url.php" class="popup" data-fancybox-type="iframe">
If inside that iframe I load another HTML with different dimensions (let's say 400x150), fancybox adjust it's height but not it's width.
any help will be appreciated!
EDIT 1:
The first time I run fancy box, the ".fancybox-inner" div get styled like this
width: 650px; height: 430px;
Then, when I navigate inside the iframe, the ".fancybox-inner" div get styled like this
width: 650px; height: 150px;
but the second HTML body tag is like this
<body style="width: 400px; height: 150px;">
EDIT 2:
the comments from this solution linked in this answer, indicates me that this only works with the height
Answer
Ok, I ended up doing this using fancybox version: 2.1.4 (Thu, 10 Jan 2013)
at line 1231 you will find
origHeight = body.height();
After that add this
origWidth = body.width();
That auto adjust both height and with