|
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
<script
type="text/javascript" src="rzPIframe.js">
/* 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 */
</script>
and the
rzPIframe.js
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 this current page is linked like this:
<a
target="content" href="cherryblossomsHOME.html">HOME</a>
in the text links at the bottom of the lay-out, and the same
way at the top, where the word 'HOME' is an image instead.
Have fun
with this...and don't let anyone tell you that iFrames are a
"NO-NO"
(this one is a Gem!)
Since this a slightly more
complicated lay-out, I'm including some additional (pre-made) pages,
and they are linked to the buttons I have created for the set.
But if you
still have trouble getting it to work, please feel free to
contact me
and I'll see what I can do to help.
Button Font: LHF Californian
Light
Page Title Font: Jacoba
This Font Color: #E4DA8D
Click
HERE to download this entire set as
a zip file
|
