Un moyen propre d'appliquer un style

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Un moyen propre d'appliquer un style

manu f

L'art ephémère.

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 :

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

<li class="">Alain bernard sort sont requins </li>
<div class="">description de la news</div>

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

Code :

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

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.

Publicité

FlorentG

Unité de Masse

N'oublie pas que tu peux mettre plusieurs classes :

Code :

<li class="descriNews35 news bidule pouet">

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

Code :

<li id="descriNews35" class="descriNews">

manu f

L'art ephémère.

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 :

<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 :

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

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.

FlorentG

Unité de Masse

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 :

<div id="news">
<h2>News</h2>
<div class="news">
<h3>Bidule <span class="date">5 janvier 2018</span></h3>
<p class="desc">
Lorem ipsum dolor sit amet...
</p>
</div>
<div class="news">
<h3>Machin <span class="date">8 février 2019</span></h3>
<p class="desc">
Ipsum sir dolor amet
</p>
</div>
...
</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 :

<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 :

$(document).ready(function() {
    $('#news .news').each(function(i, news) {
            var desc = $(news).find('.desc');
            desc.hide();
            $(news).find('h3').click(function() {
                desc.toggle();
            });
        });
});

Et voilà

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

manu f

L'art ephémère.

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.

FlorentG

Unité de Masse

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

FORUM HardWare.fr

Programmation

HTML/CSS

Un moyen propre d'appliquer un style

Sujets relatifs
comment créer son propre site de ventes privées ?	[VBA EXCEL] Récupérer son propre email Outlook dans une variable
Appliquer CSS à un caractère particulier.	Quel est le meilleur moyen de réaliser une grille de sudoku avec GTK ?
Ma propre SDL	Problème bête, feuille de style html
problème de style de dessin d'un rectangle	Port série tout ça : LA solution propre via BOOST::ASIO
Site contributif du style Blog commun	pbm avec le style d'un span imbriqué
Plus de sujets relatifs à : Un moyen propre d'appliquer un style

Page générée en 0.104 secondes