IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Par défaut Afficher et cacher un div au survol d'une news d'une liste générée dynamiquement
    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
    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

  2. #2
    Membre éprouvé
    Avatar de whiteslash
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2013
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 75
    Par défaut
    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).

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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 !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre confirmé
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Par défaut
    Salut Whiteslash et merci pour ta réactivité.

    Citation Envoyé par whiteslash Voir le message
    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)

    Citation Envoyé par whiteslash Voir le message
    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?

    Citation Envoyé par whiteslash Voir le message
    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 ?

  5. #5
    Membre éprouvé
    Avatar de whiteslash
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2013
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 75
    Par défaut
    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).

  6. #6
    Membre confirmé
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Par défaut
    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>

  7. #7
    Membre éprouvé
    Avatar de whiteslash
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2013
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 75
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher ou cacher un div
    Par Décibel dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 21/10/2011, 19h09
  2. Afficher une div au survol de la souris sur une autre div
    Par Stouille89 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 24/06/2010, 13h54
  3. [XL-2007] Afficher une checkbox dans une feuille si une checkbox d'une autre feuille est cochée
    Par JessieCoutas dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 18/08/2009, 13h35
  4. afficher ou cacher un div avec image
    Par avia767 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 14/11/2008, 17h34
  5. Afficher une image dans une cellule d'une gridview
    Par guigui11 dans le forum ASP.NET
    Réponses: 3
    Dernier message: 13/09/2007, 10h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo