TinyPortal

Development => Block Codes => Topic started by: akulion on September 17, 2006, 05:10:08 AM

Title: Using Iframes [TIP]
Post by: akulion on September 17, 2006, 05:10:08 AM
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)


<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:


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

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:


<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 (http://path-to-peace.net/misc/iframes2121.html)

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:

<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 (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)

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:



<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:



<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

:D
Title: Re: Using Iframes [TIP]
Post by: Thurnok on September 17, 2006, 08:40:04 AM
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
Title: Re: Using Iframes [TIP]
Post by: akulion on September 17, 2006, 08:42:26 AM
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
Title: Re: Using Iframes [TIP]
Post by: Thurnok on September 17, 2006, 08:48:38 AM
Modified my original post before you posted.. hehe.. at least before I saw you post.. ;)
Title: Re: Using Iframes [TIP]
Post by: akulion on September 17, 2006, 08:53:08 AM
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

Title: Re: Using Iframes [TIP]
Post by: Thurnok on September 17, 2006, 08:57:47 AM
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
Title: Re: Using Iframes [TIP]
Post by: akulion on September 17, 2006, 09:00:42 AM
oh i didnt know - hope you recover really fast - wishing you the best of health.

- Edited first post wordings
Title: Re: Using Iframes [TIP]
Post by: Thurnok on September 17, 2006, 09:09:58 AM
hehe... well, anyone reading it after our few posts probably would have guessed it anyway... hehe
Title: Re: Using Iframes [TIP]
Post by: JDMhustle on October 04, 2006, 08:39:11 PM
Good write up (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fforum.sirfanaticsholland.com%2FSmileys%2Fdefault%2Fafro1.gif&hash=1697ed82266182654afc096444f28e16b5de416f) i also have an Iframe with coppermine on my site, works great!
Title: Re: Using Iframes [TIP]
Post by: akulion on October 04, 2006, 08:56:57 PM
Included part for auto-resizing Iframes in the original post and merged 2 posts to make as one :up:
Title: Re: Using Iframes [TIP]
Post by: tapirul on October 05, 2006, 02:59:27 AM
That's awesome, great job! Thanks. I've three forums on my server, each of them with a different topic.. I wanted to be able to keep an eye on all of them at once, this makes it easier.
ha, I can make them in a cascading manner, the second forum with an iFrame with the third.. They'll scrunch too much, I assume, but it would be interesting...
Title: Re: Using Iframes [TIP]
Post by: rbh on October 07, 2006, 02:24:00 AM
how would i use this for articles? if i have a menu box and create articles to open in iframes like this or am i better off creating multiple html? i may figure it out while messing with it, but i thought i would ask now so if i cant get it you might have an answer for me. ;) thanks!

Title: Re: Using Iframes [TIP]
Post by: akulion on October 07, 2006, 02:29:53 AM
WOW thats the quickest solve to a question ive seen:
Reply #11 on: Today at 20:24
Last Edit: Today at 20:28 by rbh

:2funny: glad it worked for u :up:
Title: Re: Using Iframes [TIP]
Post by: rbh on October 07, 2006, 02:36:09 AM
well, i THOUGHT i had it. :D so the question isnt solved. i was hoping to remove the solved part before it was seen but you are QUICK! :laugh:
Title: Re: Using Iframes [TIP]
Post by: akulion on October 07, 2006, 02:48:26 AM
well with TP articles u dont need to use Iframes since the articles display nicely inside TP itself :up:

but I would not recommend using Iframes for TP articles anyways since it will display a forum inside your existing forum with all the menus and stuff

But if you mean HTML based articles being displayed then its pretty simple.....

In the menu specify the TARGET=
and call it by the Iframe's name

So if your Iframe is called "joe"
then your link contains Target=joe

the rest is magic and it works - try it out - just make sure that u name the Iframe and the target in the links the same :)
Title: Re: Using Iframes [TIP]
Post by: rbh on October 09, 2006, 09:18:26 PM
hey aku......how do you get links to break the iframe and open new windows or with firefox open new tabs? i have tried the usual target=_blank or new but links continue to open within the frame.
Title: Re: Using Iframes [TIP]
Post by: akulion on October 09, 2006, 09:23:00 PM
a normal target defined should work

i even added one to the demo  (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)just now (look under food)

the link should be like this:


<a href="http://google.com" target=_blank>click here</a>



Title: Re: Using Iframes [TIP]
Post by: rbh on October 09, 2006, 09:46:00 PM
thanks akulion, i figured out what i was doing wrong. i use rss2html for my rss feeds and i was setting it to load my rss feed links into the iframes and i needed to place the target=_blank within my feed template.
Title: Re: Using Iframes [TIP]
Post by: akulion on October 09, 2006, 09:46:52 PM
ah oki doki :up: good u got it sorted
Title: Re: Using Iframes [TIP]
Post by: rbh on October 09, 2006, 11:37:20 PM
i'm just glad most you guys have the patience to deal with us ignorant hillybillies ;D usually it turns out that what i ask is something simple yet it escapes me. i swear one of these days i may figure it out! :uglystupid2:

thanks for the help ;)
Title: Re: Using Iframes [TIP]
Post by: akulion on October 09, 2006, 11:38:36 PM
Hillbilly?? Where!!!??
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fwww.my-smileys.de%2Fsmileys2%2FBoomSmilie_anim.gif&hash=477818d97b202e293340d38aa72bc70957494f1a)

lol jk
Title: Re: Using Iframes [TIP]
Post by: WarBirD on October 10, 2006, 05:04:18 PM
This is maybe not fitting in here totally but I have the following question. I would like to include either php or iframe code from my Teamspeak Server, which i could do with www.tsviewer.com ! After registering my Server there, i can generate either php or iframe code to put into a module block for example.

So I tried the BBC/HTML or PHP block thing, put in the text which in iframeÂÃ,´s case looks like:

Quote
<iframe name="tsviewer" allowtransparency="true" src="http://www.tsviewer.com/ts_viewer_pur.php?ID=xxxxxxbg=ffffff&type=000000&type_size=10&type_family=1" width="170" height="400" frameborder="0" style="width: 170px; height: 400px; border:1px solid #000000;"></iframe>

Only Example Code !!!

And then I save it, enable the module block and on the site I only see the code text in the Module. When I go back to the Admin and edit my block, i see it as Teamspeak Status as it is supposed to. Why only in the Editing mode and not on the actual Site ?

Any ideas ?
Title: Re: Using Iframes [TIP]
Post by: akulion on October 10, 2006, 05:07:37 PM
this could be caused because of a problem with the EDITOR in TP
the editor does some strange things and messes up certain codes

So if you are using an editor - try turning it off (under TP settings)
and then try adding the above code to a SCRIPT block
Title: Re: Using Iframes [TIP]
Post by: WarBirD on October 10, 2006, 05:15:28 PM
Turned editor off, tried, still the same. :(
Title: Re: Using Iframes [TIP]
Post by: akulion on October 10, 2006, 05:47:21 PM
i just added ur code to my test site and it works fine

(look in left side blocks)
http://goofy-goobers.com/forum/index.php

the code i used is this:


<iframe name="tsviewer" allowtransparency="true" src="http://www.tsviewer.com/ts_viewer_pur.php?ID=xxxxxxbg=ffffff&type=000000&type_size=10&type_family=1" frameborder="0" style="width: 160px; height: 150px; border:1px solid #000000;"></iframe>


U can adjust the height and width to suit ur needs :up:

Just remember:
- Add it in a SCRIPT block
Title: Re: Using Iframes [TIP]
Post by: WarBirD on October 10, 2006, 06:03:49 PM
Now it works, thx m8. ;)
Title: Re: Using Iframes [TIP]
Post by: akulion on October 10, 2006, 06:06:42 PM
welcome :up:
Title: Re: Using Iframes [TIP]
Post by: Thurnok on October 10, 2006, 06:33:53 PM
yuck.. TS Viewer in an Iframe - ick.. hehe

oh well, the price people pay for wanting only that frame to autorefresh I suppose...  :-X
Title: Re: Using Iframes [TIP]
Post by: WarBirD on October 10, 2006, 06:39:04 PM
Well, any better ideas ? I am open to all tips.
Title: Re: Using Iframes [TIP]
Post by: Thurnok on October 10, 2006, 06:45:44 PM
Not if you want it to autorefresh just the Teamspeak block.  Which is why I assumed you were putting the TS viewer in an iframe.  If that's not the case, then sure ... depending on which version of the ts viewer you are using (there's a few floating around).
Title: Re: Using Iframes [TIP]
Post by: Jpg on October 11, 2006, 03:01:29 AM
When I try to Iframe my topsites I get...

Parse error: syntax error, unexpected '<' in /home/------/public_html/inflamehq/forum/Sources/Load.php(1708) : eval()'d
code(225) : eval()'d code on line 1


I know my load.php is working right....but any solutions?
Title: Re: Using Iframes [TIP]
Post by: akulion on October 11, 2006, 03:05:49 AM
what code are u using and how are you outputting it - as php?

because that error basically means u forgot to put a ; or a ' somewhere
Title: Re: Using Iframes [TIP]
Post by: Jpg on October 11, 2006, 03:11:33 AM
Is Iframe html? XD

LOL....OMG...Sorry for that.

Thanks for the concern.
Title: Re: Using Iframes [TIP]
Post by: akulion on October 11, 2006, 03:16:18 AM
yup Iframes is pure html
:)
Title: Re: Using Iframes [TIP]
Post by: Jpg on October 11, 2006, 03:20:50 AM
Is there anyway to fully intergrate a page?
Because I want to fully intergrate my topsites.
Is that possible?
Title: Re: Using Iframes [TIP]
Post by: akulion on October 11, 2006, 03:24:40 AM
yup its pretty easy

use this custom made code courtesy me who got it from G6 who got it from Lesmond who got it from DD who got it from the guy who made the script who got it from someone else lol

just fill in ur page addy and add this to an article: (near the bottom of the code)


<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)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
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>

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


enjoy - its a code passed down thru generations
Title: Re: Using Iframes [TIP]
Post by: Jpg on October 11, 2006, 04:01:30 AM
Ahhh!! Delete it!! THIS IS TOO GOOD!!
MY EYES ARE UNWORTHY!!

The height isn't going through properly.

Edit: How do I extract data without using an iframe?
Like hardcode php and mix my topsites with my smf....maybe...I don't know...intergrate?
Title: Re: Using Iframes [TIP]
Post by: akulion on October 11, 2006, 03:01:44 PM
the height dosent work !!!
wow - then the script must have a clash with maybe another script ur using on ur pages perhaps - cos that one works for me A-OK

but eitherways whatever the reason may be, to include your PHP scripts directly into a page

just do this in a php block

include './path-to-script';

usually its a good idea to have the script in one of the sub folders of where you are calling it from (i.e. the forum)
Title: Re: Using Iframes [TIP]
Post by: akulion on October 17, 2006, 03:37:18 PM
Hi,

All the users who have been using the "auto-resizing Iframes" script which has been mentioned here (http://www.tinyportal.net/smf/index.php?topic=8653.msg78932#msg78932) should switch over immediately to this new code!

There is a reason for this - your pages are NOT viewable under opera currently! If you go via opera and have a look at those pages which use the auto resize script you will see they will not display!

Thanks to the Doctor of scripts himself at dynamic drive  jscheuer1  (The Mad Professor as he calls himself) we now have a solution!

Please use this script:


<script type="text/javascript">

/***********************************************
* IFrame SSI script III- Ã,© jscheuer1 (http://www.dynamicdrive.com/forums)
* very loosely based upon IFrame SSI script II- Ã,© DynamicDrive
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Set optional Mozilla (recent FF, NS and other Mozilla based browsers)
//height adjustment if needed for your layout to avoid scrollbars.
//example: var mAdjust=14
var mAdjust=0

//////////////////No Need To Edit Below Here////////////////////

function collectWidth(obj){
var wVal=0
var objs=obj.document.getElementsByTagName('*')
for (var i_tem = 0; i_tem < objs.length; i_tem++){
wVal=Math.max(objs[i_tem].offsetWidth, wVal)
}
return wVal;
}

function setClicks(obj){
var links=obj.contentDocument.getElementsByTagName('a')
var iFrameObjs=document.getElementsByTagName('iframe')
for (var i_tem = 0; i_tem < links.length; i_tem++){
for (var j_tem = 0; j_tem < iFrameObjs.length; j_tem++)
if (links[i_tem].target==iFrameObjs[j_tem].name)
links[i_tem].onclick=new Function('parent.'+links[i_tem].target+'.location.replace(this.href);return false;')
else if (links[i_tem].target!=='')
links[i_tem].target=links[i_tem].target
else
links[i_tem].onclick=new Function('parent.'+obj.name+'.location.replace(this.href);return false;')
}
links=document.getElementsByTagName('a')
for (i_tem = 0; i_tem < links.length; i_tem++){
for (j_tem = 0; j_tem < iFrameObjs.length; j_tem++)
if (links[i_tem].target==iFrameObjs[j_tem].name)
links[i_tem].onclick=new Function('window.'+links[i_tem].target+'.location.replace(this.href);return false;')
}
}

function sizeFrame(frameObj){
if ((frameObj.contentDocument && (frameObj.contentDocument.body.offsetHeight||frameObj.contentDocument.documentElement.offsetHeight))||frameObj.Document && frameObj.Document.body.scrollHeight){
if (window.opera)
setClicks(frameObj)
var contentHeight=window.opera? frameObj.contentDocument.documentElement.offsetHeight : frameObj.contentDocument? frameObj.contentDocument.body.offsetHeight+mAdjust : frameObj.Document.body.scrollHeight+4
var contentWidth=window.opera? collectWidth(frameObj.contentDocument) : frameObj.contentDocument? frameObj.contentDocument.documentElement.offsetWidth : frameObj.Document.body.scrollWidth
var frameWidth=frameObj.offsetWidth
if(!window.opera)
frameObj.style.overflow='visible'
frameObj.height = frameWidth<contentWidth? contentHeight+18 : contentHeight+3;
if (window.opera&&frameWidth>=contentWidth)
frameObj.contentDocument.body.style.overflow='hidden'
}
}
</script>
</head>

<iframe name="I3" onload="sizeFrame(this)" src="http://YOURSITE.COM/FILE.HTML" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" height="350" width="100%"></iframe>


It will allow autoresizing of Iframes in IE, FF and Opera. So it is a better script.

Just add your address for the page you want to display at the bottom where it says YOURSITE.COM/FILE.HTML

** added **

if you are still getting small scrollbars after applying the above script then adjust this part according to ur needs:
var mAdjust=0 (it appears a little after the credits for the script at the top)
set it to 4 or 5 or 10 or whatever
Thats all :)

Aku
   

PS: I will leave this topic as stand alone for a few days and then eventually merge with the other Iframes topic - since this is an alert :)
Title: Re: Using Iframes [TIP]
Post by: RoarinRow on October 17, 2006, 07:37:21 PM
Where/how do you use this script?
Title: Re: Using Iframes [TIP]
Post by: akulion on October 17, 2006, 07:53:15 PM
this is just for people using Autoresizing Iframes only. Wherever you have used one - the above code should go in place of the old one.

used in a script box since it is javascript :up:
Title: Re: Using Iframes [TIP]
Post by: RoarinRow on October 17, 2006, 08:12:09 PM
Quote from: akulion on October 17, 2006, 07:53:15 PM
this is just for people using Autoresizing Iframes only. Wherever you have used one - the above code should go in place of the old one.

used in a script box since it is javascript :up:

I C, o.k. thanks akulion   :up:
Title: Re: Using Iframes [TIP]
Post by: Lesmond on October 17, 2006, 08:52:41 PM
Thanks for this Aku :) I use it a lot on my site, will change them as soon as I can
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 12:34:08 AM
welcome :up:
Title: Re: Using Iframes [TIP]
Post by: G6Cad on October 18, 2006, 08:38:13 AM
Thank you Aku, this seem to have fixed the issues i had when viewing the gallery in IE to :)
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 11:00:39 AM
Thanks and thanks to the Mad Professor wherever he may be :up:

lol
Title: Re: Using Iframes [TIP]
Post by: Kiwitje on October 18, 2006, 01:27:01 PM
Hmmm, my Iframes doesn't autoresize :( I Iframed my Coppermine gallery, but when opening, the sizes aint any good :( You have to scroll. What can I do about it?!
Title: Re: Using Iframes [TIP]
Post by: technodragon73 on October 18, 2006, 02:51:08 PM
How would you add this to a php file?  I tried using it to change the template files I use to show a variety of pages I have that I use an iframe but I keep getting parse errors because the php in there confuses some of the javascript with php code and errors out.  I have put it within an echo tag (basically just replaced the iframe line with this code...


        echo '<iframe width="100%" height="1200" src="http://dragontalk.net/coppermine/"></iframe>';


that is the line i was replacing...thanks in advance for any help.
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 03:18:58 PM
Quote from: Kiwitje on October 18, 2006, 01:27:01 PM
Hmmm, my Iframes doesn't autoresize :( I Iframed my Coppermine gallery, but when opening, the sizes aint any good :( You have to scroll. What can I do about it?!

Try this

in the code do u see this part?

var mAdjust=0

its right near the top - a bit after the credits for the script

set it to something like 4 or 10 or 20 - whichever one solves ur problem ;)
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 03:22:08 PM
Quote from: TechnoDragon on October 18, 2006, 02:51:08 PM
How would you add this to a php file?  I tried using it to change the template files I use to show a variety of pages I have that I use an iframe but I keep getting parse errors because the php in there confuses some of the javascript with php code and errors out.  I have put it within an echo tag (basically just replaced the iframe line with this code...


        echo '<iframe width="100%" height="1200" src="http://dragontalk.net/coppermine/"></iframe>';


that is the line i was replacing...thanks in advance for any help.

try this it may work...

First manually edit the code and REPLACE ALL " (double quotes) with ' (single quotes)

Then use this echo statement:

echo " all the code here ";

just put all the code where it says above :)

Title: Re: Using Iframes [TIP]
Post by: Kiwitje on October 18, 2006, 03:40:10 PM
Quote from: akulion on October 18, 2006, 03:18:58 PM
Quote from: Kiwitje on October 18, 2006, 01:27:01 PM
Hmmm, my Iframes doesn't autoresize :( I Iframed my Coppermine gallery, but when opening, the sizes aint any good :( You have to scroll. What can I do about it?!

Try this

in the code do u see this part?

var mAdjust=0

its right near the top - a bit after the credits for the script

set it to something like 4 or 10 or 20 - whichever one solves ur problem ;)

goddamn, you're the best :) Thanks!
Title: Re: Using Iframes [TIP]
Post by: Lesmond on October 18, 2006, 03:50:38 PM
Quote from: akulion on October 18, 2006, 03:18:58 PM

Try this

in the code do u see this part?

var mAdjust=0

its right near the top - a bit after the credits for the script

set it to something like 4 or 10 or 20 - whichever one solves ur problem ;)

Tried that too but it dont work :( but only on one I use ??? The others I use work OK without
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 03:55:07 PM
hhmm try setting it really high

on one of mine i had to set it to 54 to get it working
Title: Re: Using Iframes [TIP]
Post by: Lesmond on October 18, 2006, 04:04:10 PM
I have set from 4 to 100 but it still stays the same :(
/me goes to try 1000
:)
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 04:12:46 PM
loool

whats the page ur using?
Title: Re: Using Iframes [TIP]
Post by: Lesmond on October 18, 2006, 04:29:03 PM
This one (http://www.lesmonds.co.uk/smf/index.php?page=29)
I have it in a custom action, but I have my Gallery in that too using the same script and that works fine
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 04:39:03 PM
yup i think we have hit a limitation on the script

a lot of iframe scripts using Ajax or js seem to not work with 'externally based' sites (sites not on your own domain) - why? something to do with security or something, dont know exactly

the best option for you is to use a normal iframe in this case:


<iframe name="I3" src="http://astore.amazon.co.uk/lesmondsplace-21/202-8298719-1476605?%5Fencoding=UTF8&node=1" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" height="1050" width="100%"></iframe>


the above code will show ur page properly sized :up:
Title: Re: Using Iframes [TIP]
Post by: cyberbillp on October 18, 2006, 05:28:13 PM
How do I get the content of the iframe to use the current theme?
Title: Re: Using Iframes [TIP]
Post by: akulion on October 18, 2006, 05:36:22 PM
u cant by default since the frame is getting a page which is not part of the SMF or TP

but u can try and include the CSS for the theme i the page code manually and it wil somewhat resemble the theme as long as the same ID's are used
Title: Re: Using Iframes [TIP]
Post by: technodragon73 on October 19, 2006, 04:37:06 AM
Quote from: akulion on October 18, 2006, 03:22:08 PM
Quote from: TechnoDragon on October 18, 2006, 02:51:08 PM
How would you add this to a php file?  I tried using it to change the template files I use to show a variety of pages I have that I use an iframe but I keep getting parse errors because the php in there confuses some of the javascript with php code and errors out.  I have put it within an echo tag (basically just replaced the iframe line with this code...


        echo '<iframe width="100%" height="1200" src="http://dragontalk.net/coppermine/"></iframe>';


that is the line i was replacing...thanks in advance for any help.

try this it may work...

First manually edit the code and REPLACE ALL " (double quotes) with ' (single quotes)

Then use this echo statement:

echo " all the code here ";

just put all the code where it says above :)



You are awesome Akul!  That worked perfectly!  I had thought about doing that, but I wasn't sure if you could use quotes to encase an echo statement

Thanks a bunch!
Title: Re: Using Iframes [TIP]
Post by: akulion on October 19, 2006, 06:25:52 AM
welcome :up:
Title: Re: Using Iframes [TIP]
Post by: akulion on October 19, 2006, 04:27:17 PM
topics merged :D