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.
