Un moyen propre d'appliquer un style

Un moyen propre d'appliquer un style - HTML/CSS - Programmation

Marsh Posté le 01-05-2009 à 06:44:49    

Bonjour,
 
Mon but est d'appliquer un effet slideDown() du framework JQuery sur des news gérer dynamiquement (PHP+MySQL), j'y connais pas grand chose en JavaScript donc voilà comment j'ai fais :

Code :
  1. ...
  2.         <link rel="stylesheet" type="text/css" href="css/design.css" />
  3.         <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  4.     <!--
  5.     <script type="text/javascript">
  6.     $(document).ready(function(){
  7.    
  8.     $("<?php echo '.newsM'.$numNews;?>";).click(function () {
  9.       if ($("<?php echo '.descriNews'.$numNews;?>";).is(":hidden";))
  10.       {
  11.         $("<?php echo '.descriNews'.$numNews;?>";).slideDown("slow";);
  12.       }
  13.       else
  14.       {
  15.         $("<?php echo '.descriNews'.$numNews;?>";).hide();
  16.       }
  17.     });
  18.     });
  20.    </script>
  21.     -->
  22.     </head>
  24.     <body>
  26.         <div id="news">
  27.         <h2>News</h2>
  28.             <ul>
  30.             </ul>
  31.         </div>


en gros j'ai été obligé d'ajouter une instruction php ajoutant lenuméro de la news à mes class .descriNews et .newM, histoire d'identifier chaque news et d'associer l'effet slideDown()au bon descriptif.
 
le système de news ajoutera dans le div news (entre les balise ul) ce truc :

Code :
  1. <li class="<!--<?php echo 'newsM'.$numNews;?>-->">Alain bernard sort sont requins </li>
  2.               <div class="<!--<?php echo 'descriNews'.$numNews;?>-->">description de la news</div>


et le style que je cherche à appliquer sur mon div .descriNews[numero_de_la_news] est :

Code :
  1. .descriNews[numero_de_la_news]{
  2. display:none;
  3. margin-left:10%;
  4. border-left:1px solid #d6e1ec;
  5. border-right:1px solid #d6e1ec;
  6. background-color:#fff5ff;
  7. padding:3px;
  8. }


vous l'aurez compris le problème c'est que mon .descriNews est suivis du numéro de la news pour qu'il soit associé à la bonne news donc impossible de placer les style dans une feuille css, je cherche donc un moyen pas trop lourd d'appliquer ce style car il y a pas mal d'attribut et mettre tout ça dans ma balise div j'ai peur que ça face un peu "too much".


Message édité par manu f le 01-05-2009 à 06:50:48

---------------
Pire qu'une pierre dans la chaussure, est un grain de sable dans la capote.  Coluche.
Reply

Marsh Posté le 01-05-2009 à 06:44:49   

Reply

Marsh Posté le 01-05-2009 à 11:38:29    

N'oublie pas que tu peux mettre plusieurs classes :

Code :
  1. <li class="descriNews35 news bidule pouet">


Aussi vu que chaque news a sa propre classe, autant la convertir en id :

Code :
  1. <li id="descriNews35" class="descriNews">

Reply

Marsh Posté le 02-05-2009 à 08:50:21    

J'ai finalement abandonné le système que je voulais faire pour le moment, trop de problème et je maitrise pas assez le JavaScript donc je pense que ça nuit à ce que je souhaite faire :D
 
Mon but été de géré un affichage dynamique d'un système de news dynamique lui aussi.
 
Le système de news j'ai aps eu de soucis à le développer, le problème viens de ce que je souhaite faire lors de l'affichage, à savoir :
- afficher les 5 première news de la BDD
- lors du clic sur le titre de la news, un descriptif de celle ci apparait juste en desous de la news en question
 
Voilà comment j'affiche les news en question :
 
       

Code :
  1. <div id="news">
  2.         <h2>News</h2>
  3.             <?php
  4.             include("conexion.php";);
  5.          
  6.             $reponse= mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5');
  7.              
  8.             while($donnee = mysql_fetch_array($reponse))
  9.             {
  10.             ?>
  11.             <h5 class="titre"><?php echo $donnee['nom']; ?><span class="date"><?php echo date('d/m/Y', $donnee['timestamp']); ?></span></h5>
  12.             <div class="contenu">
  13.                 <?php echo $donnee['description']; ?>
  14.             </div>
  15.             <?php
  16.             }
  17.             mysql_close();
  18.             ?>
  19.         </div>


Le soucis réside dans le fait que lors du clic sur le titre d'une news un descriptif (mon div .contenu) de la news s'affiche juste en dessous de celle ci.
 
Je m'étais orienté vers le framework JQuery, j'avais réussi à faire un semblant d'effet de ce que je voulais mais le problème c'est que celui ci doit être géré de facon dynamique.
En gros, je devais signaler à JavaScript que tel contenu est lié à tel titre de news de manière à ce que le bon descriptif s'affiche en fonction de la news cliqué.
 
Et ce problème couplé au soucis de mise en forme de mon contenu qui impliqué du css dynamique également mon fait abandonné pour le moment, car le seul moyen que j'avais trouvé pour associé le bon descriptif au bon titre de la news était de récupéré l'id de la news dans la BDD.
 
Pour l'appliquer à mes balises <h5> (le titre de la news) et <div> le contenu de la news) de la manière suivante :
 

Code :
  1. <h5 id="<?php echo 'titre'.$donnee['id']; ?>">...</h5>
  2. <div id="<?php echo 'contenu'.$donnee['id']; ?>">...</div>


Ce qui m'aurais permis après dans un script JavaScript d'associer un titre de la news avec son contenu et d'afficher celui ci en fonction du clic effectuer.


Message édité par manu f le 02-05-2009 à 08:54:31

---------------
Pire qu'une pierre dans la chaussure, est un grain de sable dans la capote.  Coluche.
Reply

Marsh Posté le 02-05-2009 à 11:28:08    

Il faut surtout une meilleure structure sémantique. Là t'as les titres et les descriptif qui se suivent, il faut les regrouper. Genre dans la recommendation HTML4 sur les titres :

Citation :

A heading element briefly describes the topic of the section it introduces.


Note "section". Et section en HTML on utilise un div. Donc on peut s'orienter vers quelque chose comme ça :

Code :
  1. <div id="news">
  2.   <h2>News</h2>
  3.   <div class="news">
  4.     <h3>Bidule <span class="date">5 janvier 2018</span></h3>
  5.     <p class="desc">
  6.       Lorem ipsum dolor sit amet...
  7.     </p>
  8.   </div>
  9.   <div class="news">
  10.     <h3>Machin <span class="date">8 février 2019</span></h3>
  11.     <p class="desc">
  12.       Ipsum sir dolor amet
  13.     </p>
  14.   </div>
  15.   ...
  16. </div>


Note qu'une classe "titre" ne sert pas à grand chose, la balise hX l'indique déjà.

 

Niveau PHP, y'a un grave problème, tu n'escapes pas les données. On peut injecter du code HTML comme on veut. Si ce n'est pas voulu (genre si t'as un éditeur type tinyMCE ou FCKmachin), faut protéger tout ça :

Code :
  1. <h3><?php echo htmlspecialchars($donnee['nom']) ?></h3>


Donc htmlspecialchars partout.

 

Ensuite niveau JavaScript ça devient trivial, surtout avec JQuery. D'abord on planque les descriptif (très important de faire ça en script et pas en CSS. Pour les JavaScript désactivés, on laisse le texte affiché.

 

On stocke le descriptif de la news dans une variable, puis dans le click du titre, on "toggle" ce descriptif :

 
Code :
  1. $(document).ready(function() {
  2.     $('#news .news').each(function(i, news) {
  3.             var desc = $(news).find('.desc');
  4.             desc.hide();
  5.             $(news).find('h3').click(function() {
  6.                 desc.toggle();
  7.             });
  8.         });
  9. });


Et voilà :)


Message édité par FlorentG le 02-05-2009 à 11:28:35
Reply

Marsh Posté le 02-05-2009 à 13:37:02    

Ca fonctionne à merveille  :ouch:  merci beaucoup www.object-manu.net
et pour le html je dois avouer que c'est nettement plus jolie.  
 
Pour ce qui est du php c'est un oubli :x j'avais tout fais dans ma page de gestion mais pas dans l'index :]


Message édité par manu f le 02-05-2009 à 22:21:44

---------------
Pire qu'une pierre dans la chaussure, est un grain de sable dans la capote.  Coluche.
Reply

Marsh Posté le 02-05-2009 à 14:06:53    

Aller courage, ça viendra :D Dis-toi que ça m'a pris même pas 2 minutes pour faire ça :D Tu peux très bien y arriver aussi

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed