CODEWITHSUNDEEP
jqueryfancybox
dmmd
dmmd

Reputation: 3009

How to make fancybox resize to custom created iframe size

I want to make the fancybox dimensions match the content size of a "manually created" iframe.

I tried this: http://jsfiddle.net/ystLD/3/

But it doesn't work and now I'm kinda stuck here.

Does anyone know how to do this?

Thanks.

Upvotes: 1

Views: 5742

Answers (2)

JFK
JFK

Reputation: 41143

A "manually created" iframe has the disadvantage that fancybox doesn't really know what type of content is dealing with. I would rather open fancybox with the option type: "iframe".

Then, the only way I can think you can re-size fancybox according to the contents of the iframe is hard-coding the dimensions inside the page opened within the iframe, either in the html, body or a wrapper container like

<html style="width: 800px; height: 650px;">

then you could use the beforeShow callback to get the dimensions of the iframe like 

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();
  }

If you don't own the opened page and you cannot hard-code its dimension, you still can try getting the innerWidth() and innerHeight() of the html or body tag, but it can be really buggy as you can see in this forked fiddle

Here is the answer that worked for someone else https://stackoverflow.com/a/10776520/1055987

Upvotes: 5

Bogdan Rybak
Bogdan Rybak

Reputation: 2117

You can attach the width and height to the attributes of the iframe since you're creating it manually anyways.

.attr({ name: 'blah', width: '500px', height: '500px' })

If you want something that will exactly match the size of the page you are fetching then it's a pretty tedious task since an iframe is pretty much like opening a browser window. You would have to determine the size of the widest div and such programmatically by analyzing the structure. Also, you would have to determine if the page uses a responsive layout and use a specific size for that.

Upvotes: 0

Related Questions