collapse

* Simple Portal Archived Forum

This is an Archive Forum.

The content in this forum may be out-of-date or have been superseded by newer information, and links in forum pages to other sites may not work.
This forum contains archives for future reference.

Visit our thread at Simple Machines Forum for current support.

SMF 2.1 users: EhPortal is a ported version of Simple Portal specifically designed for the SMF 2.1 branch.
Please visit web-develop.ca to download EhPortal and for its support.

* User Info

 
 
Welcome, Guest. Please login or register.

* Who's Online

  • Dot Guests: 699
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • {OCS}MasterSeal: Yup, Still adore SP
    April 21, 2019, 07:08:06 PM
  • {OCS}MasterSeal: STILL love SP :)
    November 24, 2018, 05:05:50 AM
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM

* Recent Posts

Adding Forums Button to Nav bar by jirapon
[August 01, 2019, 09:07:12 AM]


Re: Board Icons by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 04:03:41 PM]


MOVED: Czech translation???? by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 03:04:51 PM]


Board Icons by jirapon
[July 30, 2019, 07:28:44 AM]


Re: Thankyou Simpleportal, by ♦ Ninja ZX-10RR ♦
[July 29, 2019, 09:41:29 AM]

Welcome to SimplePortal.net! You can download SimplePortal from the Downloads Area!

Author Topic: Dynamic Iframe height for blocks containing 3rd party scripts in local server  (Read 6786 times)

0 Members and 1 Guest are viewing this topic.

Offline ramon.cutanda

  • Translator
  • *
  • Posts: 27
  • Gender: Male
    • videoedicion.org
  • SMF Version: 2.1
  • SP Version: None
  • EhPortal Version: 1.22
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=librovisitas

This 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=contacto

Finally, 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=documentacion

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

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="/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/contacto

One final tip. The first time you save the page SimplePortal uses entities, so  < becomes &lt;. Just copy and paste again and you'll get it right the second time ;)

Regards,

« Last Edit: April 04, 2010, 01:49:01 AM by ramon.cutanda »

Offline CasN

  • Semi Newbie
  • *
  • Posts: 6
  • Gender: Male
  • SMF Version: 1.1.11
  • SP Version: 2.3.2
Thanks Ramon,
works perfectly. Will use this as php page so I can transfer user data to other apps for single signon.

Offline Afro

  • Semi Newbie
  • *
  • Posts: 37
    • The African Forum
  • SMF Version: 2.0.11
  • SP Version: 2.3.2
very cool

Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1350
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Thanks Ramon.

I have tried using this same script by Dynamic Drive in one of my current projects and it works fine as long as only 1 iframe (using this script) is being displayed on the page.  When displaying more than 1 iframe on the same page it does not work properly  (this was my experience so I scrapped it).


  Width is set at 100% which may not look proper if the page the iframe is being displayed on has a different color bg then the source and certain browsers idea of transparent bg is white ... like IE!  imao - making patches for IE's display can be a pain (wrap in div with class attribute). 


UD

Offline CasN

  • Semi Newbie
  • *
  • Posts: 6
  • Gender: Male
  • SMF Version: 1.1.11
  • SP Version: 2.3.2
If you use more IFrames on the same page , you must ensure they have different names.
One could also place the javascript in the default header making it available for any page with Iframes. As long as the iframe is defined in the array, it will react.