canadianjameson
05-23-2005, 12: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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
there are other pages involved but here are the two i thought important
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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
there are other pages involved but here are the two i thought important