Hi,
SimplePortal is great... but if you want to use a 3rd party script there's an easy way to wrap it inside of a block so that it looks like a part of SimplePorta, specially if you try to mimic your template.
Using an standard iframe is as easy as annoying when the script we want to wrap hasn't got a fixed height.
The solution is called
Iframe SSI script II. Using that code inside of an HTML block you can wrap any 3rd party script inside your SimplePortal. The catch is that it only works with scripts installed on your local server. That's it, you cannot use this script to wrap a site from another server. But it does a great job. Here you have three examples from my site:
This one has a fixed height, so even a normal iframe would have done the job...
http://www.videoedicion.org/foro/index.php?page=librovisitasThis script is quite simple, but has dynamic height. Iframe SSI Script II does a great job here.
http://www.videoedicion.org/foro/index.php?page=contactoFinally, this is a VERY complex script. Because the final height is only defined once ALL the code has been loaded it's not very efficient for wraping heavy pages, specially if they've got a lot of pictures, as the final size will no be defined until all the content has been loaded. Check for yourselves:
http://www.videoedicion.org/foro/index.php?page=documentacionI find this script EXTREMELLY useful and I hope some of you will too.
Just to make things simpler, this is the EXACT HTML content of one of my pages:
<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="/contacto" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
The ONLY thing you have to change in that chunk is within the iframe tag at the end. In my case I'm using
src="/contacto" because the script I'm wraping is in my
/public_html/contactoOne final tip. The first time you save the page SimplePortal uses entities, so < becomes <. Just copy and paste again and you'll get it right the second time
Regards,