PDA

View Full Version : 2 column css + autoresize iframe - object error



flyer09
10-26-2009, 04:07 PM
<b>Iframe SSI Script II</b>

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Using div link in leftcolumn inside html toc doc to load a doc of content into the contentcolumn iframe

I can get it there by using the "target="MAIN"" but of course no resize

The onload of the document works like a charm, as designed, though the iframe height remains the same for subsequent content regardless of height - a problem when the next document is larger.

Using the provided line of script 'iframe, document' to resize from a link - as described in the problem - from the toc document just gives an error. I have even played around with refresh, but frankly, I am strictly an amateur.

I'm sure it will be something very simple... :o

thanks in advance, here is the basic essential code snippets:

<u>toc.html</u>

[code]

<html>
<head>

<script type="text/javascript">

/**
* This notice must stay intact for legal use
*/

var iframeids=["MAIN"]

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>

<style type="text/css">
body
{
background : transparent;
}

a:visited , a:link , a:active {
font-style: bold;
font-size : 14px;
font-family : Calligraph421 BT;
color : #000000;
background : transparent;
text-decoration : none;
}

a:hover {
font-style: bold;
font-size : 14px;
font-family : Calligraph421 BT;
color : gray;
background : transparent;
text-decoration : none;
}
</style>
</head>

<body>

<div id="firstdocument" STYLE="visibility:visible; overflow:no; padding: 0px 0px 0px 0px; position:absolute; width:70px; height:10px; left:5px; margin-left: 0px; top: 0px; background:transparent;"><a href="firstdocument.html" TARGET="MAIN">Document 1</A>
</div>

<div id="seconddocument" STYLE="visibility:visible; overflow:no; padding: 0px 0px 0px 0px; position:absolute; width:75px; height:10px; left:80px; margin-left: 0px; top: 0px; font-family:Calligraph421 BT; background:transparent;"><a href="seconddocument.html" TARGET="MAIN">Document 2</A>
</div>

<div id="documentsimg" STYLE="visibility:visible; overflow:no; position:absolute; height:80px; left:0px; margin-left: 10px; top: 17px;">

<center>
<iframe src="documentsimg.jpg" height="100" width="160" marginwidth="0" marginheight="0" overflow:no; frameborder="0"> </iframe>
</center>
</div>
</body>
</html>

[code]

At this point I am including the function for resize in toc also because otherwise even my 'target="MAIN" has stopped working.

The goal is to instead use the provided link script - <a href="javascript:loadintoIframe('MAIN, 'firstdocument.html')"> but it errors and doesn't reload the iframe. As it is it reloads without resizing.

<u>Here's the 2 column mainpage code per DD:</u> (<font color="green") btw I placed a colon after the 'Bug Fix Line' comment

[code]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Working copy</title>
<script type="text/javascript">

/***
* IFrame SSI script II- Dy
* Visit DynamicDrive.com for
* This notice must stay inta
**********************/

var iframeids=["MAIN"]

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>

<style type="text/css">
html, body{
height:100%;
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #FFF;
height: 50px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 0px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #FFF;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 10px;
}

</style>

</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube"><iframe src="header.html" width="100%" height="50" top-margin: 15px; marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true" borders="no"></iframe>
</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><iframe name="MAIN" src="firstdocument.html" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><iframe src="toc.html" width="180" height="550" top-margin: 15px; marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true" borders="no"></iframe>
</div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</div>
</div>
</div>
</body>
</html>

[code]

cheers

flyer09
10-29-2009, 04:37 PM
Hi, I am very new at this,

is there something wrong with my post to not get any reply?

what should I do differently please?

thank you