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