New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+

Iframe SSI script

Author: Dynamic Drive

Note: Updated April 6th, 05' for FireFox 1.x iframe height issue

Description: Want to dynamically include the contents of another page onto the current without resorting to server side means (ie: server side includes)? This script uses the IFRAME tag, and by automatically resizing it based on the actual height of the containing page, allows you to seamlessly display external content on your page. In other words, the iframe is automatically resized to be only as tall as the external page's height. The script works in both IE5+ and NS6+, and for other browsers, supports the option to either completely hide the iframe in question or display it using its default height. Now that's SSI DHTML style!

Note that as with SSI, the external page referenced by the iframe must be from the same domain as the page the iframe tag is inserted in. Setting the iframe's src to an external site such as "http://www.google.com" will not work, since the script cannot probe and detect the height of pages from external domains.

Demo 1: The gray HTML block below is actually an iframe, dynamically resized by the script so it fits precisely inline on the page, without creating gaps. Here is the actual page used.

Demo 1: The "Featured on Dynamic Drive" button above the left menu is also an iframe, dynamically resized by the script. Notice how there is no unsightly gap between the button and the menu that follows it. Here is the actual page used.


Directions: Developer's View

Step 1: Insert the below script into the HEAD section of your page:

Select All

Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like:

Select All

Read on for configuration instructions.

Configuring the script

To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.

Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the ID entered into the script, so the script knows which IFRAMEs to adjust. You may also change the width attribute (ie: 100%) to a different value, as the script only changes the height of the iframe, but not the width.

Finally, in the script of Step 1, there is a variable that toggles whether browsers that don't support this script (non IE5+/NS6+) should still see the iframe(s) or not. Generally you should choose to hide the iframe in these non compatible browsers (Opera 7 included), as the iframe's height is hardwired in these cases, and part of the external page most likely will be clipped and unviewable to the viewer if the external page's height exceeds the iframe's default height.