Afficher et cacher un div au survol d'une news d'une liste générée dynamiquement

**amdawb** · 13/02/2014, 14h49

Bonjour;
J'ai une liste de news avec pagination, et mon but est d'afficher la partie inférieure d'une news contenant des compteurs de vues(lectures) et commentaires de ladite news.
Voici une illustration de ce que je veux installer: Nom : exemple.PNG
Affichages : 587
Taille : 87,4 Ko

Nom : exemple.PNG
Affichages : 587
Taille : 87,4 Ko

Mes codes (basiques pour simplifier):

Code php :

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
<!DOCTYPE html>
<html > 
	<head>
		<meta charset="utf-8"/>
		<title>Infos et ......</title>
		<link href="style.css"  rel="stylesheet" type="text/css" ></link>
		<link href="pagination.css" media="screen" rel="stylesheet" type="text/css"></link>
		<script type="text/javascript">
			function affiche(counters, b) {document.getElementById(counters).style.display = b ? '' : 'none';}
		</script>
 
	</head>
	<body>
		<div id="container_news">
			<?php
			$adresse='localhost';
			$nom='root';
			$motdepasse='';
			$database='informations';
			require("pagination.php");
			mysql_connect($adresse,$nom,$motdepasse);
			mysql_select_db($database);
			mysql_query("SET NAMES 'utf8' ");
			if( isset($_GET['page']) && is_numeric($_GET['page']) ){
				$page = $_GET['page'];
			}else{
				$page = 1;
			} 
			$pagination = 3;
			$limit_start = ($page - 1) * $pagination;
			$sql = "SELECT * FROM news ORDER BY datecreation DESC LIMIT $limit_start, $pagination";
			$resultat = mysql_query($sql);
			if(isset($_GET['id'])){
				$id=intval(htmlentities($_GET['id']));
				if($id!=0){
					$sql='SELECT * FROM news WHERE id='.$id.'';
					$req=mysql_query($sql) or die(mysql_error());
					$data=mysql_fetch_assoc($req);
						echo date("d.m.Y G:i",strtotime($data['datecreation']));
						echo stripslashes($data['auteur']);
						echo stripslashes($data['titre']);
				}
				else{
					echo "Erreur";
				}
			}
			else{ 
				while ($donnee = mysql_fetch_assoc($resultat)){
					?>
					<div id="wrap">
						<div id="news_box" onmouseover="affiche('counters',true)" onmouseout="affiche('counters',false)">
							<div id="dt"><?php echo date("d.m.Y",strtotime($donnee['datecreation']));?></div>
							<div id="aut"><?php echo stripslashes($donnee['auteur']);?></div>
							<div id="ttr"><p><?php echo stripslashes($donnee['titre']);?></p></div>
						</div>
						<div id="counters" style="display:none;">--------ici module compteurs-------</div>
					</div>
					<hr>
					<?php
				}	
			}
			$nb_total = mysql_query('SELECT COUNT(*) AS nb_total FROM news');
			$nb_total = mysql_fetch_assoc($nb_total);
			$nb_total = $nb_total['nb_total'];
			$nb_pages = ceil($nb_total / $pagination);
			echo '<p class="pagination">' . pagination($page, $nb_pages) . '</p>';
			?>
		</div>
 
	</body>
</html>

Code css :

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

1
2
3
div#wrap{width: 750px;height: 250px;background-color: lime;}
div#news_box{width: 750px;height: 200px;background-color: yellow;}
div#counters{width: 750px;height: 50px;background-color: red;}

Mon problème est que seule la div#counters de la première news ( de chaque page chargée) est affichée au survol des news.
ça fait 2 jours que je cherche sur les forums la solution, mais en vain.
Auriez-vous une solution ou du moins une piste à explorer?
Merci

**whiteslash** · 13/02/2014, 14h57

Salut,

Question peut-être bête, mais pourquoi ne pas le faire en CSS avec un hover sur ton article ? Cela t'offrirait une compatibilité plus large à mon avis.

Ensuite ça ne marche pas car tu utilises mal les ID en HTML. Un ID doit être unique. Sinon, c'est des classes que tu utilises. Là si tu as 10 articles, tu auras 10 fois l'id counters qui est censé être unique, d'où le fait que ça ne fonctionne que pour le premier bloc. Car quand tu fais ton "getElementById" il ne te retourne que le premier qui correspond. Cela peut aussi poser problème avec ton CSS...

Ce serait donc bien, je pense, de commencer par utiliser des classes si c'est utilisé plusieurs fois, et d'utiliser les ID comme il se doit

Au final, soit tu passes l'éléments survolé en paramètre de ta fonction (donc "this", mais je pense que c'est une mauvaise idée d'attaquer aussi technique, ce serait bien que les bases soient claires déjà), soit plutôt counters_1, counters_2... pour séléctionner le bon (et bien entendu dans tes div counters, tu mets l'id).

**Bovino** · 13/02/2014, 15h27

Mes codes (basiques pour simplifier)

Tu aurais mieux fait de t'inspirer de Important : Les règles incontournables d'utilisation de ce forum et de poster le code HTML généré et non le PHP qui ne sert à rien en JavaScript !

**amdawb** · 13/02/2014, 15h47

Salut Whiteslash et merci pour ta réactivité.

Envoyé par whiteslash

Question peut-être bête, mais pourquoi ne pas le faire en CSS avec un hover sur ton article ? Cela t'offrirait une compatibilité plus large à mon avis.

En css avec un hover sur div#news_box? Comment faire? (la div#counters n'est pas un background-image, elle contient des compteurs de visite et de commentaires générés à partir de requêtes COUNT en sql à la bdd)

Envoyé par whiteslash

Ensuite ça ne marche pas car tu utilises mal les ID en HTML.

Je ne pense pas, car sur ma page news.php, tous mes id sont uniques. Pour preuve, ma liste de news marche impec. Peu-être qu'il faut faire quelque chose à ce niveau: function affiche(counters, b) {document.getElementById(counters).style.display = b ? '' : 'none';}. Une boucle?

Envoyé par whiteslash

Au final, soit tu passes l'éléments survolé en paramètre de ta fonction (donc "this", mais je pense que c'est une mauvaise idée d'attaquer aussi technique,...

Voudriez-vous expliciter svp ?

**whiteslash** · 13/02/2014, 15h52

Tu débutes, n'est-ce pas ? J'ai l'impression que les principes de base de HTML et CSS ne sont pas bien assimilés. Avant même d'attaquer le PHP, il faudrait que ces points soient un peu moins flous à mon avis

Est-ce que tu pourrais nous montrer le code HTML généré par ta page ? Ce sera plus simple pour t'expliquer ce qui ne va pas. (pour voir le code HTML généré, tu peux le faire en faisant clic droit + afficher le code source de la page).

**amdawb** · 13/02/2014, 16h05

En fait , j'essaie d'apprendre au fur et à mesure des besoins, et mon code est volontairement simplifié pour plus de clareté.

code généré:

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html > 
	<head>
		<meta charset="utf-8"/>
		<title>Infos et ......</title>
		<link href="style.css"  rel="stylesheet" type="text/css" ></link>
		<link href="pagination.css" media="screen" rel="stylesheet" type="text/css"></link>
		<script type="text/javascript">
                        function affiche(counters, b) {document.getElementById(counters).style.display = b ? '' : 'none';}
                </script>
 
	</head>
	<body>
		<div id="container_news">
 
					<div id="wrap">
						<div id="news_box" onmouseover="affiche('counters',true)" onmouseout="affiche('counters',false)">
							<div id="dt">12.02.2014</div>
							<div id="aut">fugain</div>
							<div id="ttr"><p>Un grand classique du JS est d'afficher ou de masquer à volonté les éléments de la page.
 
Derrière ce tour de passe-passe se cachent simplement les propriétés CSS display et visibility, qu'on modifie à n'importe quel moment en utilisant l'objet style comme vous avez appris à le faire.
 
Nous allons dans cette partie créer deux fonctions :
 
    toggleVisibility(elmt) : pour rendre l'élément visible ou invisible ;
 
    toggleDisplay(elmt) : pour afficher ou masquer l'élément.
 
Quelques remarques
visibility et display
 
Rappelons en images la différence entre les deux propriétés CSS suivantes :</p></div>
						</div>
						<div id="counters" style="display:none;">--------ici module compteurs-------</div>
					</div>
					<hr>
										<div id="wrap">
						<div id="news_box" onmouseover="affiche('counters',true)" onmouseout="affiche('counters',false)">
							<div id="dt">12.02.2014</div>
							<div id="aut">furious & fast</div>
							<div id="ttr"><p>Un grand classique du JS est d'afficher ou de masquer à volonté les éléments de la page.
 
Derrière ce tour de passe-passe se cachent simplement les propriétés CSS display et visibility, qu'on modifie à n'importe quel moment en utilisant l'objet style comme vous avez appris à le faire.
 
Nous allons dans cette partie créer deux fonctions :
 
    toggleVisibility(elmt) : pour rendre l'élément visible ou invisible ;
 
    toggleDisplay(elmt) : pour afficher ou masquer l'élément.
 
Quelques remarques
visibility et display
 
Rappelons en images la différence entre les deux propriétés CSS suivantes :</p></div>
						</div>
						<div id="counters" style="display:none;">--------ici module compteurs-------</div>
					</div>
					<hr>
										<div id="wrap">
						<div id="news_box" onmouseover="affiche('counters',true)" onmouseout="affiche('counters',false)">
							<div id="dt">12.02.2014</div>
							<div id="aut">fanfan la tulipe</div>
							<div id="ttr"><p>Un grand classique du JS est d'afficher ou de masquer à volonté les éléments de la page.
 
Derrière ce tour de passe-passe se cachent simplement les propriétés CSS display et visibility, qu'on modifie à n'importe quel moment en utilisant l'objet style comme vous avez appris à le faire.
 
Nous allons dans cette partie créer deux fonctions :
 
    toggleVisibility(elmt) : pour rendre l'élément visible ou invisible ;
 
    toggleDisplay(elmt) : pour afficher ou masquer l'élément.
 
Quelques remarques
visibility et display
 
Rappelons en images la différence entre les deux propriétés CSS suivantes :</p></div>
						</div>
						<div id="counters" style="display:none;">--------ici module compteurs-------</div>
					</div>
					<hr>
					<p class="pagination"><span class="prevnext disabled">&laquo; Précédente</span> <span class="current">1</span> <a href="?page=2">2</a> <a href="?page=3">3</a> &hellip; <a href="?page=7">7</a> <a href="?page=8">8</a> <a class="prevnext" href="?page=2" title="Page suivante">Suivante  &raquo;</a></p>		</div>
 
	</body>
</html>

**whiteslash** · 13/02/2014, 16h17

D'accord, je vais donc procéder en deux étapes pour mon explication :

Tout d'abord, quand tu nommes un élément HTML avec un id="blabla", il faut qu'il soit unique. Or dans ton cas il y a plusieurs éléments avec des id non uniques, notamment les <div id="counters" style="display:none;">--------ici module compteurs-------</div>
Dans le cas où tu souhaites réutiliser des bouts de CSS pour plusieurs éléments similaires (c'est le cas pour tes counters), il faut utiliser une classe. Les counters deviennent donc : <div class="counters">--------ici module compteurs-------</div>. Il faudra appliquer cette modification sur tous les éléments qui se répètent.
Ensuite, cela implique aussi un changement du CSS, plutôt simple, il suffit de remplacer "div#counters" en "div.counters". Le sélecteur de classe étant le point. Une fois que tu auras atteint le même résultat qu'actuellement mais avec des classes, on sera déjà sur de meilleures bases

Si tu souhaites utiliser du CSS, il "suffit" de mettre ces deux lignes :

Code CSS :

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

1
2
3
4
5
 
/*par défaut on cache les counters*/
.counters{display:none}
/*si on survole la box, on affiche le counters */
.news_box:hover .counters{display:block}

Si tu souhaites toujours faire en javascript, avec ta fonction affiche, alors, il faudra modifier ton code PHP à plusieurs endroits.

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
while ($donnee = mysql_fetch_assoc($resultat)){
					?>
					<div class="wrap">
						<div class="news_box" onmouseover="affiche('counter_<?php echo $donnee["id"];?>',true)" onmouseout="affiche('counter_<?php echo $donnee"'id"];?>',false)">
							<div class="dt"><?php echo date("d.m.Y",strtotime($donnee['datecreation']));?></div>
							<div class="aut"><?php echo stripslashes($donnee['auteur']);?></div>
							<div class="ttr"><p><?php echo stripslashes($donnee['titre']);?></p></div>
						</div>
						<div id="counter_<?php echo $donnee['id'];?>"class="counters">--------ici module compteurs-------</div>
					</div>
					<hr>
					<?php
				}

En gros, on utilise des VRAIS ID (uniques donc) pour chaque compteur, à partir de l'ID de la news.

Je n'ai pas testé le code, mais j'espère que tu comprendras l'idée

Afficher et cacher un div au survol d'une news d'une liste générée dynamiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager