[Tickets #1468] NEW: External web page only ?30% height (see tkt 1189)

[bugs at bugs.horde.org]

DO NOT REPLY TO THIS MESSAGE. THIS EMAIL ADDRESS IS NOT MONITORED.

Ticket URL: http://bugs.horde.org/ticket/?id=1468
-----------------------------------------------------------------------
 Ticket             | 1468
 Created By         | mike at masi.net
 Summary            | External web page only ?30% height (see tkt 1189)
 Queue              | Horde Base
 Version            | 3.0.2
 State              | Unconfirmed
 Priority           | 2. Medium
 Type               | Bug
 Owners             | 
-----------------------------------------------------------------------


mike at masi.net (2005-03-01 16:49) wrote:

I have seen myself what the author of ticket 1189 speaks of.  Outside of
Horde (on the client), I saved the static page and it's related stylesheets
and javascript and modified the static page for the static css/js as
appropriate.  It seems the fact that the webpage only takes up a fraction of
the block it's in has something to do with the fact that it's in a table. 
When I set the height to 100% and removed all the tables around the block
the iframe expanded to screen length as desired.  Right when I add the
simplest table the height parameter seems to either have no effect or cause
the iframe to disappear.  Setting the height to a pixel value does seem to
work correctly.  Running Win2k w. IE6 SP1

If this feature is by design or unfixable, I stumbled on this code from
Dynamic Drive which may help fix the problem.  The article is on iframes
with dynamic heights.  Note that they appropriately state that their code
will Not work with external pages, which is exactly what we are trying to,
but it helps w. how to change the height dynamically, so if the developer
added the pixel height textbox to the configuration for the block and used
this code, that should work.
Excerpted from http://www.dynamicdrive.com/dynamicindex17/iframessi.htm
<clip>
[SSIInsert] the below script into the HEAD section of your page:

<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("Fire
fox")).split("/")[1]
var FFextraHeight=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="externalpage.htm" scrolling="no" marginwidth="0"
marginheight="0" frameborder="0" vspace="0" hspace="0"
style="overflow:visible; width:100%; display:none"></iframe>


Configuring the script
To configure this script, first, set the variables inside the script of Step
1 per the comments. As you can see, you can specify more than one iframe on
the page in which the script should dynamically resize.
Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the
ID entered into the script, so the script knows which IFRAMEs to adjust. You
may also change the width attribute (ie: 100%) to a different value, as the
script only changes the height of the iframe, but not the width.
Thirdly, in the script of Step 1, there is a variable that toggles whether
browsers that don't support this script (non IE5+/NS6+) should still see the
iframe(s) or not. Generally you should choose to hide the iframe in these
non compatible browsers (Opera 7 included), as the iframe's height is
hardwired in these cases, and part of the external page most likely will be
clipped and unviewable to the viewer if the external page's height exceeds
the iframe's default height.
Last but not least, as shown in the demo above, you can actually use links
on your main page to load a page into your IFRAME (with the IFRAME
automatically resized to that page's height of course). To do so, the link
should look like this:
<a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>
where "myframe" is the ID of the IFRAME you wish to load a page into, and
"external.htm", the path to the page on your site to load. 
</clip>

Thanks for a good product, God Bless and Good Luck.
Mike