un select qui se débine [Résolu]

[laurentSc]

Bonjour,

j'ai du mal à expliquer mon problème : il concerne le comportement d'un select à chaque fois qu'on sélectionne un item : après chaque sélection, le select se retrouve plus bas dans la page. Pour observer ce problème de comportement, allez là et sélectionnez un des 3 fichiers. Sauriez-vous résoudre ce problème ? Comme le bug est sûrement dans le code de création du DOM, le voici :

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var idparent = document.createElement("div");
var corps = document.createElement("div");
idparent.setAttribute("id","idparent");
corps.setAttribute("id","corps");
var idfille = document.createElement("div");
idfille.setAttribute("id","idfille");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var form = document.createElement("form");
var videoSelect = document.createElement("select");
videoSelect.setAttribute("id","selectId");
form.appendChild(videoSelect);
videoSelect.onchange = function() {
action1(videoSelect.value);
}
idparent.appendChild(form);
td1.appendChild(idparent);  // la div "parent" est ds td1
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.style.width="50px";
td3.appendChild(idfille);   // la div "fille" est ds td3
tbody.appendChild(tr);
table.appendChild(tbody);
corps.appendChild(table);
document.body.appendChild(corps);
 
tab=h_AttachmentNames.replace(/"/g,'').split(',')
for (i=0;i<tab.length;i++)
{
str=tab[i].substring(0,tab[i].indexOf(".flv"));
var newOption = document.createElement("option");
newOption.value = str;
var newOptionTxt = document.createTextNode(str);
newOption.appendChild(newOptionTxt);
videoSelect.appendChild(newOption);
}

[nadox]

Le problème est que tu recréé une balise "a" a chaque fois.

En fait tu n'as pas vraiment besoin de tes deux div(fille et parent), et le seul élément que tu as besoin de récupérer dans "action1", c'est cette balise "a"...
Du coup tu te retrouve à chaque fois avec un lien supplémentaire dans ta div "idfille", par exemple(après trois sélections) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="idfille">
    <a id="player" style="margin-top: 25px; display: block; width: 320px; height: 264px;" href="negawatt_rev12.flv">
        <object width="100%" height="100%" type="application/x-shockwave-flash" data="flowplayer-3.2.6.swf" id="player_api">
            <param value="true" name="allowfullscreen"><param value="always" name="allowscriptaccess"><param value="high" name="quality">
            <param value="false" name="cachebusting"><param value="#000000" name="bgcolor">
            <param value="config={"playerId":"player","clip":{"url":"negawatt_rev12.flv"},"playlist":[{"url":"negawatt_rev12.flv"}]}" name="flashvars">
        </object>
    </a>
    <a id="player" style="margin-top: 25px; display: block; width: 320px; height: 264px;"></a>
    <a id="player" style="margin-top: 25px; display: block; width: 320px; height: 264px;"></a>
</div>

En plus tu te retrouve avec plusieurs éléments qui le même id et ça c'est vraiment très mal !

Si tu utilisais les outils de développement tu pourrais le voir !...

[laurentSc]

Si tu utilisais les outils de développement tu pourrais le voir

tanpis, car ça a l'air compliqué.
Je vais te dire l'idée que j'ai et tu me dis ce que tu en penses : je crée le lien une seule fois (quand j'initialise le DOM), puis à l'appel de la fonction action1, je ne modifie que le lien :

Code :

document.getElementById("player").href = sFileName;

[nadox]

Oui c'est ce que j'avais fait et je pense que c'est ce qu'il faut faire.

[laurentSc]

Je viens d'essayer sans avoir vu que tu avais répondu et c'est une super idée
A+ (et encore merci pour le code que tu as fait, et qui m'a permis d'apprendre plein de trucs (sinon, il m'aurait été impossible de faire çà (l'URL, c'est car je squatte l'espace internet de mon club handisport (dont je suis le webmaster))))

[NoSmoking]

Bonsoir,
quel est l'intérêt de créer le document à coup de createElement et non en balisage direct, pour l'apprentissage...
...dans ce cas ne pas oublier qu'il existe également, les méthodes insertRow, insertCell pour la construction des tables

[nadox]

@NoSmoking
En fait, la création en DOM est nécessaire parce que la page sur laquelle est utilisé le code n'est pas maitrisée du côté serveur et les balises ne doivent être présente que si une condition est vérifiée en javascript.
Le lien au-dessus n'est qu'une page d'exemple pour ce script qui sera intégré dans un intranet pour lequel laurentSc ne peut faire que du html et javascript, enfin si j'ai bien compris...! La table html n'est pas nécessaire je crois. (encore une mauvaise habitude de laurenSc je crois : faire la mise en page avec des tableaux)

[laurentSc]

encore une mauvaise habitude de laurenSc je crois : faire la mise en page avec des tableaux

Qu'est-ce que tu crois ; que c'est une mauvaise habitude, ou que c'est la mienne ?
Et sinon, qu'est-ce qui serait mieux ? Avec des div ?

[nadox]

Les deux !
Plus sérieusement, on utilise plus la mise en page avec des tableaux depuis que le css et les div permettent de le faire dans tout les navigateurs...
On réserve normalement les tableaux a la présentation de données tabulaire.
Cela dit, c'est vrai que ça reste pratique pour faire un alignement vertical et horizontal cross-browser(ie7...).
Dans tout les cas, le dom que tu utilise est inutilement chargé, puisque tu utilise à la fois des div et des tableaux !

[laurentSc]

J'ai essayé de faire une mise en page sans tableau, mais la div fille se met en-dessous de la div parent : mon problème. Qu'est-ce qu'il faut changer :

Code :

1
2
3
4
5
6
7
8
9
 
var idparent = document.createElement("div");
var milieu = document.createElement("div");
var corps = document.createElement("div");
...
idparent.style.float="left";
milieu.style.float="left";
milieu.style.width="50px";
idfille.style.float="left";

j'ai crû comprendre via çà que l'attribut "left" servait à mettre les div côte à côte, mais ça ne marche pas...

[nadox]

La propriété css float est l'un des seules dont le nom n'est pas le même en Javascript...

Code :

1
2
3
 
elem.style.styleFloat = "left"; // pour ie
elem.style.cssFloat = "left"; // pour les autres

Pour prendre en compte les deux on peut utiliser un expression ternaire par exemple

Code :

1
2
 
elem.style.cssFloat ? elem.style.cssFloat = "left" : elem.style.styleFloat = "left";

[laurentSc]

Merci, et j'ai adopté la condition ternaire.

[NoSmoking]

encore une question, pourquoi ne pas passer par des class pour tout ce qui concerne le STYLE

Code :

elem.className = "nom_classe";

[laurentSc]

peux-tu traiter un exemple pour je comprenne mieux l'idée ? Que deviendrait par exemple ceci :

Code :

1
2
3
4
5
6
7
8
9
		aFlowPlayer.style.float="left";
 
		aFlowPlayer.style.marginTop = "25px";
 
		aFlowPlayer.style.display = "block"
 
		aFlowPlayer.style.width = "320px";
 
		aFlowPlayer.style.height = "264px";

[NoSmoking]

Petit exemple à tester

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
body {
  font-family : Verdana, Arial;
  font-size : 1.0em;
}
.font_1 {
  font-size : 0.6em;
}
.font_2 {
  font-size : 0.8em;
  font-style : italic;
}
.style_table {
  border : 1px solid #c0c0c0;
}
.style_cell{
  width : 150px;
  line-height : 40px;
  background-color : #e0e0e0;
}
.style_div{
  float : left;
  margin-top : 25px;
  display : block;
  width : 320px;
  height : 264px;
  border : 1px solid #c0c0c0;
  background-color : #f0f0f0;
}
</style>
</head>
<body>
<script type="text/javascript">
var oTable = document.createElement('TABLE');
// ajout de la TABLE
document.body.appendChild( oTable);
// affectation class pour la table
oTable.className = "style_table";
// insertion ligne
var oRow  = oTable.insertRow();
// insertion cellule
var oCell = oRow.insertCell();
// creation d'un texte
var oTxt = document.createTextNode('Cellule #1');
// ajout du texte
oCell.appendChild( oTxt);
// affectation class pour la cellule
oCell.className = "style_cell font_1";
// autre cellule
oCell = oRow.insertCell();
// creation d'un texte
oTxt = document.createTextNode('Cellule #2');
// ajout du texte
oCell.appendChild( oTxt);
// creation d'une div
var oDiv = document.createElement('DIV');
// ajout de la DIV
document.body.appendChild( oDiv);
// affectation class pour la DIV
oDiv.className = "style_div font_2";
// creation d'un texte
oTxt = document.createTextNode('Contenu de la DIV');
// ajout du texte
oDiv.appendChild( oTxt);
</script>
</body>
</html>

[nadox]

Code :

1
2
3
4
5
        aFlowPlayer.style.float="left";
        aFlowPlayer.style.marginTop = "25px";
        aFlowPlayer.style.display = "block"
        aFlowPlayer.style.width = "320px";
        aFlowPlayer.style.height = "264px";

Il s'agît d'utiliser une classe CSS,
mais là pas besoin puisque l'élément à un id.
donc ça donnerait une règle CSS de ce type :

Code css :

1
2
 
#flowplayer { margin-top: 25px; display: block; width: 320px; height: 264px; }

Et pour les autres éléments, il est possible d'utiliser une classe CSS(ou l'id lorsqu'il est renseigné)

Bien vu NoSmoking !

[laurentSc]

OK, mais ce qui est évident pour vous ne l'est pas pour moi. Voilà ce que j'ai essayé, mais ça ne marche pas :

Code :

1
2
3
4
5
  <style>
  #flowplayer { float:"left"; margin-top: 25px; display: block; width: 320px; height: 264px; }
  </style>
...
aFlowPlayer.className="flowplayer";

Donc, c'est quoi, ce qu'il fallait faire ?

[NoSmoking]

Envoyé par nadox

Il s'agît d'utiliser une classe CSS,
mais là pas besoin puisque l'élément à un id.
donc ça donnerait une règle CSS de ce type :

Code css :

si l'on met dans la partie STYLE

Code css :

1
2
3
4
5
6
#id_element {
  margin : 0;
  padding : 0;
  width : 400px;
  height : 400px;
}

le # indique que le style s'applique à l'élément qui a pour ID id_element
exemple

Code :

<div id="id_element">Le texte de la DIV</div>

si l'on met dans la partie STYLE

Code css :

1
2
3
4
5
6
.class_element {
  margin : 0;
  padding : 0;
  width : 400px;
  height : 400px;
}

le . indique que l'on vient de définir une class de style qui va s'appliquer à tous les éléments qui auront pour class class_element
exemple

Code :

<div class="class_element">Le texte de la DIV</div>

[laurentSc]

La mention "débutant" dans ma carte de visite est bien justifiée...Et en plus, je le savais...Merci quand même