1
MetalHellsAn
Xoops & Dynamic Iframes - Making your Other pages Fit in


I only Downloaded XOOPS last week and am already in love with it. I wanted use XOOPS for a radio station whose website I am designing. Due to the fact the the playist and request system is in itself a separate Entity entirely I went on spreed of searching for a way to make those pages fit in. And This is the result of that work.

What I found was a dynamic Iframe put out by Dynamic Drive and while the Iframe in itself is very beutiful and works wonders at makeing the page in the frame look as if it were apart of the site It required me to add a bit of code to header.php to get it to work in XOOPS This is probably one of the smallest and easyest hacks I'v ever done. And works great. So let me quit rambeling on and tell you how it's done.


Open Header.php

Find:
?>


and After add
<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.116 

//extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var 
dyniframe=new Array()
for (
i=0i<iframeids.lengthi++){
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.alldocument.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"readjustIframefalse)
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(iframeidurl){
if (
document.getElementById)
document.getElementById(iframeid).src=url
}

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

</script>


NOTE: in the code you just added find:

var iframeids=["myframe"]


and follow the instructions above it to name your frame.


Save and close the file once your done.

Now in your Admin control panel create a new block with the following code:

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



NOTE: Change Myframe to whatever you named your frame in the script.

Thats it Now you have a beautiful Iframe with your content in your site.

Notes:
Depending on the size of the page your useing in the iframe sometimes it's best to use only 2 columns instead of 3.


Enjoy,
Angel

2
adrock
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in
  • 2005/8/30 20:32

  • adrock

  • Quite a regular

  • Posts: 291

  • Since: 2004/12/7


it won't frame php pages though...

regular iFrames work just fine for those though....

See the 'Fun' link in my sig....
"Imp Radio Right Now" is an iframe, and so is the jukebox
Affordable Web Hosting - Family - Fun!...and not always in that order!

3
MetalHellsAn
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in

I have framed the sam pages for the station just fine and it is a php page. Very Nice site btw. Looks good.

As I said I used the hack above and put the www.mysite.com/sam/index.php inside the frame and it worked very well. you can see the whole page clicking links that resized the page automatically resizes the frame.

4
adrock
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in
  • 2005/8/31 1:22

  • adrock

  • Quite a regular

  • Posts: 291

  • Since: 2004/12/7


it didn't work for me...just gave me a blank block

Maybe I'll try it again a little later, as it is entirely possible that I made a typo!
Affordable Web Hosting - Family - Fun!...and not always in that order!

5
adrock
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in
  • 2005/8/31 1:59

  • adrock

  • Quite a regular

  • Posts: 291

  • Since: 2004/12/7


ok....did it again and it is showing the content in the iframe...but the iframe is not expanding vertically to show all of the content.


Wanna try it out and see if it shows all 15 of the last played songs?

Here's the stats page to use in the frame;

http://www.adamroark.net/shout_stats/radio2.php


Right now I use a 'regular' iFrame and have the height of the frame set to just the right size to show all 15 songs (the page won't get any 'longer' than that), but if I restart the server, as you may know, I lose the song history and then I am left with a big empty space in the page until 16 songs have played.

This shouldn't make a difference, but the php script is actually 3 seperate pages all rolled into one. It does an fsock open request to see if the stream port is active and streaming, active and not streaming, or not active at all, and returns a different template (included in the same file) depending on the answer.

I'd really like this to work for me....maybe you can help me out?
Affordable Web Hosting - Family - Fun!...and not always in that order!

6
MetalHellsAn
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in

I don't know if your linking to a page on your own server or not but try using the entire url for the (src="") ie.. instead of putting ../radio/radiopage.php put www.mypage.com/radio.php

if this doesn't work Let me see the how your adding the code in header.php also give me a direct ling to the main page your wanting framed.

P.S. don't edit the iframe code at all except to add the address to the page (ie..src="externalpage.htm" ) and the frame id (ie..id="myframe") becuse I'm not quite sure why it isn't working for you.

Here's a link to the site I'm building the frame I used is right there on the main page.

(don't be harsh I'm still building it...lol..

7
Lance_
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in
  • 2005/8/31 13:06

  • Lance_

  • Home away from home

  • Posts: 983

  • Since: 2004/1/12


Note that the script will not work with urls outside the domain it is installed in. They say it cannot query the page sizes prior if not in the same domain.


I use this script in conjunction with the myiframe module on my gdl-tech site. Added the script as an include in my theme and slightly modified the myiframe template.


Cheers
GDL-Web.com :: Website development.
Xoopslance.com::Freelancing and Projects
thelionsden-arena.net:: Clan/League/Ladder Hosting

8
MetalHellsAn
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in

Well this must be the strangest Thing, I'v used this iframe lot's of times in conjuction with many scripts and never ever had a problem. Very Very Strange to me.

9
adrock
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in
  • 2005/9/1 18:23

  • adrock

  • Quite a regular

  • Posts: 291

  • Since: 2004/12/7


I am of the opinion that this script is for SAM specifically...as it does not work for ANY other page, whether it is on the same server as the script or not.

www.imp96ss.com is where the header file w/script is located.

http://www.imp96ss.com/shout_stats/radio2.php is the page I am trying to frame dynamically, and as you can see, it is on the same server.

the code I am using in the block looks like this;
Quote:
<iframe id="myframe" src="http://www.imp96ss.com/shout_stats/radio2.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>


the script in the header looks like this;
Quote:
<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", "myframe2"]

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


So, in theory, it should work with no problems. However, the best I've ever gotten it to do is frame about 250px worth of the vertical page

Also, I notice that it is not consistent in what it returns.
(feeling frustrated at the moment )

[EDIT]
As I am currently at home passing more kidney stones (up to number 63 this week ), I took a break...walked around a bit...came back and fixed some minor typos on my part, and have it working for one page...but am still not getting it to work for another one.

Lance & MetalHellsAngel, are you aware of any dynamic iframe scripts that WILL work with a remote server location? or minimally a php parser that will replicate the information from the remote location so that I can use it in the dynamic frame? <---this is what I have done in this instance, but the parser is specific for the ShoutCast server info...I need to find one that will work for the request jukebox page.....

Thanks for all the help and info
Affordable Web Hosting - Family - Fun!...and not always in that order!

10
MetalHellsAn
Re: Xoops & Dynamic Iframes - Making your Other pages Fit in

Ok I framed your page easily you can see it Here Now from what I can tell you have missed some of the instructions.

Look at the code you inserted in header.php and find

Quote:
var iframeids=["myframe"]


the Myframe is the name of the frame your using you can add multiple frame names into this to use multiple frames on your website.

in the code you insterted in header.php there were these instructions right above the code I told you to locate.

Quote:
Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:


You have to name your frame name it somethile radio2 so that it looks like this.

Quote:
var iframeids=["Radio2"]


Now you have to make name the frame code in your block by editing the block you made. the iframe code would look like this

Quote:
<iframe id="Radio2" src="http://www.imp96ss.com/shout_stats/radio2.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>


Now the next time you want to use a dynamic iframe you go into header.php find

Quote:
var iframeids=["Radio2"]


and add a new name for the new frame so it loooks like this

Quote:
var iframeids=["Radio2", "secondframe"]


then you would create another block and put the iframe code in so it looks like this

Quote:
<iframe id="SecondFrame" src="www.mywebsite.com/secondpage.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>



I hope this helps you

Angel

Login

Who's Online

263 user(s) are online (175 user(s) are browsing Support Forums)


Members: 0


Guests: 263


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits