Script to expand table and iframe

I have a script that expands an iframe width which is in a table. The code has worked before and works in internet explorer. The javascript function is call onclick of the expand arrow.

This is the table code:

<table cellspacing="0" cellpadding="0" style="border: 1px solid #000000;">
    <tbody>
        <tr>
            <td style="background-color: rgb(232, 226, 210);border-bottom-style: solid;border-right-style:solid;border-width:1px;border-bottom-style:solid;border-width:1px;">
                <p class="headings">
                    iWannaGo.co Best Deals 
                    <a onClick="setContract()" title="Minimise Fares Window">
                    <img alt="<" width="20" height="20" src="/wp-content/themes/thesis_18/custom/images/left.png"></a>
                    Expand
                    <a onClick="setExpand()" title="Maximise Fares Window">
                        <img alt=">"  width="20" height="20" src="/wp-content/themes/thesis_18/custom/images/right.png" >
                    </a>
                </p>
            </td>
            <td style="background-color: rgb(232, 226, 210);border-bottom-style:solid;border-width:1px;">
                <p class="headings">Compare Recommended Sites</p>
            </td>
        </tr>
        <tr>
            <td id="fare" style="border-right-style:solid;border-width:1px;vertical-align:top;">
                <iframe src="<?php echo $search_fb; ?>" id="farebuzz" scrolling="auto" width=800 height=400 frameborder="0" align="left" style="overflow-x: hidden;padding-left:10px;padding-right:10px;"></iframe>
              </td>
            <td id="bwix">
                <iframe src="<?php echo $search_bw; ?>" id="bwiz" scrolling="auto" width=300 height=300 frameborder="0"  style=""> </iframe>
            </td>
        </tr>
    </tbody>
</table>

Then the javascript function.

 function setExpand() {
      var iframeElement = parent.document.getElementById('farebuzz');
      var iframeElements = parent.document.getElementById('bwiz');
      var tableElement = document.getElementById('fare');  
      var tableElements = document.getElementById('bwix'); 
      iframeElement.style.height = 400; 
      iframeElement.style.width = 960;
      iframeElements.style.width=150;
      tableElement.style.width=960;
      tableElements.style.width=150; 
 }
 function setContract() {
      var iframeElement = parent.document.getElementById('farebuzz');
      var iframeElements = parent.document.getElementById('bwiz');
      var tableElement = document.getElementById('fare');  
      var tableElements = document.getElementById('bwix'); 
      iframeElement.style.height = 400;
      //100px or 100% 
      iframeElement.style.width = 800;
      //100px or 100% 
      tableElement.style.width=800;
      tableElements.style.width=300;
      iframeElements.style.width=300; 
 }
 function expanddiv() { 
      var padElements = document.getElementById('pad');  
      padElements.style.display='block'; 
 }

Here is a working and not working form of the code:

• working expansion
• not working

The link working expansion works in IE which is what is really开发者_高级运维 confusing.

---

You can't set style.width to a number, it has to be a string and it must include the px suffix:

iframeElement.style.height = "400px";

Edit: Also, consider encoding the angle brackets in your image's alt attribute. It should be:

<img alt="&lt;" ... />
<img alt="&gt;" ... />

This may not be causing immediate problems now, but certainly could in the foreseeable future. Already it's messing up SO's code formatting. :-)