2 column css + autoresize iframe - object error
<b>Iframe SSI Script II</b>
http://www.dynamicdrive.com/dynamici...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...
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
CSS Codes
Reply With Quote
Bookmarks