...

View Full Version : review of a script to set iframe height to the height of the page loaded into it



canadianjameson
05-23-2005, 01:23 AM
My friend and I decided to undertake a project a year back and abandonned it because he didnt have time to pursue it. He may be interested again so i'll ask this as a preemptive to that.

have a look at this:
http://www.enviromark.ca/Project/index.htm
go to orders --> completed orders (or other)

basically this page allows us to display the full contents of a Table in an iframe by taking the table height as a variable and applying it as the height of the inframe. the table is contained in a seperate .htm file which is loaded into the iframe

now this will probably only be used on an intranet so theoretically we could force people to use IE (i think i hear Bill Gates cackling manically somewhere)... but I wanted to know if you had any suggestions as to how to improve the script, or other ways in which the same result could be achieved. Mainly though, the script only works in IE so i need help to make it cross-browser.

the idea was our neighbor runs a small bakery and we wanted to give her a program whereby she could enter her order info into a database an it would populate a table (as seen on the page). the database end is my buds area... mine was the web side.

heres the code:
main page


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">

<script type="text/javascript">
/************************************************** ***********************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
************************************************** ***********************/

function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}

return docHt;
}

function setIframeHeight(_mainFrame) {
var iframeWin = window.frames[_mainFrame];
var iframeEl = document.getElementById? document.getElementById(_mainFrame): document.all? document.all[_mainFrame]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + "px";
}
}

function loadIframe(_mainFrame, url) {
if ( window.frames[_mainFrame] ) {
window.frames[_mainFrame].location = url;
return false;
}
else return true;
}
</script>

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
<br>
<iframe src="tabs.htm" name="_tabs" width="100%" height="30" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
<table width="100%" border="0" cellpadding="0" cellspacing=0 style="border-right: solid 1px #BEBEBE;border-left: solid 1px #BEBEBE;border-top: solid 1px #BEBEBE;border-bottom: solid 1px #BEBEBE">
<tr>
<td width="100%"><iframe src="" name="_menu2" width="100%" height="21" scrolling="no" frameborder="0" allowtransparency="true"></iframe></td>
</tr>
</table>
<iframe name="_mainFrame" id="mainSection" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</body>
</html>


table page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../../css/menu2.css" type="text/css" media="screen">

<script type="text/javascript">
function goSetHeight() {
if (parent == window) return;
// arg: id of iframe element this doc is to be loaded into
else parent.setIframeHeight('_mainFrame');
}
</script>

<style type="text/css">
@media print { .notPrinted { display: none; } }
</style>

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0" onload="goSetHeight()">
<table border="0" align="right" cellpadding="0" cellspacing="0" class="notPrinted" style="border-right: solid 1px #BEBEBE;border-left: solid 1px #BEBEBE;border-bottom: solid 1px #BEBEBE">
<tr>
<td><a href="#" onClick="window.print();return false;"><img src="../../images/printGrey.jpg" border="0"></a></td>
</tr>
</table>
<br>
<p align="center"><strong>Completed Orders</strong></p>

<table WIDTH=75% border="0" align="center" style="border-right: solid 1px black;border-left: solid 1px black;border-top: solid 1px black;border-bottom: solid 1px black">
<tr align="center">
<td><strong>Date</strong></td>
<td><strong>Customer</strong></td>
<td><strong>Quantity</strong></td>
<td><strong>Price</strong></td>
<td><strong>Order #</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


there are other pages involved but here are the two i thought important

canadianjameson
05-23-2005, 01:25 AM
if i'm populating this table with cell information from a table... should I use a serverside language to determine the height of the table?

just a thought

Kor
05-23-2005, 02:25 PM
you may try simply get the table's size onload, in the page loaded in iframe, and set the object's (the iframe tag) size as the parent's object.

something based on this (in the page loaded in iframe):

onload=function(){
var w = document.getElementById('tableid').offsetWidth;
var h = document.getElementById('tableid').offsetHeight;
parent.document.getElementsByTagName('iframe')[0].setAttribute('width',w);
parent.document.getElementsByTagName('iframe')[0].setAttribute('height',h);
}

canadianjameson
05-23-2005, 06:54 PM
hmm, are you saying i can use that to replace the entire script kor?

Kor
05-24-2005, 09:55 AM
You learn quite fast, Cranford, except that you should keep close to the modern aproaches:

1. the page must have a doctype, for the begining you may use a transitional one

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
...

2. The transition is to be probably to the strict XHTML, so take care about the case sensitivity and the script type
<script type="text/javascript">
...
</script>

3. Your below placed code is usless, as long as you can use the window.onload event

<script type="text/javascript">
function autoResize(){
...blablacode
}
onload=autoResize;
</script>

or:

<script type="text/javascript">
onload=function(){
...blablacode
}
</script>

4. Unless you definitely need them to be global, make your variables local

function autoResize(){
var newWidth=...
var newHeight=...
...
}

5. There is no need to parse the offset values. There are numbers anyway:

function autoResize(){
var newWidth = document.getElementById('table1').offsetWidth+30;
var newHeight = document.getElementById('table1').offsetHeight+30;
...
}

6. resizeTo is a window's method, not an iframe's (as object) method so that I am affraid that this method woun't work for Mozilla (which is more DOM strict browser type. So that I think safer is to use setAttribute() method

parent.document.getElementsByName('tableFrame')[0].setAttribute('width',newWidth);
parent.document.getElementsByName('tableFrame')[0].setAttribute('height',newHeight)

Kor
05-24-2005, 12:58 PM
As u wish. I wanted only to help you to improve your coding by showing you your mistakes. If you don't stand to learn something new from others (as all of us do here) than probably you are waisting your time and, which is worst, our time, and you should probably try to find a more suitable forum to expand your lack of education there... :rolleyes:

Kor
05-24-2005, 02:01 PM
I have no further comments. Nor I have read yours.

canadianjameson
05-24-2005, 04:56 PM
have i missed something?

Cranford... were his suggestions syntactically valid or not... if there were not you should attack the ideas, not the man. if they were you should learn from them.

remember, he attacked you code... not you. forget that and you loose the battle before it even begins.

Kor, can you mod his code to include your suggestions?

Kor
05-24-2005, 05:18 PM
Kor, can you mod his code to include your suggestions?

Something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<script type="text/javascript">
onload=function(){
var tab = document.getElementById('table1');
var ifr = parent.document.getElementsByName('tableFrame')[0];
ifr.setAttribute('width',tab.offsetWidth+30);
ifr.setAttribute('height',tab.offsetHeight+30)
}
</script>
</head>




remember, he attacked you code... not you. forget that and you loose the battle before it even begins.

What battle? :D I don't debase myself to it's low educational level... :rolleyes:

Harry Armadillo
05-24-2005, 08:35 PM
I'm glad you made a new thread for this! :D

I'd do one thing slightly different from Kor, and set

var ifr = window.frameElement;

allowing the iframe document to access the iframe that holds it, without hardcoding the iframe's name.

Might also be worth testing for the iframe's presence

if(ifr){
ifr.setAttribute('width',tab.offsetWidth+30);
ifr.setAttribute('height',tab.offsetHeight+30)
}

so that if the iframe document is ever opened in its own window it won't throw errors.

canadianjameson
05-24-2005, 09:35 PM
Cranford, EDIT: Kor's right, you're not worth it. kthxbye

Mr. insectivore himself! k, lemme try to see where all this brings me and i'll post the code.
Question: my page has 3 iframes in it... does this still work? var ifr = window.frameElement;
i like the checking for the presence of the iframe... very smooth

Thanks Kor.

p.s: Cranford, don't bother with a responce... its not worth it

canadianjameson
05-24-2005, 10:31 PM
okay, here's what I have so far (which isn't working, but i probably misplaced the code)

one of the page being loaded into the <iframe name="_mainFrame...>
page name = outstanding.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../../css/menu2.css" type="text/css" media="screen">

<style type="text/css">
@media print { .notPrinted { display: none; } }
</style>

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
<div id="wholePage">
<table border="0" align="right" cellpadding="0" cellspacing="0" class="notPrinted" style="border-right: solid 1px #BEBEBE;border-left: solid 1px #BEBEBE;border-bottom: solid 1px #BEBEBE">
<tr>
<td><a href="#" onClick="window.print();return false;"><img src="../../images/printGrey.jpg" border="0"></a></td>
</tr>
</table>
<br>
<p align="center"><strong>Outstanding Orders</strong></p>
<table WIDTH=75% border="0" align="center" style="border-right: solid 1px black;border-left: solid 1px black;border-top: solid 1px black;border-bottom: solid 1px black">
<tr align="center">
<td><strong>Date</strong></td>
<td><strong>Customer</strong></td>
<td><strong>Quantity</strong></td>
<td><strong>Price</strong></td>
<td><strong>Order #</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<script type="text/javascript">
onload=function(){
var tab = document.getElementById('wholePage');
var ifr = parent.document.getElementsByName('_mainFrame')[0];
if(ifr){
ifr.setAttribute('width',tab.offsetWidth+30);
ifr.setAttribute('height',tab.offsetHeight+30)
}
</script>
</body>
</html>


The second level menu bar:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/menu2.css" type="text/css" media="screen">

<script>
function openPages(){
for (var i=0;i<arguments.length;i+=2){
if (arguments[ i + 1]) window.open(arguments[ i ], arguments[ i + 1] )
}
}
</script>

</head>

<body background="images/menu2/tablebgGrey.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" height="21">
<tr>
<td style="border-right: solid 1px #BEBEBE"><a href="images/menu2/outstandingYellow.jpg" onClick="openPages('main/orders/outstanding.htm','_mainFrame'); return showImage(this);"><img src="images/menu2/outstandingGrey.jpg" width="131" height="21" border="0"></a></td>
<td style="border-right: solid 1px #BEBEBE"><a href="images/menu2/completedYellow.jpg" onClick="openPages('main/orders/completed.htm','_mainFrame'); return showImage(this);"><img src="images/menu2/completedGrey.jpg" width="126" height="21" border="0"></a></td>
<td>&nbsp;&nbsp;Something else </td>
</tr>
</table>

<script type="text/javascript">
//global object to remember details of last clicked link
var lastClick=new Object();
lastClick.obj=null;
lastClick.defaultSrc=null; function showImage(oLink){
if (lastClick.obj){
if (lastClick.obj!=oLink){
lastClick.obj.firstChild.src=lastClick.defaultSrc; //revert back previously clicked image
}
else return false; //do nothing, clicked link is clicked again
}

var defaultSrc = oLink.firstChild.src;
oLink.firstChild.src=oLink.href; //change image to clicked mode

//remember last clicked details
lastClick.obj=oLink;
lastClick.defaultSrc=defaultSrc;

return false;
}
</script>


</body>
</html>


First level menu:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First Level Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">

<script>
function openPages(){
for (var i=0;i<arguments.length;i+=2){
if (arguments[ i + 1]) window.open(arguments[ i ], arguments[ i + 1] )
}
}
</script>

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
<table height="30" border="0" align="center" cellpadding="0" cellspacing=0>
<tr align="center">
<td height="30"><a href="images/tabs/ordersYellow.jpg" onClick="openPages('orders.htm','_menu2'); openPages('blank.htm','_mainFrame'); return showImage(this);"><img src="images/tabs/ordersGrey.jpg" width="94" height="30" border="0" /></a></td>
<td height="30"><a href="images/tabs/inventoryYellow.jpg" onClick="openPages('inventory.htm','_menu2','blank.htm','_mainFrame'); return showImage(this);"><img src="images/tabs/inventoryGrey.jpg" width="94" height="30" border="0" /></a></td>
<td height="30"><img src="images/tabs/reportGrey.jpg" width="94" height="30"></td>
</tr>
</table>
<script type="text/javascript">
//global object to remember details of last clicked link
var lastClick=new Object();
lastClick.obj=null;
lastClick.defaultSrc=null; function showImage(oLink){
if (lastClick.obj){
if (lastClick.obj!=oLink){
lastClick.obj.firstChild.src=lastClick.defaultSrc; //revert back previously clicked image
}
else return false; //do nothing, clicked link is clicked again
}

var defaultSrc = oLink.firstChild.src;
oLink.firstChild.src=oLink.href; //change image to clicked mode

//remember last clicked details
lastClick.obj=oLink;
lastClick.defaultSrc=defaultSrc;

return false;
}
</script>

</body>
</html>


finally: index page holding them all together


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>The Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
<br>
<iframe src="tabs.htm" name="_tabs" width="100%" height="30" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
<table width="100%" border="0" cellpadding="0" cellspacing=0 style="border-right: solid 1px #BEBEBE;border-left: solid 1px #BEBEBE;border-top: solid 1px #BEBEBE;border-bottom: solid 1px #BEBEBE">
<tr>
<td width="100%"><iframe src="" name="_menu2" width="100%" height="21" scrolling="no" frameborder="0" allowtransparency="true"></iframe></td>
</tr>
</table>
<iframe name="_mainFrame" id="mainSection" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</body>
</html>


you can see the new code in action here:
http://www.enviromark.ca/ProjectTest/

or the old code functioning here:
http://www.enviromark.ca/Project/

Harry Armadillo
05-24-2005, 11:22 PM
You're missing a closing bracket at the end of your first wad of code
<script type="text/javascript">
onload=function(){
var tab = document.getElementById('wholePage');
var ifr = parent.document.getElementsByName('_mainFrame')[0];
if(ifr){
ifr.setAttribute('width',tab.offsetWidth+30);
ifr.setAttribute('height',tab.offsetHeight+30)
}
}
</script>
I'm also occasionally getting a 'showImage is not defined' error, but I ain't sure why yet.

canadianjameson
05-24-2005, 11:56 PM
awesome, seems to work fine :D

lemme know if you come across the cause of that error



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum