Un moyen propre d'appliquer un style

**manu f** · 01/05/2009, 07h34

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 :

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
 
<link rel="stylesheet" type="text/css" href="css/design.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
 $(document).ready(function(){
 
$("<?php echo '.newsM'.$numNews;?>";).click(function () {
    if ($("<?php echo '.descriNews'.$numNews;?>";).is(":hidden";))
    {
     $("<?php echo '.descriNews'.$numNews;?>";).slideDown("slow";);
     }
    else
    {
    $("<?php echo '.descriNews'.$numNews;?>";).hide();
    }
    });
    });
 
 </script>
 
</head>
 
<body>
 
  <div id="news">
  <h2>News</h2>
  <ul>
  </ul>
</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 :

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

1
2
3
 
<li class="<!--<?php echo 'newsM'.$numNews;?>-->">Alain bernard sort sont requins </li>
<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 :

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

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

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".

**Macmillenium** · 01/05/2009, 14h31

Bonjour,

Les feuilles de style dynamiques ?

**manu f** · 02/05/2009, 10h29

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

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 :

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
 
    <div id="news">
            <h2>News</h2>
                <?php
                include("conexion.php";);
             
                $reponse= mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5');
                 
                while($donnee = mysql_fetch_array($reponse))
                {
               ?>
               <h5 class="titre"><?php echo $donnee['nom']; ?><span class="date"><?php echo date('d/m/Y', $donnee['timestamp']); ?></span></h5>
               <div class="contenu">
                   <?php echo $donnee['description']; ?>
               </div>
               <?php
               }
              mysql_close();
              ?>
          </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 :

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

1
2
   <h5 id="<?php echo 'titre'.$donnee['id']; ?>">...</h5>
   <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.

C'est résolu, merci

Un moyen propre d'appliquer un style

JavaScript

Vue hybride

Discussions similaires

Partager

Partager