Solved

URGENT 500 Editable Select Box

Posted on 2006-06-13
20
748 Views
Last Modified: 2008-01-16
Hello Experts,

I found a perfect example of editing a select box... but i can't get it to work :(

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

If i just copy the code straight from site into a new page it works fine but i seem to be having problems using it within my table.

Can someone please send me a sample of another one that will work or give me a solution to fixing this one.

I am posting working code and not working code after this.

Thanks in advance


Dave G
0
Comment
Question by:davecestria
  • 11
  • 9
20 Comments
 
LVL 6

Author Comment

by:davecestria
ID: 16894323
WORKING CODE***************

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-85864-2";
urchinTracker();
</script>      
      <style type="text/css">
      body{
            background-image:url('../../images/heading3.gif');
            background-repeat:no-repeat;
            padding-top:85px;      
            font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
            font-size:0.9em;
            line-height:130%;

      }
      
      
      .selectBoxArrow{
            margin-top:1px;
            float:left;
            position:absolute;
            right:1px;
            

      }      
      .selectBoxInput{
            border:0px;
            padding-left:1px;
            height:16px;
            position:absolute;
            top:0px;
            left:0px;
      }

      .selectBox{
            border:1px solid #7f9db9;
            height:20px;      
      
      }
      .selectBoxOptionContainer{
            position:absolute;
            border:1px solid #7f9db9;
            height:100px;
            background-color:#FFF;
            left:-1px;
            top:20px;
            visibility:hidden;
            overflow:auto;
      }
      .selectBoxAnOption{
            font-family:arial;
            font-size:12px;
            cursor:default;
            margin:1px;
            overflow:hidden;
            white-space:nowrap;
      }
      </style>
      <script type="text/javascript">
      /************************************************************************************************************
      (C) www.dhtmlgoodies.com, September 2005
      
      This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.      
      
      Terms of use:
      You are free to use this script as long as the copyright message is kept intact. However, you may not
      redistribute, sell or repost it without our permission.
      
      Thank you!
      
      www.dhtmlgoodies.com
      Alf Magne Kalleland
      
      ************************************************************************************************************/      
      
      // Path to arrow images
      var arrowImage = './images/select_arrow.gif';      // Regular arrow
      var arrowImageOver = './images/select_arrow_over.gif';      // Mouse over
      var arrowImageDown = './images/select_arrow_down.gif';      // Mouse down

      
      var selectBoxIds = 0;
      var currentlyOpenedOptionBox = false;
      var editableSelect_activeArrow = false;
      

      
      function selectBox_switchImageUrl()
      {
            if(this.src.indexOf(arrowImage)>=0){
                  this.src = this.src.replace(arrowImage,arrowImageOver);      
            }else{
                  this.src = this.src.replace(arrowImageOver,arrowImage);
            }
            
            
      }
      
      function selectBox_showOptions()
      {
            if(editableSelect_activeArrow && editableSelect_activeArrow!=this){
                  editableSelect_activeArrow.src = arrowImage;
                  
            }
            editableSelect_activeArrow = this;
            var optionDiv = document.getElementById('selectBoxOptions' + this.id.replace(/[^\d]/g,''));
            if(optionDiv.style.display=='block'){
                  optionDiv.style.display='none';
                  this.src = arrowImageOver;      
            }else{                  
                  optionDiv.style.display='block';
                  this.src = arrowImageDown;      
                  if(currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv)currentlyOpenedOptionBox.style.display='none';      
                  currentlyOpenedOptionBox= optionDiv;                  
            }
      }
      
      function selectOptionValue()
      {
            var parentNode = this.parentNode.parentNode;
            var textInput = parentNode.getElementsByTagName('INPUT')[0];
            textInput.value = this.innerHTML;      
            this.parentNode.style.display='none';      
            document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImageOver;
      }
      var activeOption;
      function highlightSelectBoxOption()
      {
            if(this.style.backgroundColor=='#316AC5'){
                  this.style.backgroundColor='';
                  this.style.color='';
            }else{
                  this.style.backgroundColor='#316AC5';
                  this.style.color='#FFF';                  
            }      
            
            if(activeOption){
                  activeOption.style.backgroundColor='';
                  activeOption.style.color='';                  
            }
            activeOption = this;
            
      }
      
      function createEditableSelect(dest)
      {

            dest.className='selectBoxInput';            
            var div = document.createElement('DIV');
            div.style.styleFloat = 'left';
            div.style.width = dest.offsetWidth + 16 + 'px';
            div.style.position = 'relative';
            div.id = 'selectBox' + selectBoxIds;
            var parent = dest.parentNode;
            parent.insertBefore(div,dest);
            div.appendChild(dest);      
            div.className='selectBox';
            div.style.zIndex = 10000 - selectBoxIds;

            var img = document.createElement('IMG');
            img.src = arrowImage;
            img.className = 'selectBoxArrow';
            
            img.onmouseover = selectBox_switchImageUrl;
            img.onmouseout = selectBox_switchImageUrl;
            img.onclick = selectBox_showOptions;
            img.id = 'arrowSelectBox' + selectBoxIds;

            div.appendChild(img);
            
            var optionDiv = document.createElement('DIV');
            optionDiv.id = 'selectBoxOptions' + selectBoxIds;
            optionDiv.className='selectBoxOptionContainer';
            optionDiv.style.width = div.offsetWidth-2 + 'px';
            div.appendChild(optionDiv);
            
            if(dest.getAttribute('selectBoxOptions')){
                  var options = dest.getAttribute('selectBoxOptions').split(';');
                  var optionsTotalHeight = 0;
                  var optionArray = new Array();
                  for(var no=0;no<options.length;no++){
                        var anOption = document.createElement('DIV');
                        anOption.innerHTML = options[no];
                        anOption.className='selectBoxAnOption';
                        anOption.onclick = selectOptionValue;
                        anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px';
                        anOption.onmouseover = highlightSelectBoxOption;
                        optionDiv.appendChild(anOption);      
                        optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
                        optionArray.push(anOption);
                  }
                  if(optionsTotalHeight > optionDiv.offsetHeight){                        
                        for(var no=0;no<optionArray.length;no++){
                              optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px';       
                        }      
                  }            
                  optionDiv.style.display='none';
                  optionDiv.style.visibility='visible';
            }
            
            selectBoxIds = selectBoxIds + 1;
      }      
      
      </script>
</head>
<body>
<form>
<p>This widget uses javascript to transform this:</p>
<table border="0">
      <tr>
            <td>Where do you come from?</td>
            <td><input type="text" name="myText_ex" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States"></td>
      </tr>
      <tr>
            <td>What is your name?</td>
            <td><input type="text" name="myText_ex2" value="" selectBoxOptions="Amy;Andrew;Carol;Jennifer;Jim;Tim;Tommy;Vince"></td>
      </tr>
</table>
<p>Into this:</p>
<table border="0">
      <tr>
            <td>Where do you come from?</td>
            <td><input type="text" name="myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States"></td>
      </tr>
      <tr>
            <td>What is your name?</td>
            <td><input type="text" name="myText2" value="" selectBoxOptions="Amy;Andrew;Carol;Jennifer;Jim;Tim;Tommy;Vince"></td>
      </tr>
</table>
<p>I.e.: A combination of text- and selectbox. You can type in a value or choose from the list</p>
<p>The only thing you have to do to make this work is to add an attribute "selectBoxOptions" to one of your text inputs:<br><br>
&lt;input type="text" name="myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States">
<br><br>
And then simply call a javascript function that creates the editable select box:<br><br>
&lt;script type="text/javascript"><br>
createEditableSelect(document.forms[0].myText);<br>
&lt;/script>
</form>

<script type="text/javascript">
createEditableSelect(document.forms[0].myText);
createEditableSelect(document.forms[0].myText2);
</script>
<!-- Kontera ContentLink™  -->
<SCRIPT LANGUAGE="JavaScript">
var dc_UnitID = 14;
var dc_PublisherID = 3695;
var dc_AdLinkColor = 'blue';
var dc_adprod='ADL';
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></SCRIPT>
<!-- Kontera ContentLink™  --></body>
</html>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894376


I would try putting the scripts after the end body tag....
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894420


Sees to work fine for me in IE and FF ....what issue are you seeing?
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894439
NOT WORKING*****************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=SiteTitle%></title>
<style type="text/css">
<!--
.style2 {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 10px;
      color: #003B8C;
}
.style323 {color: #FFCC00;
      font-size: 9px;
      font-family: Arial, Helvetica, sans-serif;
}
.style7 {
      color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: bold;
}
.style13 {color: #003B8C; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
body,td,th {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      color: #003B8C;
}
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
a:link {
      color: #003B8C;
}
.style15 {color: #FFFFFF; font-size: 10px; }
}
-->
</style>
      <style type="text/css">
      html{
            width:100%;
             /* overflow-x:hidden; */
      }
      #mainContainer{
            width:99%;
            margin:0 auto;
            text-align:left;
            background-color:#FFF;
      }
      #dragableElementsParentBox{
            padding:0px;      /* Air */
      }
      .smallArticle,.bigArticle{
            float:left;
            border:1px solid #000;
            background-color:#DDD;
            padding:2px;
            margin-right:2px;
            margin-bottom:2px;
      }
      .smallArticle img,.bigArticle img{
            float:left;
            padding:2px;
      }
      .smallArticle .rightImage,.bigArticle .rightImage{
            float:right;
      }
      .bigArticle{
            width:100%;
      }
      .clear{
            clear:both;
      }
      #rectangle{
            float:left;
            border:1px dotted #F00;      /* Red border */
            background-color:#FFF;
      }
      #insertionMarker{      /* Don't change the rules for the insertionMarker */
            width:6px;
            position:absolute;
            display:none;
      }
      #insertionMarker img{      /* Don't change the rules for the insertionMarker */
            float:left;
      }            
      #dragDropMoveLayer{      /* Dragable layer - Not need if you're using 'rectangle' mode */
            position:absolute;
            display:none;
            border:1px solid #000;
            filter:alpha(opacity=40);      /* 50% opacity , i.e. transparency */
            opacity:0.4 ;      /* 50% opacity , i.e. transparency */

      }
      /* START SELECT TEXT BOX STYLES */
      .selectBoxArrow{
            margin-top:1px;
            float:left;
            position:absolute;
            right:1px;
            

      }      
      .selectBoxInput{
            border:0px;
            padding-left:1px;
            height:16px;
            position:absolute;
            top:0px;
            left:0px;
      }

      .selectBox{
            border:1px solid #7f9db9;
            height:20px;      
      
      }
      .selectBoxOptionContainer{
            position:absolute;
            border:1px solid #7f9db9;
            height:100px;
            background-color:#FFF;
            left:-1px;
            top:20px;
            visibility:hidden;
            overflow:auto;
      }
      .selectBoxAnOption{
            font-family:arial;
            font-size:12px;
            cursor:default;
            margin:1px;
            overflow:hidden;
            white-space:nowrap;
      }
      .style16 {font-size: 8pt}
.style17 {      color: #FFFFFF;
      font-weight: bold;
}
</style>
<script src="../../content/js/MoveRows.js"></script>
<script type="text/javascript">
      window.onload = initdragableElements;
</script>
      <script type="text/javascript">
      var arrowImage = '/lgcm/content/images/select_arrow.gif';      // Regular arrow
      var arrowImageOver = '/lgcm/content/images/select_arrow_over.gif';      // Mouse over
      var arrowImageDown = '/lgcm/content/images/select_arrow_down.gif';      // Mouse down

      
      var selectBoxIds = 0;
      var currentlyOpenedOptionBox = false;
      var editableSelect_activeArrow = false;
      

      
      function selectBox_switchImageUrl()
      {
            if(this.src.indexOf(arrowImage)>=0){
                  this.src = this.src.replace(arrowImage,arrowImageOver);      
            }else{
                  this.src = this.src.replace(arrowImageOver,arrowImage);
            }
            
            
      }
      
      function selectBox_showOptions()
      {
            if(editableSelect_activeArrow && editableSelect_activeArrow!=this){
                  editableSelect_activeArrow.src = arrowImage;
                  
            }
            editableSelect_activeArrow = this;
            var optionDiv = document.getElementById('selectBoxOptions' + this.id.replace(/[^\d]/g,''));
            if(optionDiv.style.display=='block'){
                  optionDiv.style.display='none';
                  this.src = arrowImageOver;      
            }else{                  
                  optionDiv.style.display='block';
                  this.src = arrowImageDown;      
                  if(currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv)currentlyOpenedOptionBox.style.display='none';      
                  currentlyOpenedOptionBox= optionDiv;                  
            }
      }
      
      function selectOptionValue()
      {
            var parentNode = this.parentNode.parentNode;
            var textInput = parentNode.getElementsByTagName('INPUT')[0];
            textInput.value = this.innerHTML;      
            this.parentNode.style.display='none';      
            document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImageOver;
      }
      var activeOption;
      function highlightSelectBoxOption()
      {
            if(this.style.backgroundColor=='#316AC5'){
                  this.style.backgroundColor='';
                  this.style.color='';
            }else{
                  this.style.backgroundColor='#316AC5';
                  this.style.color='#FFF';                  
            }      
            
            if(activeOption){
                  activeOption.style.backgroundColor='';
                  activeOption.style.color='';                  
            }
            activeOption = this;
            
      }
      
      function createEditableSelect(dest)
      {

            dest.className='selectBoxInput';            
            var div = document.createElement('DIV');
            div.style.styleFloat = 'left';
            div.style.width = dest.offsetWidth + 16 + 'px';
            div.style.position = 'relative';
            div.id = 'selectBox' + selectBoxIds;
            var parent = dest.parentNode;
            parent.insertBefore(div,dest);
            div.appendChild(dest);      
            div.className='selectBox';
            div.style.zIndex = 10000 - selectBoxIds;

            var img = document.createElement('IMG');
            img.src = arrowImage;
            img.className = 'selectBoxArrow';
            
            img.onmouseover = selectBox_switchImageUrl;
            img.onmouseout = selectBox_switchImageUrl;
            img.onclick = selectBox_showOptions;
            img.id = 'arrowSelectBox' + selectBoxIds;

            div.appendChild(img);
            
            var optionDiv = document.createElement('DIV');
            optionDiv.id = 'selectBoxOptions' + selectBoxIds;
            optionDiv.className='selectBoxOptionContainer';
            optionDiv.style.width = div.offsetWidth-2 + 'px';
            div.appendChild(optionDiv);
            
            if(dest.getAttribute('selectBoxOptions')){
                  var options = dest.getAttribute('selectBoxOptions').split(';');
                  var optionsTotalHeight = 0;
                  var optionArray = new Array();
                  for(var no=0;no<options.length;no++){
                        var anOption = document.createElement('DIV');
                        anOption.innerHTML = options[no];
                        anOption.className='selectBoxAnOption';
                        anOption.onclick = selectOptionValue;
                        anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px';
                        anOption.onmouseover = highlightSelectBoxOption;
                        optionDiv.appendChild(anOption);      
                        optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
                        optionArray.push(anOption);
                  }
                  if(optionsTotalHeight > optionDiv.offsetHeight){                        
                        for(var no=0;no<optionArray.length;no++){
                              optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px';       
                        }      
                  }            
                  optionDiv.style.display='none';
                  optionDiv.style.visibility='visible';
            }
            
            selectBoxIds = selectBoxIds + 1;
      }      
      
      </script>
</head>
<body>
<!--#include file="../../global/header.asp"-->
<table width="100%"  border="0" cellspacing="0" cellpadding="2">
  <tr valign="top">
    <td width="15%"><!--#include file="../../global/menu_left.asp"--></td>
    <td width="85%">
      <table width="98%"  border="0" align="center" cellpadding="2" cellspacing="0">
      <tr>
        <td valign="top"><!--#include file="../../global/menu_top.asp"-->
<br></td>
      </tr>
      <tr>
        <td valign="top"><table width="97%"  border="0" align="center" cellpadding="2" cellspacing="0">
          <tr>
            <td width="20%" bgcolor="#003B8C" class="style7"><%=RunName%> - Details. </td>
            <td width="80%"><div align="right">Print Driver Runsheet | Debrief | Delete </div></td>
          </tr>
        </table>
          <table width="97%"  border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#003B8C">
            <tr>
              <th height="21" valign="top" bordercolor="#FFFFFF" background="../../content/images/body_bg.png"><form action="default.asp?action=changeorder&uid=<%=Request.QueryString("uid")%>" method="POST" name="Moveable" id="Moveable">
                <div align="left">
                  <div id="mainContainer" width="100%">
                    <!-- START DRAGABLE CONTENT -->
                    <div id="dragableElementsParentBox">
                      <%
                                totalCube = 0.000
                          do while not CDrsC.EOF
                          totalCube = totalCube + FormatNumber(CDrsC("CustomerCube"),3)
                          %>
                      <div class="bigArticle" dragablebox="true" id="Customer<%=CDrsC("CustomerID")%>">
                        <table width="97%"  border="0" cellspacing="0" cellpadding="2">
                          <tr>
                            <td width="6%"><img src="../../content/images/move_up-down.png" alt="Click + Hold to Move" width="18" height="24"></td>
                            <td width="18%"><strong><%=CDrsC("CustomerName")%>
</strong></td>
                            <td width="11%"><strong><%=CDrsC("CustomerPostcode")%></strong></td>
                            <td width="15%"><strong><%=CDrsC("CustomerSAC")%></strong></td>
                            <td width="10%"><strong><%=CDrsC("CustomerCube")%></strong></td>
                            <td width="10%"><strong><%=CDrsC("CustomerDate")%></strong></td>
                            <td width="10%"><strong><%=CDrsC("CustomerStatus")%></strong></td>
                            <td width="20%"><strong><a href="/lgcm/customers/view/default.asp?customer=<%=CDrsC("CustomerID")%>&now=<%=Now()%>">View</a> | <a href="/lgcm/customers/modify/default.asp?customer=<%=CDrsC("CustomerID")%>&now=<%=Now()%>">Modify</a> | <a href="runs/view/default.asp?action=removesingle&customer=<%=CDrsC("CustomerID")%>" onClick="return confirm('Are You Sure You Want To Remove This Customer From <%=RunName%>?');">Remove</a>
                              <input name="CustID" type="hidden" id="CustID" value="<%=CDrsC("CustomerID")%>">
                            </strong></td>
                          </tr>
                        </table>
                      </div>
                      <%
                              strPCList = strPCList & CDrsC("CustomerPostcode") & "|"
                              CDrsC.MoveNext
                              LOOP
                              %>
                      <div class="clear" id="clear"></div>
                    </div>
                    <!-- END DRAGABLE CONTENT -->
                    <div align="center">
                      <input name="itemOrder" type="hidden" id="itemOrder" value="">
                      <input name="action" type="hidden" id="action" value="changeorder">
                      <input name="uid" type="hidden" id="uid" value="<%=Request.QueryString("uid")%>">
                      <input type="submit" value="Save Run Order">
                      <br>                
                        </div>
                  </div>
                  <!-- REQUIRED DIVS -->
                  <div id="insertionMarker"> <img src="images/marker_top.gif"> <img src="images/marker_middle.gif" id="insertionMarkerLine"> <img src="images/marker_bottom.gif"> </div>
                  <!-- END REQUIRED DIVS -->
                </div>
                        </form>
                    <%
'                                arrPostcodes = Split("DH3+2RZ|" & strPCList & "DH3+2RZ","|")
'                              totalHours = 0
'                              totalMins = 0
'                              totalMiles = 0.00
                              
'                              for MMPC = 0 to UBound(arrPostcodes)-1
'                                    arrThisTrip = Split(GetMultiMapInfo(arrPostcodes(MMPC),arrPostcodes(MMPC+1)),"|")
'                                    totalHours = totalHours + arrThisTrip(0)
'                                    totalMins = totalMins + arrThisTrip(1)
'                                    totalMiles = totalMiles + arrThisTrip(2)
                                    'Response.Write arrPostcodes(MMPC) & " to " & arrPostcodes(MMPC+1) & ", Hours: " & arrThisTrip(0) & ", Mins: " & arrThisTrip(1)
                                    'Response.Write ", Miles: " & FormatNumber(arrThisTrip(2),1) & "<br>"
'                              next
                              
'                              totalHours = (totalHours * 60) + totalMins
'                              totalHours = FormatNumber(totalHours / 60,2)
'                              tmpTH = Split(totalHours,".")
'                              totalHours = tmpTH(0)
'                              totalMins = Int(tmpTH(1) * 0.6)
                    %>
              <br>
              <form action="default.asp?action=save&uid=<%=Request.QueryString("uid")%>" method="post">
                      <table width="97%"  border="0" cellspacing="0" cellpadding="2">
                  <tr>
                    <td bgcolor="#003B8C"><div align="left" class="style17">Run Details </div></td>
                    <td>&nbsp;</td>
                    <td bgcolor="#003B8C"><div align="left" class="style17">Run Stats</div></td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Vehicle</strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" value="<%=CDrs("RunVehicle")%>" size="20">
                    </div></td>
                    <td><div align="left">Total Cube </div></td>
                    <td><div align="left"><%=FormatNumber(totalCube,3)%></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td width="15%"><div align="left"><strong> Name </strong></div></td>
                    <td width="35%"><div align="left">
                      <input name="textfield" type="text" value="<%=CDrs("RunName")%>" size="16">
                    </div></td>
                    <td width="15%"><div align="left"><strong>Total Drops </strong></div></td>
                    <td width="35%"><div align="left"><%=CDrsC.RecordCount%></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                    </tr>
                  <tr>
                    <td><div align="left"><strong> Date </strong></div></td>
                    <td><div align="left"><%=CDrs("RunDate")%></div></td>
                    <td><p align="left"><strong>Est Distance</strong></p>
                      </td>
                    <td><div align="left"><%=FormatNumber(totalMiles,1)%> <span class="style16">Miles,</span> <%=FormatNumber(totalMiles*1.609,1)%> <span class="style16">Kilometers. </span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>ID </strong></div></td>
                    <td><div align="left"><%=CDrs("RunUniqueID")%></div></td>
                    <td><div align="left"><strong>Est  Time</strong></div></td>
                    <td><div align="left"><%=totalHours%> <span class="style16">Hours,</span> <%=totalMins%> <span class="style16">Minutes. </span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Contract </strong></div></td>
                    <td><div align="left">
                      <select name="select">
                          <option value="Homebase Kitchens">Homebase Kitchens</option>
                          <option value="White Goods">White Goods</option>
                      </select>
                    </div></td>
                    <td><div align="left"><strong>Est Cost </strong></div></td>
                    <td>
                                <div align="left">
                                    <%
                              estCost = 0
                              estCost = estCost + 45 'Rental
                              estCost = estCost + 6.50 'Insurance
                              estCost = estCost + (totalMiles / 30) * 3.75 'Fuel
                              estCost = estCost + (totalHours * 5.70) * 2 'Wages (Hours)
                              if totalMins >= 45 then
                                    estCost = estCost + (0.75 * 5.70) * 2
                              end if
                              if totalMins < 44.9 and totalMins > 30 then
                                    estCost = estCost + (0.50 * 5.70) * 2
                              end if
                              if totalMins <= 30 and totalMins >= 15 then
                                    estCost = estCost + (0.25 * 5.70) * 2
                              end if
                              Response.Write "£" & FormatNumber(estCost,2)
                              %>
                                  </div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong> Driver </strong></div></td>
                    <td align="left">
                      <input type="text" name="Driver" value="" selectBoxOptions="Dave Gibson1;Kevin Mines1;Chris Mines1">
                    </td>
                    <td><div align="left"><strong>Status</strong></div></td>
                    <td><div align="left"><%=SafeRep(CDrs("RunStatus"),"","")%></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong> Mate </strong></div></td>
                    <td><div align="left">
                      <input type="text" name="Mate" value="" selectBoxOptions="Dave Gibson;Kevin Mines;Chris Mines">
                    </div></td>
                    <td><div align="left"><strong>Actual Distance </strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" size="6" value="<%if CDrs("RunMiles") <> "" or CDrs("RunMiles") <> 0 then Response.Write FormatNumber(CDrs("RunMiles"),1) else Response.Write "0.0" end if%>">
                        <span class="style16">(miles) </span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Contact</strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" value="<%=CDrs("RunContact")%>" size="20">
                    </div></td>
                    <td><div align="left"><strong>Actual Time </strong></div></td>
                    <td><div align="left"><span class="style16">
                        <input name="textfield" type="text" size="2" value="<%if CDrs("RunTotalTimeH") <> "" or CDrs("RunTotalTimeH") <> 0 then Response.Write CDrs("RunTotalTimeH") else Response.Write "0" end if%>">
                        hours,
                          <input name="textfield" type="text" size="2" value="<%if CDrs("RunTotalTimeM") <> "" or CDrs("RunTotalTimeM") <> 0 then Response.Write CDrs("RunTotalTimeM") else Response.Write "0" end if%>">
                        minutes.</span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Start Time </strong></div></td>
                    <td><div align="left">
                      <select name="Start" id="Start">
                          <option value=""<%if CDrs("RunStartTime") = "" or ISNull(CDrs("RunStartTime")) then%> selected<%end if%>>Time</option>
                          <option value="00:00"<%if CDrs("RunStartTime") = "00:00" then%> selected<%end if%>>00:00</option>
                          <option value="00:15"<%if CDrs("RunStartTime") = "00:15" then%> selected<%end if%>>00:15</option>
                          <option value="00:30"<%if CDrs("RunStartTime") = "00:30" then%> selected<%end if%>>00:30</option>
                          <option value="00:45"<%if CDrs("RunStartTime") = "00:45" then%> selected<%end if%>>00:45</option>
                          <option value="01:00"<%if CDrs("RunStartTime") = "01:00" then%> selected<%end if%>>01:00</option>
                          <option value="01:15"<%if CDrs("RunStartTime") = "01:15" then%> selected<%end if%>>01:15</option>
                          <option value="01:30"<%if CDrs("RunStartTime") = "01:30" then%> selected<%end if%>>01:30</option>
                          <option value="01:45"<%if CDrs("RunStartTime") = "01:45" then%> selected<%end if%>>01:45</option>
                          <option value="02:00"<%if CDrs("RunStartTime") = "02:00" then%> selected<%end if%>>02:00</option>
                          <option value="02:15"<%if CDrs("RunStartTime") = "02:15" then%> selected<%end if%>>02:15</option>
                          <option value="02:30"<%if CDrs("RunStartTime") = "02:30" then%> selected<%end if%>>02:30</option>
                          <option value="02:45"<%if CDrs("RunStartTime") = "02:45" then%> selected<%end if%>>02:45</option>
                          <option value="03:00"<%if CDrs("RunStartTime") = "03:00" then%> selected<%end if%>>03:00</option>
                          <option value="03:15"<%if CDrs("RunStartTime") = "03:15" then%> selected<%end if%>>03:15</option>
                          <option value="03:30"<%if CDrs("RunStartTime") = "03:30" then%> selected<%end if%>>03:30</option>
                          <option value="03:45"<%if CDrs("RunStartTime") = "03:45" then%> selected<%end if%>>03:45</option>
                          <option value="04:00"<%if CDrs("RunStartTime") = "04:00" then%> selected<%end if%>>04:00</option>
                          <option value="04:15"<%if CDrs("RunStartTime") = "04:15" then%> selected<%end if%>>04:15</option>
                          <option value="04:30"<%if CDrs("RunStartTime") = "04:30" then%> selected<%end if%>>04:30</option>
                          <option value="04:45"<%if CDrs("RunStartTime") = "04:45" then%> selected<%end if%>>04:45</option>
                          <option value="05:00"<%if CDrs("RunStartTime") = "05:00" then%> selected<%end if%>>05:00</option>
                          <option value="05:15"<%if CDrs("RunStartTime") = "05:15" then%> selected<%end if%>>05:15</option>
                          <option value="05:30"<%if CDrs("RunStartTime") = "05:30" then%> selected<%end if%>>05:30</option>
                          <option value="05:45"<%if CDrs("RunStartTime") = "05:45" then%> selected<%end if%>>05:45</option>
                          <option value="06:00"<%if CDrs("RunStartTime") = "06:00" then%> selected<%end if%>>06:00</option>
                          <option value="06:15"<%if CDrs("RunStartTime") = "06:15" then%> selected<%end if%>>06:15</option>
                          <option value="06:30"<%if CDrs("RunStartTime") = "06:30" then%> selected<%end if%>>06:30</option>
                          <option value="06:45"<%if CDrs("RunStartTime") = "06:45" then%> selected<%end if%>>06:45</option>
                          <option value="07:00"<%if CDrs("RunStartTime") = "07:00" then%> selected<%end if%>>07:00</option>
                          <option value="07:15"<%if CDrs("RunStartTime") = "07:15" then%> selected<%end if%>>07:15</option>
                          <option value="07:30"<%if CDrs("RunStartTime") = "07:30" then%> selected<%end if%>>07:30</option>
                          <option value="07:45"<%if CDrs("RunStartTime") = "07:45" then%> selected<%end if%>>07:45</option>
                          <option value="08:00"<%if CDrs("RunStartTime") = "08:00" then%> selected<%end if%>>08:00</option>
                          <option value="08:15"<%if CDrs("RunStartTime") = "08:15" then%> selected<%end if%>>08:15</option>
                          <option value="08:30"<%if CDrs("RunStartTime") = "08:30" then%> selected<%end if%>>08:30</option>
                          <option value="08:45"<%if CDrs("RunStartTime") = "08:45" then%> selected<%end if%>>08:45</option>
                          <option value="09:00"<%if CDrs("RunStartTime") = "09:00" then%> selected<%end if%>>09:00</option>
                          <option value="09:15"<%if CDrs("RunStartTime") = "09:15" then%> selected<%end if%>>09:15</option>
                          <option value="09:30"<%if CDrs("RunStartTime") = "09:30" then%> selected<%end if%>>09:30</option>
                          <option value="09:45"<%if CDrs("RunStartTime") = "09:45" then%> selected<%end if%>>09:45</option>
                          <option value="10:00"<%if CDrs("RunStartTime") = "10:00" then%> selected<%end if%>>10:00</option>
                          <option value="10:15"<%if CDrs("RunStartTime") = "10:15" then%> selected<%end if%>>10:15</option>
                          <option value="10:30"<%if CDrs("RunStartTime") = "10:30" then%> selected<%end if%>>10:30</option>
                          <option value="10:45"<%if CDrs("RunStartTime") = "10:45" then%> selected<%end if%>>10:45</option>
                          <option value="11:00"<%if CDrs("RunStartTime") = "11:00" then%> selected<%end if%>>11:00</option>
                          <option value="11:15"<%if CDrs("RunStartTime") = "11:15" then%> selected<%end if%>>11:15</option>
                          <option value="11:30"<%if CDrs("RunStartTime") = "11:30" then%> selected<%end if%>>11:30</option>
                          <option value="11:45"<%if CDrs("RunStartTime") = "11:45" then%> selected<%end if%>>11:45</option>
                          <option value="12:00"<%if CDrs("RunStartTime") = "12:00" then%> selected<%end if%>>12:00</option>
                          <option value="12:15"<%if CDrs("RunStartTime") = "12:15" then%> selected<%end if%>>12:15</option>
                          <option value="12:30"<%if CDrs("RunStartTime") = "12:30" then%> selected<%end if%>>12:30</option>
                          <option value="12:45"<%if CDrs("RunStartTime") = "12:45" then%> selected<%end if%>>12:45</option>
                          <option value="13:00"<%if CDrs("RunStartTime") = "13:00" then%> selected<%end if%>>13:00</option>
                          <option value="13:15"<%if CDrs("RunStartTime") = "13:15" then%> selected<%end if%>>13:15</option>
                          <option value="13:30"<%if CDrs("RunStartTime") = "13:30" then%> selected<%end if%>>13:30</option>
                          <option value="13:45"<%if CDrs("RunStartTime") = "13:45" then%> selected<%end if%>>13:45</option>
                          <option value="14:00"<%if CDrs("RunStartTime") = "14:00" then%> selected<%end if%>>14:00</option>
                          <option value="14:15"<%if CDrs("RunStartTime") = "14:15" then%> selected<%end if%>>14:15</option>
                          <option value="14:30"<%if CDrs("RunStartTime") = "14:30" then%> selected<%end if%>>14:30</option>
                          <option value="14:45"<%if CDrs("RunStartTime") = "14:45" then%> selected<%end if%>>14:45</option>
                          <option value="15:00"<%if CDrs("RunStartTime") = "15:00" then%> selected<%end if%>>15:00</option>
                          <option value="15:15"<%if CDrs("RunStartTime") = "15:15" then%> selected<%end if%>>15:15</option>
                          <option value="15:30"<%if CDrs("RunStartTime") = "15:30" then%> selected<%end if%>>15:30</option>
                          <option value="15:45"<%if CDrs("RunStartTime") = "15:45" then%> selected<%end if%>>15:45</option>
                          <option value="16:00"<%if CDrs("RunStartTime") = "16:00" then%> selected<%end if%>>16:00</option>
                          <option value="16:15"<%if CDrs("RunStartTime") = "16:15" then%> selected<%end if%>>16:15</option>
                          <option value="16:30"<%if CDrs("RunStartTime") = "16:30" then%> selected<%end if%>>16:30</option>
                          <option value="16:45"<%if CDrs("RunStartTime") = "16:45" then%> selected<%end if%>>16:45</option>
                          <option value="17:00"<%if CDrs("RunStartTime") = "17:00" then%> selected<%end if%>>17:00</option>
                          <option value="17:15"<%if CDrs("RunStartTime") = "17:15" then%> selected<%end if%>>17:15</option>
                          <option value="17:30"<%if CDrs("RunStartTime") = "17:30" then%> selected<%end if%>>17:30</option>
                          <option value="17:45"<%if CDrs("RunStartTime") = "17:45" then%> selected<%end if%>>17:45</option>
                          <option value="18:00"<%if CDrs("RunStartTime") = "18:00" then%> selected<%end if%>>18:00</option>
                          <option value="18:15"<%if CDrs("RunStartTime") = "18:15" then%> selected<%end if%>>18:15</option>
                          <option value="18:30"<%if CDrs("RunStartTime") = "18:30" then%> selected<%end if%>>18:30</option>
                          <option value="18:45"<%if CDrs("RunStartTime") = "18:45" then%> selected<%end if%>>18:45</option>
                          <option value="19:00"<%if CDrs("RunStartTime") = "19:00" then%> selected<%end if%>>19:00</option>
                          <option value="19:15"<%if CDrs("RunStartTime") = "19:15" then%> selected<%end if%>>19:15</option>
                          <option value="19:30"<%if CDrs("RunStartTime") = "19:30" then%> selected<%end if%>>19:30</option>
                          <option value="19:45"<%if CDrs("RunStartTime") = "19:45" then%> selected<%end if%>>19:45</option>
                          <option value="20:00"<%if CDrs("RunStartTime") = "20:00" then%> selected<%end if%>>20:00</option>
                          <option value="20:15"<%if CDrs("RunStartTime") = "20:15" then%> selected<%end if%>>20:15</option>
                          <option value="20:30"<%if CDrs("RunStartTime") = "20:30" then%> selected<%end if%>>20:30</option>
                          <option value="20:45"<%if CDrs("RunStartTime") = "20:45" then%> selected<%end if%>>20:45</option>
                          <option value="21:00"<%if CDrs("RunStartTime") = "21:00" then%> selected<%end if%>>21:00</option>
                          <option value="21:15"<%if CDrs("RunStartTime") = "21:15" then%> selected<%end if%>>21:15</option>
                          <option value="21:30"<%if CDrs("RunStartTime") = "21:30" then%> selected<%end if%>>21:30</option>
                          <option value="21:45"<%if CDrs("RunStartTime") = "21:45" then%> selected<%end if%>>21:45</option>
                          <option value="22:00"<%if CDrs("RunStartTime") = "22:00" then%> selected<%end if%>>22:00</option>
                          <option value="22:15"<%if CDrs("RunStartTime") = "22:15" then%> selected<%end if%>>22:15</option>
                          <option value="22:30"<%if CDrs("RunStartTime") = "22:30" then%> selected<%end if%>>22:30</option>
                          <option value="22:45"<%if CDrs("RunStartTime") = "22:45" then%> selected<%end if%>>22:45</option>
                          <option value="23:00"<%if CDrs("RunStartTime") = "23:00" then%> selected<%end if%>>23:00</option>
                          <option value="23:15"<%if CDrs("RunStartTime") = "23:15" then%> selected<%end if%>>23:15</option>
                          <option value="23:30"<%if CDrs("RunStartTime") = "23:30" then%> selected<%end if%>>23:30</option>
                          <option value="23:45"<%if CDrs("RunStartTime") = "23:45" then%> selected<%end if%>>23:45</option>
                      </select>
                    </div></td>
                    <td><div align="left"><strong>Actual Income </strong></div></td>
                    <td><div align="left"><span class="style16">&pound;</span>                          <input name="textfield" type="text" value="<%if CDrs("RunIncome") <> "" or CDrs("RunIncome") <> 0 then Response.Write FormatNumber(CDrs("RunIncome"),2) else Response.Write "0.00" end if%>" size="6">
                    </div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Finish Time </strong></div></td>
                    <td><div align="left"><%=safeRep(CDrs("RunFinishTime"),"","")%></div></td>
                    <td><div align="left">Actual Cost </div></td>
                    <td><div align="left"><span class="style16">&pound;</span>
                          <input name="textfield" type="text" size="6" value="<%if CDrs("RunCost") <> "" or CDrs("RunCost") <> 0 then Response.Write FormatNumber(CDrs("RunCost"),2) else Response.Write "0.00" end if%>">
                    </div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Comments</strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" value="<%=CDrs("RunComments")%>" size="20">
                    </div></td>
                    <td><div align="left"><strong>Profit / Loss </strong></div></td>
                    <td><div align="left"><%if CDrs("RunIncome") <> "" and ISNumeric(CDrs("RunIncome")) and CDrs("RunCost") <> "" and ISNumeric(CDrs("RunCost")) then%><%="£" & FormatNumber(CDrs("RunIncome")-CDrs("RunCost"),2)%><%else%><%="£<font color='red'>0.00</font> - <font size=1>Figures Required To Calculate</font>"%><%end if%></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"></div></td>
                    <td><div align="left">
                    </div></td>
                    <td><div align="left"></div></td>
                    <td><div align="left"></div></td>
                  </tr>
                  <tr>
                    <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>
                  </tr>
                </table>
              </form>
                    <script type="text/javascript">
                        createEditableSelect(document.forms[1].Driver);
                        createEditableSelect(document.forms[1].Mate);
                    </script>

                    </th>
            </tr>
          </table></td>
      </tr>
    </table></td>
  </tr>
</table>
<br>
<!--#include file="../../global/footer.asp"-->
</body>
</html>
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894454
Thanks for your comments, but i know that code is working fine, its when i try to use it in my normal page it fails. I will upload it so you can see what i mean.

Give me a minute
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894505
       
The driver and Mate input seem to be in form[2] not forms[1]

        <script type="text/javascript">
                    createEditableSelect(document.forms[1].Driver);
                    createEditableSelect(document.forms[1].Mate);
                 </script>
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894508
http://cestriadistribution.com/lgcm/run.asp?uid=285860076

If you scroll down the page you will see what i mean... where its got driver and mate there are problems.

I'm not all that familiar with Javascript :o( so have no idea how to fix it or whats going wrong coz i copied everything exactly how DHTMLGoodies told me too.
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894527


You might want to try just givin your inputs an id and using that to reference them. Then it doesn't matter what form they are in.

<input id="driver" name="driver" ....>

  <script type="text/javascript">
                    createEditableSelect(document.getElementById("Driver"));
 
                 </script>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894555

They seem to be working fine here too:  What are they doing wrong?

http://cestriadistribution.com/lgcm/run.asp?uid=285860076  
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894614
Are you looking at the right options? Driver and Mate?

They are not showing at all, just an arrow next to Driver and normal text field for Mate.

I tried using GetElementById but that didnt work either.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894664

I see the problem is only in IE.. works fine in FF.  
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894735

Working for me in IE now.. I just moved the script after the body tag... did you try that?
0
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 500 total points
ID: 16894784

I just verified that was what causing a problem in IE. seem to work find now in Both IE and FF.


.
.
.

</body>
                    <script type="text/javascript">
                        createEditableSelect(document.forms[1].Driver);
                        createEditableSelect(document.forms[1].Mate);
                    </script>

</html>
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894815
I have tried that, its still not working, where abouts after the body tag did you move it too? i just moved it to the first line underneath. Its an internal application, we only use IE. Thanks.
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894837
GENIUS :o) thank you sooo much, this has been rattling my brain all day lol.

I owe you a pint.
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894846

I just paste the working code:  



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>LGCM - Cestria Distribution</title>
<style type="text/css">
<!--
.style2 {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 10px;
      color: #003B8C;
}
.style323 {color: #FFCC00;
      font-size: 9px;
      font-family: Arial, Helvetica, sans-serif;
}
.style7 {
      color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: bold;
}
.style13 {color: #003B8C; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
body,td,th {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      color: #003B8C;
}
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
a:link {
      color: #003B8C;
}
.style15 {color: #FFFFFF; font-size: 10px; }
}
-->
</style>
      <style type="text/css">
      html{
            width:100%;
             /* overflow-x:hidden; */
      }
      #mainContainer{
            width:99%;
            margin:0 auto;
            text-align:left;
            background-color:#FFF;
      }
      #dragableElementsParentBox{
            padding:0px;      /* Air */
      }
      .smallArticle,.bigArticle{
            float:left;
            border:1px solid #000;
            background-color:#DDD;
            padding:2px;
            margin-right:2px;
            margin-bottom:2px;
      }
      .smallArticle img,.bigArticle img{
            float:left;
            padding:2px;
      }
      .smallArticle .rightImage,.bigArticle .rightImage{
            float:right;
      }
      .bigArticle{
            width:100%;
      }
      .clear{
            clear:both;
      }
      #rectangle{
            float:left;
            border:1px dotted #F00;      /* Red border */
            background-color:#FFF;
      }
      #insertionMarker{      /* Don't change the rules for the insertionMarker */
            width:6px;
            position:absolute;
            display:none;
      }
      #insertionMarker img{      /* Don't change the rules for the insertionMarker */
            float:left;
      }            
      #dragDropMoveLayer{      /* Dragable layer - Not need if you're using 'rectangle' mode */
            position:absolute;
            display:none;
            border:1px solid #000;
            filter:alpha(opacity=40);      /* 50% opacity , i.e. transparency */
            opacity:0.4 ;      /* 50% opacity , i.e. transparency */

      }
      /* START SELECT TEXT BOX STYLES */
      .selectBoxArrow{
            margin-top:1px;
            float:left;
            position:absolute;
            right:1px;
            

      }      
      .selectBoxInput{
            border:0px;
            padding-left:1px;
            height:16px;
            position:absolute;
            top:0px;
            left:0px;
      }

      .selectBox{
            border:1px solid #7f9db9;
            height:20px;      
      
      }
      .selectBoxOptionContainer{
            position:absolute;
            border:1px solid #7f9db9;
            height:100px;
            background-color:#FFF;
            left:-1px;
            top:20px;
            visibility:hidden;
            overflow:auto;
      }
      .selectBoxAnOption{
            font-family:arial;
            font-size:12px;
            cursor:default;
            margin:1px;
            overflow:hidden;
            white-space:nowrap;
      }
      .style16 {font-size: 8pt}
.style17 {      color: #FFFFFF;
      font-weight: bold;
}
</style>
<script src="content/js/MoveRows.js"></script>
<script type="text/javascript">
      window.onload = initdragableElements;
</script>
      <script type="text/javascript">
      var arrowImage = '/lgcm/content/images/select_arrow.gif';      // Regular arrow
      var arrowImageOver = '/lgcm/content/images/select_arrow_over.gif';      // Mouse over
      var arrowImageDown = '/lgcm/content/images/select_arrow_down.gif';      // Mouse down

      
      var selectBoxIds = 0;
      var currentlyOpenedOptionBox = false;
      var editableSelect_activeArrow = false;
      

      
      function selectBox_switchImageUrl()
      {
            if(this.src.indexOf(arrowImage)>=0){
                  this.src = this.src.replace(arrowImage,arrowImageOver);      
            }else{
                  this.src = this.src.replace(arrowImageOver,arrowImage);
            }
            
            
      }
      
      function selectBox_showOptions()
      {
            if(editableSelect_activeArrow && editableSelect_activeArrow!=this){
                  editableSelect_activeArrow.src = arrowImage;
                  
            }
            editableSelect_activeArrow = this;
            var optionDiv = document.getElementById('selectBoxOptions' + this.id.replace(/[^\d]/g,''));
            if(optionDiv.style.display=='block'){
                  optionDiv.style.display='none';
                  this.src = arrowImageOver;      
            }else{                  
                  optionDiv.style.display='block';
                  this.src = arrowImageDown;      
                  if(currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv)currentlyOpenedOptionBox.style.display='none';      
                  currentlyOpenedOptionBox= optionDiv;                  
            }
      }
      
      function selectOptionValue()
      {
            var parentNode = this.parentNode.parentNode;
            var textInput = parentNode.getElementsByTagName('INPUT')[0];
            textInput.value = this.innerHTML;      
            this.parentNode.style.display='none';      
            document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImageOver;
      }
      var activeOption;
      function highlightSelectBoxOption()
      {
            if(this.style.backgroundColor=='#316AC5'){
                  this.style.backgroundColor='';
                  this.style.color='';
            }else{
                  this.style.backgroundColor='#316AC5';
                  this.style.color='#FFF';                  
            }      
            
            if(activeOption){
                  activeOption.style.backgroundColor='';
                  activeOption.style.color='';                  
            }
            activeOption = this;
            
      }
      
      function createEditableSelect(dest)
      {

            dest.className='selectBoxInput';            
            var div = document.createElement('DIV');
            div.style.styleFloat = 'left';
            div.style.width = dest.offsetWidth + 16 + 'px';
            div.style.position = 'relative';
            div.id = 'selectBox' + selectBoxIds;
            var parent = dest.parentNode;
            parent.insertBefore(div,dest);
            div.appendChild(dest);      
            div.className='selectBox';
            div.style.zIndex = 10000 - selectBoxIds;

            var img = document.createElement('IMG');
            img.src = arrowImage;
            img.className = 'selectBoxArrow';
            
            img.onmouseover = selectBox_switchImageUrl;
            img.onmouseout = selectBox_switchImageUrl;
            img.onclick = selectBox_showOptions;
            img.id = 'arrowSelectBox' + selectBoxIds;

            div.appendChild(img);
            
            var optionDiv = document.createElement('DIV');
            optionDiv.id = 'selectBoxOptions' + selectBoxIds;
            optionDiv.className='selectBoxOptionContainer';
            optionDiv.style.width = div.offsetWidth-2 + 'px';
            div.appendChild(optionDiv);
            
            if(dest.getAttribute('selectBoxOptions')){
                  var options = dest.getAttribute('selectBoxOptions').split(';');
                  var optionsTotalHeight = 0;
                  var optionArray = new Array();
                  for(var no=0;no<options.length;no++){
                        var anOption = document.createElement('DIV');
                        anOption.innerHTML = options[no];
                        anOption.className='selectBoxAnOption';
                        anOption.onclick = selectOptionValue;
                        anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px';
                        anOption.onmouseover = highlightSelectBoxOption;
                        optionDiv.appendChild(anOption);      
                        optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
                        optionArray.push(anOption);
                  }
                  if(optionsTotalHeight > optionDiv.offsetHeight){                        
                        for(var no=0;no<optionArray.length;no++){
                              optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px';       
                        }      
                  }            
                  optionDiv.style.display='none';
                  optionDiv.style.visibility='visible';
            }
            
            selectBoxIds = selectBoxIds + 1;
      }      
      
      </script>
</head>
<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="5">
  <tr bgcolor="#003B8C">
    <td width="88%" valign="top"><div align="left" class="style323"> </div>
        <div align="right">
          <table width="100%"  border="0" cellspacing="0" cellpadding="2">
            <tr>
              <td><div align="left"><span class="style7">Cestria Distribution - Lane Group Plc, Contract Management.</span></div></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
      </div></td>
    <td width="12%"><div align="right"><img src="/lgcm/content/images/lane_logo.png" width="109" height="65"></div></td>
  </tr>
  <tr bgcolor="#E60F11">
    <td height="6" colspan="2"></td>
  </tr>
  <tr bgcolor="#E6E6E6">
    <td height="6" colspan="2" bgcolor="#E6E6E6"><span class="style2">Statistics Will Show Here &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; </span></td>
  </tr>
  <tr bgcolor="#E60F11">
    <td height="3" colspan="2"></td>
  </tr>
</table>

<table width="100%"  border="0" cellspacing="0" cellpadding="2">
  <tr valign="top">
    <td width="15%"><div align="center"><img src="/lgcm/content/images/cestria_logo.png" width="124" height="110"><br>
 
</div>
<div align="center">
  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td bgcolor="#003B8C" align="left">&nbsp; <font color="#FFFFFF" size="1">USER: <b>Guest</b></font></td>
    </tr>
  </table>
  <br>
  <script language=JavaScript1.2 src="/lgcm/global/menu/apytmenu.js" type=text/javascript></script>
  <script language=JavaScript1.2 src="/lgcm/global/menu/txpmenu1.js" type=text/javascript></script>
</div>
</td>
    <td width="85%">
      <table width="98%"  border="0" align="center" cellpadding="2" cellspacing="0">
      <tr>
        <td valign="top"><table width="100%"  border="0" cellpadding="2" cellspacing="0">
      <tr valign="middle">
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/runs/import/"><img src="/lgcm/content/images/icons/import.gif" width="60" height="60" border="0"></a><br>
          Import Runs</div></td>
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/search/"><img src="/lgcm/content/images/icons/search.gif" width="60" height="60" border="0"></a><br>
          Search</div></td>
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/stock/list/"><img src="/lgcm/content/images/icons/stock.gif" width="60" height="60" border="0"></a><br>
          Stock List </div></td>
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/staff/hours/"><img src="/lgcm/content/images/icons/tachours.gif" width="60" height="60" border="0"></a><br>
           Hours </div></td>
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/reports/"><img src="/lgcm/content/images/icons/reports.gif" width="60" height="60" border="0"></a><br>
          Reports</div></td>
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/staff/"><img src="/lgcm/content/images/icons/users-contacts.gif" width="60" height="60" border="0"></a><br>
          Users / Staff </div></td>
        <td width="14%"><div align="center" class="style13"><a href="/lgcm/default.asp?action=logout"><img src="/lgcm/content/images/icons/secure.gif" width="60" height="60" border="0"></a><br>
          Logout</div></td>
      </tr>
    </table>

<br></td>
      </tr>
      <tr>
        <td valign="top"><table width="97%"  border="0" align="center" cellpadding="2" cellspacing="0">
          <tr>
            <td width="20%" bgcolor="#003B8C" class="style7">HB Cestria 16 - Details. </td>
            <td width="80%"><div align="right">Print Driver Runsheet | Debrief | Delete </div></td>
          </tr>
        </table>
          <table width="97%"  border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#003B8C">
            <tr>
              <th height="21" valign="top" bordercolor="#FFFFFF" background="content/images/body_bg.png"><form action="runs/view/default.asp?action=changeorder&uid=285860076" method="POST" name="Moveable" id="Moveable">
                <div align="left">
                  <div id="mainContainer" width="100%">
                    <!-- START DRAGABLE CONTENT -->
                    <div id="dragableElementsParentBox">
                     
                      <div class="bigArticle" dragablebox="true" id="Customer1013">
                        <table width="97%"  border="0" cellspacing="0" cellpadding="2">
                          <tr>
                            <td width="6%"><img src="content/images/move_up-down.png" alt="Click + Hold to Move" width="18" height="24"></td>
                            <td width="18%"><strong>Mr.Aylen
</strong></td>
                            <td width="11%"><strong>NR1 1HJ</strong></td>
                            <td width="15%"><strong>4504710353</strong></td>
                            <td width="10%"><strong>1.746</strong></td>
                            <td width="10%"><strong>01/06/2006</strong></td>
                            <td width="10%"><strong></strong></td>
                            <td width="20%"><strong><a href="/lgcm/customers/view/default.asp?customer=1013&now=13/06/2006 15:56:53">View</a> | <a href="/lgcm/customers/modify/default.asp?customer=1013&now=13/06/2006 15:56:53">Modify</a> | <a href="runs/view/runs/view/default.asp?action=removesingle&customer=1013" onClick="return confirm('Are You Sure You Want To Remove This Customer From HB Cestria 16?');">Remove</a>
                              <input name="CustID" type="hidden" id="CustID" value="1013">
                            </strong></td>
                          </tr>
                        </table>
                      </div>
                     
                      <div class="bigArticle" dragablebox="true" id="Customer1014">
                        <table width="97%"  border="0" cellspacing="0" cellpadding="2">
                          <tr>
                            <td width="6%"><img src="content/images/move_up-down.png" alt="Click + Hold to Move" width="18" height="24"></td>
                            <td width="18%"><strong>Mr.HAWES
</strong></td>
                            <td width="11%"><strong>NR4 6PQ</strong></td>
                            <td width="15%"><strong>4504763158</strong></td>
                            <td width="10%"><strong>1.827</strong></td>
                            <td width="10%"><strong>01/06/2006</strong></td>
                            <td width="10%"><strong></strong></td>
                            <td width="20%"><strong><a href="/lgcm/customers/view/default.asp?customer=1014&now=13/06/2006 15:56:53">View</a> | <a href="/lgcm/customers/modify/default.asp?customer=1014&now=13/06/2006 15:56:53">Modify</a> | <a href="runs/view/runs/view/default.asp?action=removesingle&customer=1014" onClick="return confirm('Are You Sure You Want To Remove This Customer From HB Cestria 16?');">Remove</a>
                              <input name="CustID" type="hidden" id="CustID" value="1014">
                            </strong></td>
                          </tr>
                        </table>
                      </div>
                     
                      <div class="bigArticle" dragablebox="true" id="Customer1015">
                        <table width="97%"  border="0" cellspacing="0" cellpadding="2">
                          <tr>
                            <td width="6%"><img src="content/images/move_up-down.png" alt="Click + Hold to Move" width="18" height="24"></td>
                            <td width="18%"><strong>Mr.JOHNSON
</strong></td>
                            <td width="11%"><strong>NR19 1AE</strong></td>
                            <td width="15%"><strong>4504713671</strong></td>
                            <td width="10%"><strong>0.966</strong></td>
                            <td width="10%"><strong>01/06/2006</strong></td>
                            <td width="10%"><strong></strong></td>
                            <td width="20%"><strong><a href="/lgcm/customers/view/default.asp?customer=1015&now=13/06/2006 15:56:54">View</a> | <a href="/lgcm/customers/modify/default.asp?customer=1015&now=13/06/2006 15:56:54">Modify</a> | <a href="runs/view/runs/view/default.asp?action=removesingle&customer=1015" onClick="return confirm('Are You Sure You Want To Remove This Customer From HB Cestria 16?');">Remove</a>
                              <input name="CustID" type="hidden" id="CustID" value="1015">
                            </strong></td>
                          </tr>
                        </table>
                      </div>
                     
                      <div class="bigArticle" dragablebox="true" id="Customer1016">
                        <table width="97%"  border="0" cellspacing="0" cellpadding="2">

                          <tr>
                            <td width="6%"><img src="content/images/move_up-down.png" alt="Click + Hold to Move" width="18" height="24"></td>
                            <td width="18%"><strong>Mr.HARDING
</strong></td>
                            <td width="11%"><strong>NR20 4DG</strong></td>
                            <td width="15%"><strong>4504293237</strong></td>
                            <td width="10%"><strong>3.099</strong></td>
                            <td width="10%"><strong>01/06/2006</strong></td>
                            <td width="10%"><strong></strong></td>
                            <td width="20%"><strong><a href="/lgcm/customers/view/default.asp?customer=1016&now=13/06/2006 15:56:54">View</a> | <a href="/lgcm/customers/modify/default.asp?customer=1016&now=13/06/2006 15:56:54">Modify</a> | <a href="runs/view/runs/view/default.asp?action=removesingle&customer=1016" onClick="return confirm('Are You Sure You Want To Remove This Customer From HB Cestria 16?');">Remove</a>
                              <input name="CustID" type="hidden" id="CustID" value="1016">
                            </strong></td>
                          </tr>
                        </table>
                      </div>
                     
                      <div class="clear" id="clear"></div>
                    </div>
                    <!-- END DRAGABLE CONTENT -->
                    <div align="center">
                      <input name="itemOrder" type="hidden" id="itemOrder" value="">
                      <input name="action" type="hidden" id="action" value="changeorder">
                      <input name="uid" type="hidden" id="uid" value="285860076">
                      <input type="submit" value="Save Run Order">
                      <br>                
                        </div>
                  </div>
                  <!-- REQUIRED DIVS -->
                  <div id="insertionMarker"> <img src="runs/view/images/marker_top.gif"> <img src="runs/view/images/marker_middle.gif" id="insertionMarkerLine"> <img src="runs/view/images/marker_bottom.gif"> </div>
                  <!-- END REQUIRED DIVS -->
                </div>
                        </form>
                    
              <br>
              <form action="runs/view/default.asp?action=save&uid=285860076" method="post">
                      <table width="97%"  border="0" cellspacing="0" cellpadding="2">
                  <tr>
                    <td bgcolor="#003B8C"><div align="left" class="style17">Run Details </div></td>
                    <td>&nbsp;</td>
                    <td bgcolor="#003B8C"><div align="left" class="style17">Run Stats</div></td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Vehicle</strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" value="" size="20">
                    </div></td>
                    <td><div align="left">Total Cube </div></td>
                    <td><div align="left">7.638</div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td width="15%"><div align="left"><strong> Name </strong></div></td>
                    <td width="35%"><div align="left">
                      <input name="textfield" type="text" value="HB Cestria 16" size="16">
                    </div></td>
                    <td width="15%"><div align="left"><strong>Total Drops </strong></div></td>
                    <td width="35%"><div align="left">4</div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                    </tr>
                  <tr>
                    <td><div align="left"><strong> Date </strong></div></td>
                    <td><div align="left">02/06/2006</div></td>
                    <td><p align="left"><strong>Est Distance</strong></p>
                      </td>
                    <td><div align="left">0.0 <span class="style16">Miles,</span> 0.0 <span class="style16">Kilometers. </span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>ID </strong></div></td>
                    <td><div align="left">285860076</div></td>
                    <td><div align="left"><strong>Est  Time</strong></div></td>
                    <td><div align="left"> <span class="style16">Hours,</span>  <span class="style16">Minutes. </span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Contract </strong></div></td>
                    <td><div align="left">
                      <select name="select">
                          <option value="Homebase Kitchens">Homebase Kitchens</option>
                          <option value="White Goods">White Goods</option>
                      </select>
                    </div></td>
                    <td><div align="left"><strong>Est Cost </strong></div></td>
                    <td>
                                <div align="left">
                                    £51.50
                                  </div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong> Driver </strong></div></td>
                    <td align="left">
                      <input type="text" name="Driver" value="" selectBoxOptions="Dave Gibson1;Kevin Mines1;Chris Mines1">
                    </td>
                    <td><div align="left"><strong>Status</strong></div></td>
                    <td><div align="left">N/A</div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong> Mate </strong></div></td>
                    <td><div align="left">
                      <input type="text" name="Mate" value="" selectBoxOptions="Dave Gibson;Kevin Mines;Chris Mines">
                    </div></td>
                    <td><div align="left"><strong>Actual Distance </strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" size="6" value="0.0">
                        <span class="style16">(miles) </span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Contact</strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" value="" size="20">
                    </div></td>
                    <td><div align="left"><strong>Actual Time </strong></div></td>
                    <td><div align="left"><span class="style16">
                        <input name="textfield" type="text" size="2" value="0">
                        hours,
                          <input name="textfield" type="text" size="2" value="0">
                        minutes.</span></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Start Time </strong></div></td>
                    <td><div align="left">
                      <select name="Start" id="Start">
                          <option value="" selected>Time</option>
                          <option value="00:00">00:00</option>
                          <option value="00:15">00:15</option>
                          <option value="00:30">00:30</option>
                          <option value="00:45">00:45</option>
                          <option value="01:00">01:00</option>
                          <option value="01:15">01:15</option>
                          <option value="01:30">01:30</option>
                          <option value="01:45">01:45</option>
                          <option value="02:00">02:00</option>
                          <option value="02:15">02:15</option>
                          <option value="02:30">02:30</option>
                          <option value="02:45">02:45</option>
                          <option value="03:00">03:00</option>
                          <option value="03:15">03:15</option>
                          <option value="03:30">03:30</option>
                          <option value="03:45">03:45</option>
                          <option value="04:00">04:00</option>
                          <option value="04:15">04:15</option>
                          <option value="04:30">04:30</option>
                          <option value="04:45">04:45</option>
                          <option value="05:00">05:00</option>
                          <option value="05:15">05:15</option>
                          <option value="05:30">05:30</option>
                          <option value="05:45">05:45</option>
                          <option value="06:00">06:00</option>
                          <option value="06:15">06:15</option>
                          <option value="06:30">06:30</option>
                          <option value="06:45">06:45</option>
                          <option value="07:00">07:00</option>
                          <option value="07:15">07:15</option>
                          <option value="07:30">07:30</option>
                          <option value="07:45">07:45</option>
                          <option value="08:00">08:00</option>
                          <option value="08:15">08:15</option>
                          <option value="08:30">08:30</option>
                          <option value="08:45">08:45</option>
                          <option value="09:00">09:00</option>
                          <option value="09:15">09:15</option>
                          <option value="09:30">09:30</option>
                          <option value="09:45">09:45</option>
                          <option value="10:00">10:00</option>
                          <option value="10:15">10:15</option>
                          <option value="10:30">10:30</option>
                          <option value="10:45">10:45</option>
                          <option value="11:00">11:00</option>
                          <option value="11:15">11:15</option>
                          <option value="11:30">11:30</option>
                          <option value="11:45">11:45</option>
                          <option value="12:00">12:00</option>
                          <option value="12:15">12:15</option>
                          <option value="12:30">12:30</option>
                          <option value="12:45">12:45</option>
                          <option value="13:00">13:00</option>
                          <option value="13:15">13:15</option>
                          <option value="13:30">13:30</option>
                          <option value="13:45">13:45</option>
                          <option value="14:00">14:00</option>
                          <option value="14:15">14:15</option>
                          <option value="14:30">14:30</option>
                          <option value="14:45">14:45</option>
                          <option value="15:00">15:00</option>
                          <option value="15:15">15:15</option>
                          <option value="15:30">15:30</option>
                          <option value="15:45">15:45</option>
                          <option value="16:00">16:00</option>
                          <option value="16:15">16:15</option>
                          <option value="16:30">16:30</option>
                          <option value="16:45">16:45</option>
                          <option value="17:00">17:00</option>
                          <option value="17:15">17:15</option>
                          <option value="17:30">17:30</option>
                          <option value="17:45">17:45</option>
                          <option value="18:00">18:00</option>
                          <option value="18:15">18:15</option>
                          <option value="18:30">18:30</option>
                          <option value="18:45">18:45</option>
                          <option value="19:00">19:00</option>
                          <option value="19:15">19:15</option>
                          <option value="19:30">19:30</option>
                          <option value="19:45">19:45</option>
                          <option value="20:00">20:00</option>
                          <option value="20:15">20:15</option>
                          <option value="20:30">20:30</option>
                          <option value="20:45">20:45</option>
                          <option value="21:00">21:00</option>
                          <option value="21:15">21:15</option>
                          <option value="21:30">21:30</option>
                          <option value="21:45">21:45</option>
                          <option value="22:00">22:00</option>
                          <option value="22:15">22:15</option>
                          <option value="22:30">22:30</option>
                          <option value="22:45">22:45</option>
                          <option value="23:00">23:00</option>
                          <option value="23:15">23:15</option>
                          <option value="23:30">23:30</option>
                          <option value="23:45">23:45</option>
                      </select>
                    </div></td>
                    <td><div align="left"><strong>Actual Income </strong></div></td>
                    <td><div align="left"><span class="style16">&pound;</span>                          <input name="textfield" type="text" value="0.00" size="6">
                    </div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Finish Time </strong></div></td>
                    <td><div align="left">N/A</div></td>
                    <td><div align="left">Actual Cost </div></td>
                    <td><div align="left"><span class="style16">&pound;</span>
                          <input name="textfield" type="text" size="6" value="0.00">
                    </div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"><strong>Comments</strong></div></td>
                    <td><div align="left">
                      <input name="textfield" type="text" value="" size="20">
                    </div></td>
                    <td><div align="left"><strong>Profit / Loss </strong></div></td>
                    <td><div align="left">£<font color='red'>0.00</font> - <font size=1>Figures Required To Calculate</font></div></td>
                  </tr>
                  <tr>
                    <td height="1" colspan="4" bgcolor="#0065C9"></td>
                  </tr>
                  <tr>
                    <td><div align="left"></div></td>
                    <td><div align="left">
                    </div></td>
                    <td><div align="left"></div></td>
                    <td><div align="left"></div></td>
                  </tr>
                  <tr>
                    <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>
                  </tr>
                </table>
              </form>


                    </th>
            </tr>
          </table></td>
      </tr>
    </table></td>
  </tr>
</table>
<br>
<table width="100%"  border="0" cellspacing="0" cellpadding="5">
  <tr bgcolor="#E60F11">
    <td height="6" colspan="2"></td>
  </tr>
  <tr bgcolor="#003B8C" class="style7">
    <td width="48%" height="6"><div align="left" class="style15">Copyright &copy; 2005 - 2006, All Rights Reserved. </div></td>
    <td width="52%"><div align="right" class="style15">IT Support: Dave Gibson, 07834 596 029 </div></td>
  </tr>
</table>

</body>
                    <script type="text/javascript">
                        createEditableSelect(document.forms[1].Driver);
                        createEditableSelect(document.forms[1].Mate);
                    </script>

</html>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16894853

haha no prob.
0
 
LVL 6

Author Comment

by:davecestria
ID: 16894881
Just a quick question though, why does putting it after the </body> tag make a difference??
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16895065

I guess IE first has to read the whole body before it starts adding it's "child" elements in the DOM. And you cannot reference something that is not yet in the DOM.  FF must be  adding children as soon as it sees and creates them.  
0
 
LVL 6

Author Comment

by:davecestria
ID: 16900505
Thank you. You've been a great help.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now