Discussion :

[Skunka]

Bonjour,

je souhaite attribuer une marge à gauche sur un élément lorsque je clique dessus, marge qui peut être variable!
Je n'ai pas d'erreur lors de l'éxécution mais la marge que je calcule ne s'applique pas :/

Le script js:

Code js :

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
<script type="text/javascript">
	function showHide(span){
		var cible = span;
		var long = 15;
 
		if (cible.lastChild.style.display=="none") {
			cible.lastChild.style.display="flex";
			cible.lastChild.style.position='absolute';
			cible.lastChild.lastChild.focus();
			/* Psitionnement du commentaire,
                            le calcul de la marge se fait ici */
			if (cible.className == "glyphicon glyphicon-info-sign") {
				cible.lastChild.style.marginLeft = long - cible.lastChild.offsetWidth + 'px';
			}	
		} else {
			cible.lastChild.style.display="none";
			cible.lastChild.style.position='relative';
			if (cible.lastChild.lastChild.value.length > 0) {
				cible.className = "glyphicon glyphicon-info-sign";
			} else {
				cible.className = "glyphicon glyphicon-plus";
			}
		} 
 
	}
</script>

La page:

Code html :

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
<table class="tableau" border="1">
	<thead>
		<tr>
			<td style="background-color: white; border: none;"></td>
			<td colspan="2"> <?php echo $plannings[0]->getSalarie()->getNomSalarie()." ".$plannings[0]->getSalarie()->getPrenomSalarie(); ?> </td>
		</tr>
		<tr>
			<td style="background-color: white; border: none;"></td>
			<td>M</td>
			<td>AM</td>
		</tr>
	</thead>
	<tbody>
		<?php
                $j=0;
                $nomJours = $planning->chargerNomJours();
                $plannings[0]->setCommentaire("teeeeeeeeeeeeeeeeeeeeeeeeeeeest");
                for ($i=0; $i < 10; $i+=2) { 
                        echo "<tr>";
                                echo "<td>";
                                        echo $nomJours[$j]."<br>".date("d-m-y", strtotime($plannings[$i]->getDateJour()));
                                echo "</td>";
                                echo "<td>";
                                        echo $plannings[$i]->getChantier()->getNomChantier(). "<br>";
                                        echo $plannings[$i]->getVehicule()->getNomVehiculeABRG();
                                        if (!is_null($plannings[$i]->getCommentaire())) {
                                                echo "<div class='commentaire'>";
                                                        echo "<span class='glyphicon glyphicon-info-sign' onclick='showHide(this)'>";
                                                                echo "<p style='display:none'  class='commAffiche'>";
                                                                        echo $plannings[$i]->getCommentaire();
                                                                echo "</p>";
                                                        echo "</span>";
                                                echo "</div>";  
                                        } else {
                                                echo "<div class='commentaire'>";
                                                        echo "<span class='glyphicon glyphicon-plus' onclick='showHide(this)'>";
                                                                echo "<p style='display:none' class='commSaisie'>";
                                                                        echo "<input type='text' name='commentaire'>";
                                                                echo "</p>";
                                                        echo "</span>";
                                                echo "</div>";
                                        }
                                echo "</td>";
                                echo "<td>";
                                        echo $plannings[$i+1]->getChantier()->getNomChantier(). "<br>";
                                        echo $plannings[$i+1]->getVehicule()->getNomVehiculeABRG();
                                        if (!is_null($plannings[$i]->getCommentaire())) {
                                                echo "<div class='commentaire'>";
                                                        echo "<span class='glyphicon glyphicon-info-sign' onclick='showHide(this)'>";
                                                                echo "<p style='display:none' class='commAffiche'>";
                                                                        echo $plannings[$i]->getCommentaire();
                                                                echo "</p>";
                                                        echo "</span>"; 
                                                echo "</div>";
                                        } else {
                                                echo "<div class='commentaire'>";
                                                        echo "<span class='glyphicon glyphicon-plus' onclick='showHide(this)'>";
                                                                echo "<p style='display:none' class='commSaisie'>";
                                                                        echo "<input type='text' name='commentaire'>";
                                                                        echo "</p>";
                                                        echo "</span>";
                                                echo "</div>";
                                        }
                                echo "</td>";
                        echo "</tr>"; 
                        $j++;
                }
                ?>
	</tbody>
</table>

C'est donc la balise <p> contenu dans la balise <span class=glyphicon glyphicon-info-sign> qui doit recevoir la nouvelle marge.

Merci d'avance de votre aide,
Cordialement,
Skunka.

[Beginner.]

Je crois qu'une balise <p> dans une balise <span> n'est pas correcte...

[Skunka]

Dans un élan de désespoir, j'ai réessayé mon script (sans modification par rapport à celui que j'ai posté) et ça fonctionne...

A mon avis, le problème était le même que j'ai régulièrement avec mes fichiers .css, il suffit de vider le cache.

Une balise <p> dans un <span> n'est peut être pas correct mais cela fonctionne, alors pourquoi pas? :p

Sujet résolu,
Skunka.

[NoSmoking]

Bonjour,

Une balise <p> dans un <span> n'est peut être pas correct mais cela fonctionne, alors pourquoi pas? :p

il est toujours préférable de créer du code HTML conforme même si le moteur de rendu des navigateurs traite les erreurs et fait au mieux, rien ne te garantie donc que ce code soit pérenne