11521 sujets

JavaScript, DOM et API Web HTML5

Faire défiler un texte verticalement

Bonjour,

je voudrais savoir si le javascript est la seule solution à ma demande car je ne maîtrise pas le javascript.
Mon besoin : dans un div de ma sidebar, j'aimerais bien afficher la liste des gagnants d'un jeu. J'utilise un plugin qui me permet d'avoir automatiquement la liste des gagnants en intégrant un shortcode.
Dans ce shortcode, je peux choisir le nombre de gagnants que je souhaite voir. J'aimerais bien choisir 15 mais n'en afficher que 5 et que dans mon div et que la liste bouge toute seule. Comme c'est un peu difficile à expliquer, vous pouvez regarder sur cette page d'exemple :
https://www.prizeo.com/prizes/tori-kelly/tea-time-in-la : liste des Current donors sur la droite.
Merci de votre aide !
Marine
Salut,

Oui, il faudra que tu en passes par Javascript pour afficher tes gagnants en défilement.
As-tu moyen de modifier le code renvoyé par ton plugin ? Le shortcode renvoie du html, il faudrait idéalement que le plugin renvoie du JSON en appelant une page dans laquelle on ferait passer un argument qui indique que l'on fait une requête AJAX.
Si c'est pas possible, il faudrait connaître exactement le balisage renvoyé par ton shortcode afin d'extraire les données depuis ce code.
OK cool ! Je garde le sujet ouvert et dès que j'achète le bon plugin je reviens Smiley cligne (j'hésite encore entre 2).
Merci et bonne soirée !
Marine
Je ferais un truc comme ça : http://codepen.io/korell/pen/BKOBzw
A partir de tes 15 éléments de liste, on en affiche que 5 puis on déplace le bloc ul toutes les x secondes vers le haut.
Je reste à dispo si tu as besoin d'explications sur la manière dont j'ai fait ce bout de code...
$(function(){
  var winners_list = $('.winners li');
  var ul_height = $('.winners').outerHeight();
  $('.winners').append(winners_list.clone());

  var i = 0;
  (function displayWinners(i){
    setTimeout(function(){
      if( $('.winners').css('top') == (-1 * ul_height) + 'px'){
        $('.winners').css('top', '0');
      }
      var li_height = $(winners_list[i]).outerHeight();
      $('.winners').animate({
        top: '-=' + li_height + 'px'}, 500);
      if( i == winners_list.length - 1){
        i = 0;
      }else{
        i++;
      }
      displayWinners(i);
      
    }, 1500);
  })(i);
  
});

EDIT : tu l'auras sans doute vu, j'utilise jQuery pour ce code, je ne l'avais pas précisé[/i]
Modifié par MatthieuR (25 Apr 2016 - 00:38)
Bonjour,

super ce petit code, par contre j'ai mis une boucle PHP pour générer mes éléments de la liste et malheureusement, au bout de 2 passages, la liste devient vide !

Est-ce normal ?
Merci.
Salut SwoOn et bienvenu,

Le précédent script est en JS, donc n'agit que du côté client, rien à voir donc avec les données que tu génères en PHP.
Ton souci se trouve du côté de ton script PHP qui ne doit pas renvoyer une liste correcte. Peux-tu coller ici le code de ta liste que tu as dans ta page (code source HTML) ainsi que ton script PHP qui affiche cette liste ?
Merci pour la réponse rapide et le petit bienvenu Smiley cligne

Pour le code que j'utilise, c'est ça, et oui je pense que ça plante au niveau de mon php !

  <div class="container">
    <div class="live-infos">
		<ul class="winners">
 		<?php while ($data = mysqli_fetch_array($req)){?>
		<li>
		<div class="row">
			<div class="col-xs-12 text-left">
			<h3><i class="fa fa-fw fa-trophy"></i> <?php echo $data[Competition];//
			if ($data[Playoffs] != 'Non'){echo ' - '.$data[Playoffs];} echo ', ';?>
			<small><?php echo $data[Date]; ?></small></h3>
			<div class="row">
				<div class="col-xs-4 text-right"><strong><?php echo $data[Equipe_1];?></strong></div> 
				<div class="col-xs-3 text-center td"></div>
				<div class="col-xs-4 text-left"><strong><?php echo $data[Equipe_2]; ?></strong></div>
			</div>
			<div class="row">
			<div class="col-xs-4 text-right">
			<?php echo $data['Coach_1'];?></div>
			<div class="col-xs-3 text-center td"><?php echo $data[Score_1];?> <i class="fa fa-fw fa-star"></i> <?php echo $data[Score_2]; ?></div>
			<div class="col-xs-4 text-left">
			<?php echo $data['Coach_2'];?></div>
			</div>	
			</div>
		</div>
		<?php }?>
		</li>
	</ul>
    </div>
  </div>


pourtant quand je lui demande d'afficher ma liste, j'ai bien tous les éléments, je précise que j'ai ordonné ma liste suivant Id !
Oui, en effet, crée un nouveau sujet en postant le contenu de ta demande.
Je répondrais sur ce nouveau sujet.
Sujet clos
Aller à