HTML – Tony Fendall http://blog.tonyfendall.com Sun, 10 Apr 2016 09:45:34 +0000 en-NZ hourly 1 https://wordpress.org/?v=4.4.2 Facebook Iframe Resizing Solution http://blog.tonyfendall.com/2010/02/facebook-iframe-resizing-solution/ http://blog.tonyfendall.com/2010/02/facebook-iframe-resizing-solution/#comments Wed, 24 Feb 2010 22:29:14 +0000 http://blog.tonyfendall.com/?p=70 Continue reading Facebook Iframe Resizing Solution]]> Magnifying Glass Recently I have been working on working with a Facebook application which resides within an iframe.  However, the application could change size as the UI state changed, and the iframe needed to change size to match.

Luckily for me Facebook provide a prebuilt solution for this which you can drop into your page with only a few lines of Javascript.  They even provide a demo application.

Unluckily for me, after following Facebook’s instructions perfectly, the resizing didn’t work!

The behaviour I observed was:

Google Chrome
Internet Explorer

The iframe would always open at 800px tall if the height of the
content was less than 800px. The iframe would enlarge correctly
if the contents grey beyond 800px tall, but it would never shrink.

Mozilla Firefox The iframe resizing worked perfectly ?!

I confirmed that the demo application Facebook provided worked correctly in all browses, but I just couldn’t get mine to work the same.  Eventually I removed lines from the Facebook demo application one-by-one until I discovered what caused my error.

In the end it turns out that it was simply a case of my application not specifying a DOCTYPE in the main html page.  After I inserted the DOCTYPE tag from the demo application everything worked perfectly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It’s a pity that Facebook didn’t mention anywhere in their documentation that this line is critical to the operation of the iframe resizing code.  I’m glad things are working for me now though, and hopefully other people will be able to learn from my mistake.

]]>
http://blog.tonyfendall.com/2010/02/facebook-iframe-resizing-solution/feed/ 10