Affichage de news en temps réels

Bonjour,

Je desire afficher des news (5 par exemple) sur ma home page en temps reel. Je n'ai pas de problemes sur la partie temps reels.
C'est le cote visuel que je ne maitrise pas.

Je veux afficher au maximum 5 news. Quand je recois par exemple 2 nouveaux items, alors je desire que les 2 plus anciens disparaissent, que les 2 nouveaux s'ajoutent en bas de la liste et le tout un peu animé.

Avez vous une idée ?

Merci à vous

Bonjour,
tu ajoutes les news dans le conteneur destination et une fois cela réalisé tu détruis celles en trop !

Citation:

...et le tout un peu animé.

il n'y a que ton imagination qui pourra te donner le chemin à suivre, la mienne me ferais faire un truc dan s le style

réduction, en hauteur, de la news #1, la 1st ajoutée apparaît ;
réduction, en hauteur, de la news #2, la 2nd ajoutée apparaît ;
suppression des #news #1 et #2.

Ce qui me pose probleme c'est l'animation, le cote interface.
Pour la manipulation du tableau y a pas de soucis

Je dirais betement, tu supprime le premier noeud "news" de ton conteneur, puis tu push le nouveau à la fin

Tu pourrais tiré partie du CSS et la propriété transform pour diminuer la 1st new avant de la supprimer.

Voici un petit exemple qui est essentiellement basé sur l'ajout d'une class à la 1st new, c'est l'ajout de cette class qui déclenche l'animation, cet ajout étant réalisé via la méthode classList.add, dans l'exemple j'ai utilisé la méthode classList.toogle pour simuler de l'Ajax « perpétuel », je te laisse découvrir.

Code:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simulation apparition de news</title>
<meta name="Author" content="NoSmoking">
<style>
 main {
   max-width:60em;
   margin:0 auto;
 }
section {
  width: 40em;
  height: 20em;
  padding: 1em;
  border: 1px solid #ccc;
  overflow-y: scroll;
}
.news {
  max-height: 20em;
  overflow: hidden;
}
.news p {
  margin: 0 .5em;
}
.repli {
  max-height: 0;
  transition: all 1s ease;
}
</style>
</head>
<body>
<main>
  <button>...lance requête...</button>
  <section id="les_news">
    <article class="news">
      <h1>Article #1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit lectus ac finibus viverra. Proin laoreet quam enim, quis porta augue auctor et. Duis dapibus velit a purus tempus sagittis. Suspendisse euismod metus quam, in convallis libero mollis ut. Suspendisse potenti. Maecenas blandit arcu lorem, quis viverra eros varius eget. Praesent dui velit, mattis sed lorem id, rutrum interdum turpis. Phasellus suscipit ligula in libero molestie, vel interdum tortor pellentesque. Nullam et accumsan lorem. Curabitur auctor erat bibendum, commodo neque in, molestie est. Donec molestie malesuada purus id faucibus. Vestibulum scelerisque libero id orci vestibulum, quis luctus urna tempus. Curabitur venenatis rutrum nulla. Proin fermentum sem purus, quis mattis velit dapibus a. Fusce in fermentum magna, efficitur lacinia nisi. Donec sit amet nisl orci.</p>
     </article>
  </section>
</main>
<!-- DIV pour simulation d'appel Ajax -->
<div id="div_ajax" style="display:none">
  <article class="news">
    <h1>Article #2</h1>
    <p>Cras non mauris vitae lectus gravida eleifend. Suspendisse sed leo rutrum, luctus eros ac, molestie ligula. Duis pretium fermentum ullamcorper. Phasellus eget semper purus, at convallis ante. Integer non convallis lacus, vitae ullamcorper ex. Integer bibendum efficitur rhoncus. Maecenas a neque non odio lacinia sodales id at nisl. Sed vel libero luctus, sagittis libero a, finibus turpis. Curabitur placerat sed tellus ac luctus. Morbi hendrerit sodales lobortis. Sed malesuada metus at aliquet mollis. Curabitur sit amet metus id arcu molestie gravida. Cras vel arcu lobortis, tempus erat nec, eleifend mauris. Cras enim lorem, blandit eu faucibus ac, tempus at turpis.</p>
  </article>
  <article class="news">
    <h1>Article #3</h1>
    <p>Curabitur eu euismod quam. Donec pulvinar condimentum felis, nec fermentum nulla convallis eu. Duis sed ante ut magna bibendum semper. Ut lobortis dignissim egestas. Pellentesque interdum, orci sed varius ornare, ante libero ultrices urna, eu pretium tellus ante vitae nisl. Ut consequat, turpis id accumsan auctor, mi orci luctus erat, sit amet condimentum risus est a risus. Maecenas egestas eu lacus vitae malesuada. Donec fringilla mauris diam, vitae faucibus risus facilisis in. Aenean porta neque sit amet arcu ullamcorper, eu pulvinar justo ullamcorper. Aliquam id nisi iaculis, convallis est in, pellentesque ex. Aliquam vestibulum enim ac hendrerit faucibus. Fusce eget nulla eget dui finibus pulvinar. Integer venenatis feugiat sagittis. Vestibulum tempor tincidunt convallis.</p>
  </article>
</div>
<script>
/**
* simulation d'une requête
**/
function ajax(){
  // ajoute la new
  addNew();
  // relance la requête
  setTimeout( ajax, 3000);
}
 
function killNew(){
  var oSrce = document.querySelector('#les_news');
  var oDest = document.querySelector('#div_ajax');
  // récup. la 1st news
  var oNew = oSrce.querySelector('article');
  // effet sur la 1st
  oNew.classList.toggle('repli');
  // lance kill apres repli
  setTimeout( function(){
      // normalement on ferait
      // oSrce.removeChild( oNew);
      // oBtn.disabled = false;
 
      // pour la démo on recycle les news
      oDest.appendChild( oNew);
      oNew.classList.toggle('repli');
    },
    1000);
}
function addNew(){
  var oSrce = document.querySelector('#div_ajax');
  var oDest = document.querySelector('#les_news');
  // récup. d'une news
  var oNew = oSrce.querySelector('article');
  if( oNew){
    oBtn.disabled= true;
    // affichage
    oDest.appendChild( oNew);
    // demande kil de la 1st
    killNew();
  }
}
var oBtn = document.querySelector('button');
oBtn.onclick = ajax;
</script>
</body>
</html>

Pour l'exemple les news sont stockées dans une <div> masquée, transférée une à une dans la zone d'affichage puis après effet elle ne sont pas détruite mais remise dans la <div> d'origine. (effet de slide en quelque sorte)

Merci à vous.

Vous m'avez bien aidé