JS affichage de news les unes après les autres

JS affichage de news les unes après les autres - HTML/CSS - Programmation

Marsh Posté le 24-04-2010 à 01:42:34    

Bonsoir,
 
débutante html php, je cherche un script permettant d'afficher des news, enregistrées dans une base de données, chaque news ayant une durée définie préalablement (et enregistrée dans l'un des champs de la dite table depuis laquelle je pioche mes infos de news à afficher). (il est tard j'espère être claire).
et si en plus l'affichage pouvait être "tout doux", ce serait le bonheur...  :)  
(genre un joli petit fondu au blanc entre chaque news)
 
mais voilà le JS, je n'y connais rien. alors si une bonne âme passe par là pour me filer un coup de pouce, je suis preneuse.
 
j'accepte les scripts tout prêts, les idées de scripts, les ptis tuyaux qui m'amèneront à des tutos interressants...
 
Pour le moment, j'ai trouvé ça, qui le fait grâce à un clic, mais je souhaiterais automatiser la chose entre chacune de mes news, appear & hide (Click here & Reset, on & off...)...'fin bref, automatique entre chaque news.  
 

Code :
  1. <div id="appear_demo" style="display:none; width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
  2. <ul>
  3.   <li><a href="#" onclick="$('appear_demo').appear(); return false;">Click here for a demo!</a></li>
  4.   <li><a href="#" onclick="$('appear_demo').hide(); return false;">Reset</a></li>
  5. </ul>


 
Voir à la page, où tout est expliqué, avec une petite démo pour ceux qui ne verraient pas trop de quoi je parle  ;)  http://wiki.github.com/madrobby/sc [...] ect-appear
 
Je vous remercie d'avance


Message édité par clRon le 25-04-2010 à 15:35:14
Reply

Marsh Posté le 24-04-2010 à 01:42:34   

Reply

Marsh Posté le 24-04-2010 à 11:48:04    

ben allez quoi, personne ne travaille en JS ?  


Message édité par clRon le 25-04-2010 à 15:34:02
Reply

Marsh Posté le 25-04-2010 à 14:12:51    

un petit up. Je m'arrache les cheveux. Je peux faire défiler ces news les unes après les autres mais pas les afficher un temps donné, les unes à la suite des autres. Ce n'est peut_être pas du JS ?
 
SVP, quelqu'un aurait-il une piste ?

Reply

Marsh Posté le 25-04-2010 à 15:33:24    

Je suppose que mon sujet ne passionne pas la communauté, mais au cas où quelqu'un passerait par là et s'y intéresserait, je poursuis mes recherches quand même.
 
 j'ai trouvé une autre piste, mais que je ne sais pas utiliser et que je n'arrive pas à mettre en place.  
 
je ne saisis pas l'utilité des [] souvent, ni l'ensemble des langages utilisés mais celà semble une bonne piste. Si qq'un peut m'expliquer svp, ce serait sympa vraiment.
 
Le fichier jquery.vticker.js d'abord :  
 

Code :
  1. /*
  2. * vertical news ticker
  3. * Tadas Juozapaitis ( kasp3rito@gmail.com )
  4. * http://plugins.jquery.com/project/vTicker
  5. */
  6. (function(a)
  7. {a.fn.vTicker=function(b)
  8.  { var c={speed:700,pause:4000,showItems:3,animation:"",mousePause:true,isPaused:false,direction:"up",height:0};
  9.   var b=a.extend(c,b);moveUp=function(g,d,e){if(e.isPaused){return}var f=g.children("ul" );
  10.   var h=f.children("li:first" ).clone(true);if(e.height>0){d=f.children("li:first" ).height()}f.animate({top:"-="+d+"px"},e.speed,function(){a(this).children("li:first" ).remove();a(this).css("top","0px" )});
  11.   if(e.animation=="fade" ){f.children("li:first" ).fadeOut(e.speed);
  12.   if(e.height==0){f.children("li:eq("+e.showItems+" )" ).hide().fadeIn(e.speed)}}h.appendTo(f)};
  13.   moveDown=function(g,d,e){if(e.isPaused){return}var f=g.children("ul" );var h=f.children("li:last" ).clone(true);
  14.   if(e.height>0){d=f.children("li:first" ).height()}f.css("top","-"+d+"px" ).prepend(h);
  15.   f.animate({top:0},e.speed,function(){a(this).children("li:last" ).remove()});
  16.   if(e.animation=="fade" ){if(e.height==0){f.children("li:eq("+e.showItems+" )" ).fadeOut(e.speed)}f.children("li:first" ).hide().fadeIn(e.speed)}};return this.each(function(){var f=a(this);var e=0;
  17.   f.css({overflow:"hidden",position:"relative"}).children("ul" ).css({position:"absolute",margin:0,padding:0}).children("li" ).css({margin:0,padding:0});if(b.height==0){f.children("ul" ).children("li" ).each(function(){if(a(this).height()>e){e=a(this).height()}});
  18.   f.children("ul" ).children("li" ).each(function(){a(this).height(e)});
  19.   f.height(e*b.showItems)}else{f.height(b.height)}var d=setInterval(function(){if(b.direction=="up" ){moveUp(f,e,b)}else{moveDown(f,e,b)}},b.pause);
  20.   if(b.mousePause){f.bind("mouseenter",function(){b.isPaused=true}).bind("mouseleave",function(){b.isPaused=false})}})
  21.  }
  22. }
  23. )(jQuery);


 
puis le fichier html (appelant le fichier js)
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. [<script type="text/javascript"
  5. src="(#CHEMIN{javascript/jquery.vticker.js})"></script>]
  7. <!--enregistrer le fichier "jquery.vticker.js" dans le répertoire
  8. // "squelettes/javascript" (Le créer s'il n'existe pas...)
  10. //juste en dessous de ce code, mettre ceci :-->
  12. <script type="text/javascript">
  13. $(function(){
  14.    $('.news-container').vTicker();
  15.    });
  16. </script>
  18. <!--//pour personnaliser un peu le chargement-->
  20. <script type="text/javascript">
  21. $(function(){
  22.    $('.news-container').vTicker
  23.     ({
  24.        speed: 500,
  25.        pause: 5000,
  26.        showItems: 1,
  27.        animation: 'fade',
  28.        mousePause: false });
  30.    });
  31. </script>
  33. </head>
  34. <body>
  35.  <div class='news-container'>
  36.   <ul>
  37.    <BOUCLE_breves_nouvelles1(ARTICLES){par date} {lang}
  38.     {inverse}{doublons} {titre_mot=nouvelles}{0,8}{age<30}>
  40.     <li>
  42.      <a href="#URL_ARTICLE"[title="(#INTRODUCTION|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]
  43.      </a>
  45.      [(#LOGO_ARTICLE||?{
  47.      <a href="#URL_ARTICLE"[title="(#DESCRIPTIF|attribut_html)"] style="text-align:center;">
  49.      [(#LOGO_ARTICLE
  51.      ||image_reduire{120,0}
  53.      |inserer_attribut{alt,[(#TITRE|textebrut)]}
  55.      |inserer_attribut{title,[(#TITRE|textebrut)]}
  57.      )]</a>,})]
  59.     </li>
  61.    </BOUCLE_breves_nouvelles1>
  62.   </ul>
  63.  </div>
  64. </body>
  65. </html>


 
Quelqu'un pourrait-il me donner des infos sur cette syntaxe...? ou m'expliquer...  
Sur cet exemple, différent de celui auquel le site renvoit (les fonctions js ont été modifiées pour ça), on devrait pouvoir affichées les news une à une (et non pas les faire défiler).
 
voilou... j'en bave, vous devez vous en douter, au vu de mes connaissances maigrelettes. Mais je veux bien qu'on m'aiguille un peu.
 
l'idée est de réaliser un affichage de mes travaux de peinture et des news dans mon domaine (évènements, expo...). l'adresse de chaque tableau est enregistré dans une bdd, avec descriptif, date, taille, technique, ainsi que toutes les news, et qq vidéos aussi... Je voudrais afficher ces news les unes après les autres, sans défilement, et si possible avec un petit effet fondu au blanc ... un bout du monde quoi.
 
Merci d'avance de votre aide

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed