Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    review of a script to set iframe height to the height of the page loaded into it

    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
    Code:
    <!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:
    Code:
    <!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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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);
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hmm, are you saying i can use that to replace the entire script kor?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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)
    Last edited by Kor; 05-24-2005 at 09:07 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I have no further comments. Nor I have read yours.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Kor, can you mod his code to include your suggestions?
    Something like this:
    PHP Code:
    <!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? I don't debase myself to it's low educational level...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm glad you made a new thread for this!

    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.

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Last edited by canadianjameson; 05-24-2005 at 08:48 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Code:
    <!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:
    Code:
    <!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:
    Code:
    <!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
    Code:
    <!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/
    Last edited by canadianjameson; 05-24-2005 at 09:45 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're missing a closing bracket at the end of your first wad of code
    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.

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    awesome, seems to work fine

    lemme know if you come across the cause of that error
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •