0

hello,

i figured this forum was more appropriate for this thread than the javascript forum, here is why :

my javascript is functionnal, and does not set/change css rules of the objects i manipulate.

But here is my problem, i have 2 dynamic listbox (selects with size 10ish) with 4 buttons inbetween them, the layout is fine until i start dynamicly repopulating my selects with javascript functions...

the buttons stay in place, the left select's width changes slightly (5-15px~ ish) while the right select's width changes by about 5-30px~

the layout i use is 1 huge div for everything in the body , with a width set to 1000px for now while im testing the size on diferent browsers.
then a form with a table to structure the diferent labels and fields (i did not choose to structure part of the site with tables, its a project i was assigned to and im trying to keep it constant) now within the tabledescription <td> where my selects structure is i have a div over the whole structure , 3 divs floating left , 1 for each select and in the middle a div for the 4 buttons.

heres the diferent inline css rules im giving them:

...
<div style="width:1000px;">
...
<table cellspacing="4" cellpadding="4" border="0" style="width:100%;">
...
<tr style="width:100%;">
   <td colspan="2" align="center">
   <div style="width:100%;text-align:center;background-color:Red;">
   <div style="float:left;display:inline;width:45%;">
       <select name="lstAttHEC" size="10" id="lstAttHEC" style="width:100%;font-size:xx-small;margin:0,0,0,0;"  onchange="unselect('lstHEC')">
       <%
       If Not IsNull(rsAttHEC) Then
            rsAttHEC.Open sqlAttHEC, conn , 1 , 1
            Dim etat
            Do While Not rsAttHEC.eof
               If rsAttHEC("iEtat")=0 Then
                  etat = "Obli"
               ElseIf rsAttHEC("iEtat")=1 Then
                  etat = "Obli | Opti"
               ElseIf rsAttHEC("iEtat")=2 Then
                  etat = "Opti"
               End If
       %>
            <option value="<%=rsAttHEC("idfield...") %>" title="<%=rsAttHEC("namefield...") & " [" & etat & "]"%>"><%=rsAttHEC("namefield...") & " [" & etat & "]"%></option>
       <%
               rsAttHEC.MoveNext
           Loop
       End If
       %>
       </select>
   </div>
   <div style="float:left;display:inline;width:10%;vertical-align:middle;margin:25px,0,25px,0;background-color:Green;">
       <input type="button" id="btn_obli" onclick="moveLeft(0)" value="Obligatoire" style="font-size:xx-small;width:100%;" />
       <input type="button" id="btn_obliopti" onclick="moveLeft(1)" value="Obli | Opti" style="font-size:xx-small;width:100%;" //>
       <input type="button" id="btn_opti" onclick="moveLeft(2)" value="Optionnel" style="font-size:xx-small;width:100%;" />
       <input type="button" id="btn_remove" onclick="moveRight()" value="------->" style="font-size:xx-small;width:100%;" />
   </div>
   <div style="float:left;display:inline;width:45%;">
       <select name="lstHEC" size="10" id="lstHEC" style="width:100%;font-size:xx-small;margin:0,0,0,0;"  onchange="unselect('lstAttHEC')">
       <%
       rsHEC.Open sqlHEC, conn , 1 , 1
       Do While Not rsHEC.eof
       %>
            <option value="<%=rsHEC("idfield...") %>" title="<%=rsHEC("namefield...")%>"><%=rsHEC("namefield...")%></option>
       <%
            rsHEC.MoveNext
       Loop
       %>
       </select>
  </div>
  </div>
  </td>
</tr>
...

and here is the javascript used :

<script type="text/javascript" language="javascript">
    function unselect(s){
       //var liste = document.getElementById(s);
       //liste.options[liste.selectedIndex].selected = false;
	    
       var sel = document.getElementById(s);
       var clone = sel.cloneNode(true);
       var clonedOptions = clone.getElementsByTagName("option");
            
       while (sel.options.length){
           sel.remove(0);
       }
       for ( var i = 0; i < clonedOptions.length; i++) {
           sel.appendChild(clonedOptions[i].cloneNode(true));
       }
    }
    
    function moveLeft(etat){
	var selD = document.getElementById("lstHEC");
	var selG = document.getElementById("lstAttHEC");
	var val;
        val = selD.selectedIndex;
	    
        //alert("val : " + val);
        if(val != -1){
	    var clone = selD.cloneNode(true);
            var clonedOptions = clone.getElementsByTagName("option");
	    var optT = selD.options[val].cloneNode(true);
            while (selD.options.length){
                selD.remove(0);
            }
            for ( var i = 0; i < clonedOptions.length; i++) {
	       if(i != val){
	           selD.appendChild(clonedOptions[i].cloneNode(true));
	       }
	    }
	    optT.text = clone.options[val].text + " [" + (etat==0?"Obli":(etat==1?"Obli | Opti":"Opti")) + "]";
	    optT.title = optT.text;
	    selG.appendChild(optT.cloneNode(true));
	}
	else if(selG.selectedIndex != -1){
	    val = selG.selectedIndex;
	    selG.options[val].text = selG.options[val].text.split("[")[0].trim() + " [" + (etat==0?"Obli":(etat==1?"Obli | Opti":"Opti")) + "]";
	    selG.options[val].title = selG.options[val].text;
	}
    }
    
    function moveRight(){
	var selG = document.getElementById("lstAttHEC");
	var val;
        val = selG.selectedIndex;
	    
        if(val != -1){
            var selD = document.getElementById("lstHEC");
            var clone = selG.cloneNode(true);
            var clonedOptions = clone.getElementsByTagName("option");
	    var optT = selG.options[val].cloneNode(true);
            while (selG.options.length){
                selG.remove(0);
            }
            
            for ( var i = 0; i < clonedOptions.length; i++) {
	        if(i != val){
	            selG.appendChild(clonedOptions[i].cloneNode(true));
	        }
	    }
	    optT.text = clone.options[val].text.split("[")[0].trim();
	    optT.title = optT.text;
	    selD.appendChild(optT.cloneNode(true));
	    selD.style.width="100%";
	}
    }
    
    String.prototype.trim = function() {
	    return this.replace(/^\s+|\s+$/g,"");
    }
    String.prototype.ltrim = function() {
	    return this.replace(/^\s+/,"");
    }
    String.prototype.rtrim = function() {
	    return this.replace(/\s+$/,"");
    }
</script>

(the code itself is not final but the structure itself won't have to change)

I would very appreciate insight on why the width of the selects could possibly change as id much prefer my site not "flickering" with moving stuff as people use it.

2
Contributors
4
Replies
9
Views
6 Years
Discussion Span
Last Post by Philippe.Lahaie
0

Hmmm, it's quite long to follow. Select the lines you have probs with so we can help you. And if we need to look at the entire code for more info, it's still there.

Cheers,

0

i suspect the main issue is with all the different width rules i assign to the different elements of my page, the table, the divs, then the selects themselves, i isolated pretty much everything but the structure and style rules so you can get a better look directly at the problem.

<div style="width:1000px;">
...
<table cellspacing="4" cellpadding="4" border="0" style="width:100%;">
...
<tr style="width:100%;">
   <td colspan="2" align="center">
   <div style="width:100%;text-align:center;">
       <div style="float:left;display:inline;width:45%;">
           <select size="10" style="width:100%;font-size:xx-small;margin:0,0,0,0;"    
           onchange="unselect('lstHEC')">
               <option value="..."> ... </option> 
           </select> 
       </div> 
       <div style="float:left;display:inline;width:10%;vertical-align:middle;
       margin:25px,0,25px,0;"> 
           <!--buttons here-->
       </div>
       <div style="float:left;display:inline;width:45%;">
           <select size="10" style="width:100%;font-size:xx-small;margin:0,0,0,0;"  
           onchange="unselect('lstAttHEC')">
               <option value="..."> ... </option> 
           </select> 
      </div> 
  </div> 
  </td> 
</tr>

just as a reminder, the problem is the width of both selects that changes by 0-25 pixels when the javascript empties and refills them dynamicly.

0

well ive tried many different things with no success, but the way i have it now works just perfectly with firefox and chrome, it keeps "moving" in IE but it still is functional so thats it.

im letting it go for now.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.