[dhtml] layer niet over tekstvel in span heen

[Verwijderd]

Sorry voor de vage topic-titel, maar beter weet ik het even niet te omschrijven.

Ik heb het volgende javascript geschreven om een selectbox te maken d.m.v. dhtml. Ik laat het script even in php-opmaak zien, zodat de regelnummering erbij staat.

PHP:

<!--
var activeCombo = null;

function comboBox(instance, name, id, layer, maxheight, colHeaders, colContents, fieldWidth){ 
   // Declareren
   this.instance     = instance;
   this.name         = name;
   this.id           = id;
   this.layer        = layer
   this.maxheight    = maxheight;
   this.colHeaders   = colHeaders;
   this.colContents  = colContents;
   this.fieldWidth   = fieldWidth;
   this.lastRow      = null;
   (arguments.length==9)? this.defValue = arguments[8] : this.defValue=null;
   
   // Functies koppelen
   this.applyCss    = comboBox_applyCss;
   this.createBox   = comboBox_createBox;
   this.showList    = comboBox_showList;
   this.putContents = comboBox_putLayerContents;
   this.toggleColor = comboBox_toggleColor;
   this.selectList  = comboBox_selectList;

   // Combobox maken
   this.createBox();
   this.putContents();  
   this.applyCss(); 
}

function comboBox_applyCss(){
   theLayer = document.getElementById(this.layer);
   theLayer.style.top       = '19px';
   theLayer.style.left      = '0px';
   theLayer.style.zIndex    = 500;
   theLayer.style.overflowX = 'hidden';
   theLayer.style.overflowY = 'auto';
   theLayer.style.width     = 'auto';
   theLayer.style.height    = this.maxheight+'px'
   theLayer.style.maxHeigh  = this.maxheight+'px';   
}

function comboBox_showList(){
   // vorige combobox sluiten
   if(activeCombo!=null && activeCombo!=this.layer){
      prevLayer = document.getElementById(activeCombo);
      prevLayer.style.visibility = 'hidden';
   }   
   theLayer = document.getElementById(this.layer);  
   theLayer.style.visibility = (theLayer.style.visibility == 'hidden') ? 'visible' : 'hidden';   
   theLayer.style.zIndex = (theLayer.style.zIndex == 500) ? 1000 : 500;
   activeCombo = this.layer;
}

function comboBox_createBox(){
   document.write('<span style="display: inline; position:relative; padding: 0px; margin: 0px;">');
   document.write('<input type="text" name="'+this.name+'" id="'+this.id+'" style="margin-right: 0px; width: '+this.fieldWidth+'px;"');
   if(this.defValue!=null){
          document.write(' value="'+this.colContents[this.defValue][0]+'"');
   }
   document.write('/>');
   document.write('<a href="javascript:void(0);" onClick="javascript:'+this.instance+'.showList(\''+this.layer+'\');">');
   document.write('[img]"/Admin/img/pulldown.gif"[/img]');
   document.write('</a>\n');
   document.write('<div id="'+this.layer+'" style="position:absolute; visibility: hidden;">');
   document.write('</div></span>');
}

function comboBox_toggleColor(theRow){
   theRow = document.getElementById(theRow);
   if(theRow.className == 'listSelected') return true;
   theRow.className = (theRow.className == 'listOn') ? 'listOff' : 'listOn';
}

function comboBox_selectList(theValue,theRow){
   document.getElementById(this.id).value=theValue;
   if(this.lastRow!=null){
      prevRow = document.getElementById(this.lastRow);
      prevRow.className = 'listOff';
   } 
   this.lastRow = theRow;
   theRow = document.getElementById(theRow);   
   theRow.className = 'listSelected';
   this.showList(this.layer);
}

function comboBox_putLayerContents(){
   // this.colHeaders + this.colContents gebruiken voor de inhoud van het pulldown menu
   theLayer = document.getElementById(this.layer);
   if(this.colContents!='undefined' && this.colContents!=null && 
      this.colHeaders!='undefined' && this.colHeaders!=null){
      if(this.colHeaders.length>0){
         // Kolomkoppen afdrukken
         var divContents = new Array();
         divContents.push('<table border="0" cellpadding="2" cellspacing="1" style="background-color: #cccccc; margin: 0px;"><tr>');
         for(var i=0; i<this.colHeaders.length; i++){
            divContents.push('<th>'+this.colHeaders[i]+'</th>');
         }
         divContents.push('</tr>');              
         if(this.colContents.length>0){
            for(var i=0; i<this.colContents.length; i++){
               tmpRow = this.colContents[i];
               if(tmpRow.length>0){
                  tmpRowID = this.id+i;
                  tmpRowContents = '<tr id="'+tmpRowID+'" ';
                  if(this.defValue!=null && this.defValue==i){
                      tmpRowContents += 'class="listSelected" ';
                       this.lastRow = tmpRowID;
                  }else{
                      tmpRowContents += 'class="listOff" ';
                  }
                  tmpRowContents += 'onMouseOver="javascript:'+this.instance+'.toggleColor(\''+tmpRowID+'\');" onMouseOut="javascript:'+this.instance+'.toggleColor(\''+tmpRowID+'\');" onClick="javascript:'+this.instance+'.selectList(\''+tmpRow[0]+'\',\''+tmpRowID+'\');">';
                  for(var j=0; j<this.colHeaders.length; j++){
                     if(j==this.colHeaders.length-1){
                        tmpRowContents += '<td nowrap style="padding-right: 20px;">'+tmpRow[j]+'</td>';   
                     }else{
                        tmpRowContents += '<td nowrap>'+tmpRow[j]+'</td>';   
                     }
                  }
                  tmpRowContents += '</tr>';
                  divContents.push(tmpRowContents);
               }
            }
         }else{
            divContents.push('<tr><td colspan="'+this.colHeaders.length+'" class="listOff"><p class="errMsg">Geen gegevens aanwezig!</p></td></tr>');
         }
         divContents.push('</table>');       
         var divContents    = divContents.join('');
         theLayer.innerHTML = divContents;
      }else{
         theLayer.innerHTML = '<p class="errMsg">Geen gegevens aanwezig!</p>';
      }
   }
}
//-->

Met de volgende code maak ik 2 selectboxen aan:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="combobox.js"></script>
</head>

<body>
<table width="400" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td width="25%">lijst 1 </td>
    <td width="25%">
    <script language="javascript">
    <!--
    var listA_Headers  = new Array('id','omschrijving');
    var listA_Contents = new Array();
    listA_Contents[0]  = new Array('1','een');
    listA_Contents[1]  = new Array('2','twee');
    listA_Contents[2]  = new Array('3','drie');
    listA_Contents[3]  = new Array('4','vier');
    listA_Contents[4]  = new Array('5','vijf');
    
    var listA = new comboBox('listA',
                             'txtA', 
                             'txtA', 
                             'lyrA',
                             100,
                             listA_Headers,
                             listA_Contents,
                             50);
    //-->
    </script>
    </td>
    <td width="25%">&nbsp;</td>
    <td width="25%">&nbsp;</td>
  </tr>
  <tr>
    <td>lijst 2 </td>
    <td>
    <script language="javascript">
    <!--
    var listB_Headers  = new Array('id','omschrijving');
    var listB_Contents = new Array();
    listB_Contents[0]  = new Array('1','een - 2');
    listB_Contents[1]  = new Array('2','twee - 2');
    listB_Contents[2]  = new Array('3','drie - 2');
    
    var listB = new comboBox('listB',
                             'txtB', 
                             'txtB', 
                             'lyrB',
                             100,
                             listB_Headers,
                             listB_Contents,
                             50);
    //-->
    </script>   
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>
</body>
</html>

Als je dit nu opent in de browser en op het eerste knopje klikt (het plaatje werkt bij jullie helaas niet, dus je ziet een schitterend rood-kruisje), dan zie je dat de layer die uitgeklapt wordt niet over de 2e lijst heengaat, maar dat het 2e tekstvak door de layer heen zichtbaar is!

Heeft 1 van jullie enig idee hoe ik dat kan voorkomen?

[gorgi_19]

Zie **** over Javascript en HTML topics ****

Alleen is ik deze lap code ga plaatsen naar Webdesign & Graphics, dan word ik waarschijnlijk hard gemept. Pas je topic aan naar de daar geldende richtlijnen en open daar een nieuw topic.