Question about Iframes

Is there any way to code the iframe, containing an external website, to automatically adjust to the size of the website within that iframe? For example, if one page of the website is shorter in height and width, the iframe will automatically adjust itself to match the changes in height and width.

Quote · 14 Oct 2013

https://www.google.com/search?q=adjust+height+and+width+if+iframe+based+on+content&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

https://www.deanbassett.com
Quote · 14 Oct 2013

yes - gimme a minute and i will get you the code i used

 

Edit:


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

<iframe id="myframe" src="http://domain_framing.com" scrolling="no" marginwidth="15" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; align:center; width:100%; display:none"></iframe>

caredesign.net
Quote · 14 Oct 2013

 

yes - gimme a minute and i will get you the code i used

 

Edit:


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

<iframe id="myframe" src="http://domain_framing.com" scrolling="no" marginwidth="15" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; align:center; width:100%; display:none"></iframe>

 Ok so where exactly do I put this code? 

Quote · 14 Oct 2013

i put mine in a php block cause i needed some php variables - but in theory it should work in an html block as well. If used in a php block, add ?> to the beginning and <?php { } to the end

caredesign.net
Quote · 14 Oct 2013

I just inserted this code into an html block for one of my pages and only the header seems to be displayed.

Quote · 14 Oct 2013

try a php block - or put the code directly into the database for that block - plus, i dont know what the length is set at. I personally do not use html blocks if i can avoid it - i use a php block

caredesign.net
Quote · 14 Oct 2013

That is javascript code.  You can also insert it in header file of the template.  Looking at the code, it works off of the iframe id; so it should only affect those iframes with the proper id.  If you only wanted the code on a certain page, then there are ways to accomplish that as well.  If you are inserting the code in an HTML block, you have to switch off the toolbars or try using the HTML view to add the code.

Geeks, making the world a better place
Quote · 15 Oct 2013

 

i put mine in a php block cause i needed some php variables - but in theory it should work in an html block as well. If used in a php block, add ?> to the beginning and <?php { } to the end

 ok so I am using deanos tools to add a php block. So do I just put the above long code into the php block and add these beginning and ending codes to it? I am trying to embed a single site into a page that I have created using an Iframe and I would like the iframe to adjust with each page size of the website inside of the iframe as the user is browsing that site inside of the iframe. I want to make it so users can completely browse another site without leaving my site.

Quote · 15 Oct 2013

No, you do not but the start and end php identifiers in a php block, Dolphin will handle that for you.  Just put the javascript code into that block.

Geeks, making the world a better place
Quote · 15 Oct 2013

Actually in this case GG you do. But backwords.

When using code that normally belongs in a html block in a php block you will have to switch the block to a html block. That done by starting the block with a closing php tag.

?>

Then the html code, Then a tag to switch it back to php.

<?php

However what i normally do with script is use the heredoc method. But everyone has there own way to doing html in a php block. But yes, ProfessorSr is correct. I do it a different way, but the result is the same. It's just that the heredoc method i use allows sticking php variables mid code a bit easier.

I have also been known to wrap the code inside a variable $sCode 'codehere'; then echo the code. But that method requires paying attention to escaping any single quotes inside the code.

What ever method you find easier.




https://www.deanbassett.com
Quote · 15 Oct 2013

@Deano - I would love to see an example of the heredoc method if you dont mind.

caredesign.net
Quote · 15 Oct 2013

Dolphin is full of heredoc examples. This one for example in change_status.php

        echo <<<EOF
<style>
    div.cmt-post-reply {
        position: relative;
    }
</style>
{$sCommentsBlock}
EOF;

Basically heredoc starts with this.

$sCode = <<<EOF

And ends with

EOF;

EOF can be anything. CODE, BEAR, BEER, WHATEVER. The name is not important. Just start and end has to match.

What is between the start and the end is usually javascript or html or both.

The advantage is the code as most html code with script does can contain both double and single quotes and you don't have to escape any of them. This is because what is between the heredoc start end end markers is treated as is. In other words, treated as a literal. This one is a poor example. It does not contain any quotes, so i don't really understand why boonex used heredoc in this case, but whatever.

The ending EOF must be at the beginning of the line. You cannot indent it or it will not work.

Sticking a php variable in the heredoc is also easy. The sample above has one. {$sCommentsBlock} the variable is between {} brackets.

There are some disadvantages. I have not been able to get defines working in heredoc. So BX_DOL_URL_ROOT will not work. It has to be assigned to a variable. I have also had problems with php array variables as well. So it does have it's advantages and disadvantages. I use it most often when i am mixing html and javascript which quite often html will contain double quotes and javascript quite often contains single quotes. So i use heredoc so i don't have to escape any of the quotes. Just makes work with that blend of code far easier.


https://www.deanbassett.com
Quote · 15 Oct 2013

Oh, and one other thing about heredoc.

The variables you put in heredoc is for expansion. The content of the variable what is used. You cannot assign variables inside the heredoc or process php code. heredoc is for displaying results. Think of it as a template.

https://www.deanbassett.com
Quote · 15 Oct 2013

Of course why use a PHP block if it is not going to be executing php code?  Advantages/Disadvantages?

Geeks, making the world a better place
Quote · 15 Oct 2013

@GG - when i first started using dolphin, i attempted to use an html block for code that included javascript. I had that infamous issue where the javascript was not being displayed and such. So, I just used a php block instead. I just stuck with it. The only advantage for me is that if I ever need to go back and add any php variables (as this project has changed several times) then it is easy for me.

caredesign.net
Quote · 15 Oct 2013

Exactly. Quite often in past versions of dolphin, javascript was always striped out.



https://www.deanbassett.com
Quote · 15 Oct 2013

@Deano - thanks for the heredoc example - I did not know that is what that was called when you gave me that as a solution to a javascript issue before.

caredesign.net
Quote · 15 Oct 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.