This is an In-Line Frame (iFrame)
Please note that not all browsers are configured to support in-line frames,
HOWEVER, thanks to the awesome work of John Davenport Scheuer at Dynamicdrive.com,
this iFrame is rather "special", as it will automatically resize its height to accommodate
all of the content that a page which is displayed here contains...and without the need for an extra scroll bar!
This wonderful script
works in all current versions of Internet Explorer, FireFox, Chrome,
Opera and Safari Browsers, and also on Android phones and tablets.
I can't attest to iPhones/iPads since I don't own one (they're above my pay-grade),
but I haven't received any complaints saying that this "flexible" iFrame doesn't work on an iPhone/iPad.
One piece of advice
for inserting this "flexible" iFrame into any lay-out...
in order to contract properly in all Browsers for pages with less content (shorter pages),
change the DOC Type at the top of your html code to simply <!DOCTYPE HTML> on the pages.
Otherwise, the pages will expand, but if a shorter page is viewed after a long one, the iFrame will
stay expanded to the length of the previous page in FireFox and Chrome Browsers.
Other than that, the only additional requirements for this "flexible" iFrame to work
are this piece of code, inserted into the <HEAD> section of each page that will be opened inside the iFrame
/* Resize Iframe Script © John Davenport Scheuer
As first seen in http://www.dynamicdrive.com/forums
User Name: jscheuer1
This Credit Must Remain for Legal Use */
file that is included in the zipped folder with this set must be
located in the same directory/folder as the pages that reference it.
(If the .js file is located somewhere else, you MUST change the code accordingly to the correct file path!)
In order for the page
links in the top image (or wherever you choose to place them) to load a page
into the iFrame,
give the iFrame itself a NAME (i.e. content) and set each page link's target to reference that specified name.
EXAMPLE: <a target="content" href="name of the page.html">Linked Image</a>
Oh, and due to
"popular demand", I have changed the links to .png format
with transparent background,
so they can now be re-arranged within (or outside of) the top image as desired.
Have fun with this...and don't let anyone tell you that iFrames are a "NO-NO" (this one is a Gem!)
If you have trouble
getting it to work, please feel free to
and I'll see what I can do to help.
This Text Color: #6D985F
This set is designed with one of my own Poser creations
to download the entire set as a zip file.