système de news comme le site du zéro

l'article de news change après 5s

Sujet résolu

20 décembre 2010 à 10:58:35

slt tous les zéros
tous est dit dans le titre alors merci de m'aider c'est mon premiers poste. :-°

pour mieux expliquer: mon article change toutes les 5 secondes
Edit:

<?php
mysql_connect("localhost", "root", "");
mysql_select_db("BDD");
// On récupère les 5 dernières news
$retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5');
while ($donnees = mysql_fetch_array($retour))
{
?>
<div class="news">
    <h3>
        <?php echo $donnees['titre']; ?>
        <em>le <?php echo date('d/m/Y à H\hi', $donnees['time']); ?></em>
    </h3>
    
    <p>
    <?php
    // On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
    $contenu = nl2br(stripslashes($donnees['texte']));
    echo $contenu;
	$image = '<img src="'.$donnees['chemin'].'"/>';
     echo $image; 
    ?>
    </p>
</div>
<?php
} // Fin de la boucle des news
?>

Thorolf

20 décembre 2010 à 11:05:32

Je ne suis pas sur :
tu veut que ca change toute les 5 secondes ou ca change alors que tu ne veut pas ?

chedy

20 décembre 2010 à 11:07:14

changer toutes les 5 secondes

Thorolf

20 décembre 2010 à 11:25:19

dans ce cas va falloir que tu fasse du javascript.
soit tu charge toute tes news et tu te sert de JS pour les afficher les unes après les autre. soit en faisant de l'ajax

chedy

20 décembre 2010 à 11:30:03

oui je cherche comment le faire avec JS
et j'ai besoin d'aide pour réaliser le code parce que je suis un débutant je crois qu'il faut utiliser setInterval()

Thorolf

20 décembre 2010 à 11:40:49

on genere tes 5 news avec chacune un id du type "news_<index>" et on les masque.

<?php
$retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5');
$i = 0;
while ($donnees = mysql_fetch_array($retour))
{
?>
<div class="news" id="news_<?php echo $i++; ?>" style="display:none" >
    <h3>
        <?php echo $donnees['titre']; ?>
        <em>le <?php echo date('d/m/Y à H\hi', $donnees['time']); ?></em>
    </h3>
    
    <p>
    <?php
    // On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
    $contenu = nl2br(stripslashes($donnees['texte']));
    echo $contenu;
	$image = '<img src="'.$donnees['chemin'].'"/>';
     echo $image; 
    ?>
    </p>
</div>
<?php
} // Fin de la boucle des news

puis le javascript :

//init des variables
var i = 0;
var j = 0;
function affichage_news()
{
    document.getElementById('news_'+j).style.display = "none"; // on masque la news precedement affichée
    document.getElementById('news_'+i).style.display = "block"; //on affiche la nouvelle news
    j = i; //on sauvegarde la news actuelement affichée
    i = (i+1)%5; //on incremente le compteur 
    setTimeout( "affichage_news()", 5000 ); //on rapelle la fonction dans 5 secondes
}

affichage_news();

PS : preferer setTimeout a setinterval qui pose des pb sur certains navigateurs

neffiou

20 décembre 2010 à 11:47:59

code : http://css-tricks.com/creating-a-slick [...] ntent-slider/

aperçu : http://css-tricks.com/examples/FeaturedContentSlider/

Cela est la solution,

chedy

20 décembre 2010 à 12:50:11

salut
merci pour vous deux mais throlf il te manque un truc une fois qu'il a lu les news il ne revient plus à la premier
comment on peut fixé ca

Thorolf

20 décembre 2010 à 12:52:22

normalement avec le i = (i+1) %5; ca devrai marcher, i devrai revenir a 0;

EDIT : je viens de tester, ca marche

chedy

20 décembre 2010 à 13:21:16

chez moi ce n'est pas le cas :euh:

met tous le code pour compare stp et merciiiii

Thorolf

20 décembre 2010 à 13:24:45

si tu peut faire un copié coller du code html généré pour que je verifie ca

mon code de test :

<div id="news_0" style="display:none" > contenu 1 </div>
<div id="news_1" style="display:none" > contenu 2 </div>
<div id="news_2" style="display:none" > contenu 3 </div>
<div id="news_3" style="display:none" > contenu 4 </div>
<div id="news_4" style="display:none" > contenu 5 </div>
<script>
//init des variables
var i = 0;
var j = 0;
function affichage_news()
{
    document.getElementById('news_'+j).style.display = "none"; // on masque la news precedement affichée
    document.getElementById('news_'+i).style.display = "block"; //on affiche la nouvelle news
    j = i; //on sauvegarde la news actuelement affichée
    i = (i+1)%5; //on incremente le compteur 
    setTimeout( "affichage_news()", 5000 ); //on rapelle la fonction dans 5 secondes
}

affichage_news();
</script>

chedy

20 décembre 2010 à 13:29:11

<body onload="affichage_news();">
//...
<script type="text/javascript">
var i = 0;
var j = 0;
function affichage_news()
{
    document.getElementById('news_'+j).style.display = "none"; // on masque la news precedement affichée
    document.getElementById('news_'+i).style.display = "block"; //on affiche la nouvelle news
    j = i; //on sauvegarde la news actuelement affichée
    i = (i+1)%5; //on incremente le compteur 
    setTimeout( "affichage_news()", 1000 ); //on rapelle la fonction dans 5 secondes
}
</script>
<div id="milieu"><?php
mysql_connect("localhost", "root", "");
mysql_select_db("BDD");
$retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 2');
$i = 0;
while ($donnees = mysql_fetch_array($retour))
{
?>
<div class="news" id="news_<?php echo $i++; ?>" style="display:none" >
 <h3>A la une:<?PHP echo $donnees['titre'];?> <em>le <?php echo date('d/m/Y à H\hi', $donnees['time']); ?></em></h3>
</div>
<?php 
}
?></div></body>

Tillertan

20 décembre 2010 à 13:38:01

Sérieux, il serait temps d'apprendre à utiliser la recherche du SdZ, cette demande passe chaque semaine au moins.

http://www.siteduzero.com/forum-83-589 [...] html#r5708802