iFrame height resizing, responsive design techniques.


My current project required me to work with responsive design.  One task was to setup an iframe that was capable of dynamic height based on the contents of the iframe.  We did have a little control of the parent and the child content, and I thought this would be a pretty easy.

After some trial and error and a lot of google-fu I found a solution using easyXDM.  It seemed to work pretty well and was able to work across different browsers.  However, the solution was pretty heavy, weighing in at just over 21kb embedded on the parent site.

A coworker of mine brought up a more streamline solution that pulled out all the goodness of what easyXDM was doing and put it into a script at around 2kb.

The script uses postMessage transport for more current browsers.  Then falls back to a hash tag solution for browsers that don’t support postMessage option.

I cleaned it up and put it out on github.  Check it out and let me know what you think.

Demo: http://zerg.ws/iframe/demo.html

Github: https://github.com/johnymonster/iframe_height

Thanks!

 

Source : http://www.dailyrelevance.com/javascript/iframe-height-resizing-responsive-design-techniques

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s