Using Iframes [TIP]

[akulion]

Hi,

Often people ask how they can have external pages displayed within their Tiny Portal page, and the solution is Iframes.

Iframes are declared in your standard SCRIPT block in Tiny Portal via the Block Manager.

The basic Iframe tag  is declared using the following code: (the following code takes into consideration Iframe incompatible browsers)

Code: [Select]

<IFRAME SRC="hello.html" WIDTH=450 HEIGHT=100>
If you can see this, your browser doesn't
understand IFRAME.  However, we'll still
<A HREF="hello.html">link</A>
you to the file.
</IFRAME>


The above code displays an Iframe if the users browser can read Iframes, however if they are using some 3rd class cheap browser which cannot read Iframes (even in this day and age) then it simply displays the message in the code along with a link to the page you would like them to see.

Iframes can be customized using different attributes/properties, they are as follows:

• HEIGHT height of the inline frame
• WIDTH width of the inline frame
• NAME name of this inline frame
• FRAMEBORDER if the frame should have a border around it
• MARGINWIDTH internal left/right margin for the frame
• MARGINHEIGHT internal top/bottom margin for the frame
• SCROLLING if the frame should have scroll bars
• ALIGN alignment of the frame object to text around it
• VSPACE space above and below the frame
• HSPACE space to the left and right of the frame

=================================================

Using Iframe names to target links into the Iframe

Using frame names is a very useful technique since you can have links in a menu on your page somewhere (preferrably near the Iframe) to change the content of the Iframes without having to refresh the whole page.

The code for the Iframe using 3 links to target into the Iframe is as follows:

Code: [Select]

<TABLE ALIGN=CENTER BORDER=1 BGCOLOR="#FFFFCC">
<TR>
<TD><H4>Facts About Beavers</H4></TD>
</TR>
<TR>
<TD>
<A HREF="BeaverHabitat.html" TARGET="BeaverFacts">Habitats</A> | <A HREF="BeaverEat.html" TARGET="BeaverFacts">Food</A> | <A HREF="BabyBeavers.html" TARGET="BeaverFacts">Baby Beavers</A>
</TD>
</TR>
<TR>
<TD>
<IFRAME
    SRC="BeaverHabitat.html"
    NAME="BeaverFacts"
    WIDTH=300 HEIGHT=200>
</IFRAME>
</TD>
</TR>
</TABLE>

Notice in the above code that we have enclosed our links and Iframe inside a table. There are 3 links which have the attribute TARGET="BeaverFacts" telling the browser that the page must be loaded in the frame with the name "BeaverFacts"

Next we have declared an Iframe and given it the name "BeaverFacts", this is where each of the 3 links will open up.

To see an example of how this works Please Click Here

You can also put the address for external pages in your links, just make sure you have the correct target set.

================================================

Customizing your IFrame

Using the list of attributes in the first part of this post you can make your Iframe look in different manners. For example if you want a heavily bordered Iframe with a thick border you would use:

Code: [Select]

<IFRAME SRC="BeaverHabitat.html" WIDTH=150 HEIGHT=150 FRAMEBORDER=10>
The above code will give your frame a really thick border, to get rid of it altogether set it to 0.

Additionally you can align our Iframe left right or center.

You can also use the VSPACE and HSPACE attributes to set a distance between the text inside your Iframe and its borders.

Play around with the different attributes to see what results you get

=======================================

Auto Resizing Iframes

This particular script posted here can be used in a block or articles to show an Auto resizing Iframe, just make sure of 2 things:

- Pages in the Iframe MUST be on the same domain (no external pages)

Details about this script and code Click Here

TP Specific Code for auto-resizing Iframes

The above linked page serves as credits for the script maker and also for people who want to read more on this....As for Tiny Portal and using this Script in SPECIFIC - here is how to do it.

Step 1:

Create a SCRIPT Block on your left or right panel (depending on where you place your menu)

Add to it this code:

Code: [Select]


<a href="javascript:loadintoIframe('myframe', 'YOURFILE.HTML')">YOUR MENU TEXT</a>
<br>
<a href="javascript:loadintoIframe('myframe', 'YOURFILE.HTML')">YOUR MENU TEXT</a>
<br>
<a href="javascript:loadintoIframe('myframe', 'YOURFILE.HTML')">YOUR MENU TEXT</a>


In the above code please replace YOURFILE.HTML with the name of your file (which MUST be located in your forum root - or on the same domain, in which case you should use a full address) Note: the above code creates 3 links, to lessen remove one of the <a href tags, to add more links copy and paste one of the <a href tags

Step 2:

Create a center SCRIPT block (this is where the content will be displayed when someone clicks the links)

To it add this code:

Code: [Select]


<head>
<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>
</head>



<iframe id="myframe" src="YOUR FILE.HTML" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>


In the above code all you need to change is at the bottom where it says YOUR FILE.HTML, put the name of your file which will be displayed by 'default' when the user first enters the page.

Thats all there is to it! Enjoy your new Auto-resizing Iframes

[Thurnok]

If you are talking about the <IFRAME> tag, then no... it does not need to be a document on the same domain.  At least in the strict sense of the word.  The IFRAME tag supports a standard URI (of which URL is a subset as is URN).  This can be any page, anywhere.

Now, as far as the Legal sense, there is no current legal presedence for inline framing a publicly available website though some companies are trying to get legal presedence set as they feel it can be misleading to users that access the site via some other site.

Legal-ness aside, an IFRAME can indeed have any page loaded into it.  Now, there are various scripts that have been written to specifically access and utilize IFRAME tags where they (based on the way it was developed) tell you that the document must be a localized (on the same domain as the document with the IFRAME tag in it) such as the one you linked to.

That is the IFrame SSI script II using Ajax.  Good for auto-resizing an IFRAME but does restrict you to local documents by design.  I misread your first paragraph, but that's because it was a bit misstated.. hehe

[akulion]

Yes you are right about general IFrames there

But I was speaking about the script in particular the link points to

They have written it to restrict it to the same domain

But it would be really cool if it could link externally too

[Thurnok]

Modified my original post before you posted.. hehe.. at least before I saw you post..

[akulion]

lol u are 100% right about misstated paragraph

i was thinking "locally" at that time assuming everyone else knows im talking about that script lol

[Thurnok]

Well, I'm still on drugs from my surgery (couple more days probably) so for me, I might misread just about anything right now.  LOL

[akulion]

oh i didnt know - hope you recover really fast - wishing you the best of health.

- Edited first post wordings

[Thurnok]

hehe... well, anyone reading it after our few posts probably would have guessed it anyway... hehe

[JDMhustle]

Good write up i also have an Iframe with coppermine on my site, works great!

[akulion]

Included part for auto-resizing Iframes in the original post and merged 2 posts to make as one :up: