un select qui se débine

**laurentSc** · 07/04/2011, 14h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 07/04/2011, 15h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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={&quot;playerId&quot;:&quot;player&quot;,&quot;clip&quot;:{&quot;url&quot;:&quot;negawatt_rev12.flv&quot;},&quot;playlist&quot;:[{&quot;url&quot;:&quot;negawatt_rev12.flv&quot;}]}" 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** · 07/04/2011, 16h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nadox** · 07/04/2011, 17h17

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

**laurentSc** · 07/04/2011, 20h45

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** · 07/04/2011, 22h36

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** · 08/04/2011, 02h22

@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** · 08/04/2011, 08h32

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** · 08/04/2011, 08h47

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** · 08/04/2011, 10h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/04/2011, 10h48

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**laurentSc** · 08/04/2011, 11h04

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

**NoSmoking** · 08/04/2011, 20h44

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

elem.className = "nom_classe";

**laurentSc** · 08/04/2011, 21h41

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/04/2011, 22h41

Petit exemple à tester

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/04/2011, 22h44

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/04/2011, 23h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/04/2011, 23h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

si l'on met dans la partie STYLE

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

si l'on met dans la partie STYLE

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**laurentSc** · 09/04/2011, 09h17

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

un select qui se débine

JavaScript

Discussions similaires

Partager

Partager