Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2831 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Un petit effet "wipeout" de texte ... qui bug sous ffox

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Un petit effet "wipeout" de texte ... qui bug sous ffox

n°2112808
Barnabe42
Posté le 22-11-2011 à 16:24:01  profilanswer
 

Bonjour,
 
Un petit script à la noix qui fait défiler des news de haut en bas tous les x seconde ou bien quand on passe la souris dessus (il y a de la sauce jquery mélangée avec du JS) :

Code :
  1. var transitionDelay = 500;
  2. var waitDelay = 60000;
  3. var intervalId = 0;
  4. var PERIOD_VISIBLE = 4000;
  5. var PERIOD_NOT_VISIBLE = 60000;
  6. var news_items_count;
  7. var news_items_interval;
  8. var old_news_items = 0;
  9. var current_news_items = 0;
  10. var isReversed = false;
  11. //permet le calendrier mais fait bugger le defilement des news
  12. //Liferay.bind('portletReady', function(event, data){
  13. // $('.datePicker').datepicker($.datepicker.regional['fr']);
  14. //});
  15. $(document).ready(function(){
  16.   //navigator compatibility
  17.   document.addEventListener("visibilitychange", visibilityChanged);
  18.   document.addEventListener("webkitvisibilitychange", visibilityChanged); 
  19.   document.addEventListener("msvisibilitychange", visibilityChanged);
  20.  
  21.   news_items_count = $('.news-item').size();
  22.   $('.news-item:eq(' + current_news_items + ')').css('top','5px');
  23.   news_items_interval = setInterval(news_items_rotate,(document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE); //time in milliseconds
  24.   $('.news-container').hover(function() {
  25.     clearInterval(news_items_interval);
  26.   }, function() {
  27.     news_items_interval = setInterval(news_items_rotate,(document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE); //time in milliseconds
  28.     news_items_rotate();
  29.   });
  30. });
  31. function visibilityChanged() {
  32.     clearTimeout(news_items_interval);
  33.     news_items_interval = setInterval(news_items_rotate, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
  34. }
  35. function news_items_rotate() {
  36.  
  37.   if(isReversed) {
  38.    old_news_items = current_news_items;
  39. current_news_items--;
  40. if (current_news_items < 0) {
  41.  current_news_items = news_items_count-1;
  42. }
  43. $('.news-item:eq(' + current_news_items + ')').css('top','-210px');
  44. $('.news-item:eq(' + old_news_items + ')').animate({top: 205},"slow", function() {
  45.        $(this).css('top','-210px');
  46.     });
  47.     $('.news-item:eq(' + current_news_items + ')').show().animate({top: 5},"slow" ); 
  48.    //console.log('Reversed: true');  
  49.   } else {
  50. old_news_items = current_news_items;
  51. current_news_items++;
  52. if (current_news_items > (news_items_count-1)) {
  53.  current_news_items = 0;
  54. }
  55. $('.news-item:eq(' + current_news_items + ')').css('top','210px');
  56. $('.news-item:eq(' + old_news_items + ')').animate({top: -205},"slow", function() {
  57.       $(this).css('top','210px');
  58. });
  59.    $('.news-item:eq(' + current_news_items + ')').show().animate({top: 5},"slow" ); 
  60.    //console.log('Reversed: false');  
  61.  
  62.   }
  63.  
  64.   /*
  65.   if(isReversed) {
  66.    if(old_news_items==0){
  67. old_news_items = news_items_count-1;
  68. }
  69.   current_news_items = (old_news_items - 1);  
  70.      $('.news-item:eq(' + old_news_items + ')').animate({top: -205},"slow", function() {
  71.       $(this).css('top','210px');
  72.    });  
  73.      $('.news-item:eq(' + current_news_items + ')').show().animate({top: 5},"slow" );   
  74.      old_news_items = current_news_items;
  75.   } else {
  76.   current_news_items = (old_news_items + 1) % news_items_count;  
  77.       $('.news-item:eq(' + old_news_items + ')').animate({top: -205},"slow", function() {
  78.        $(this).css('top','210px');
  79.       });
  80.       $('.news-item:eq(' + current_news_items + ')').show().animate({top: 5},"slow" );   
  81.       old_news_items = current_news_items;
  82.   }
  83. */
  84. }
  85. function nextNews() {
  86. clearInterval(news_items_interval);
  87.     news_items_interval = setInterval(news_items_rotate,waitDelay);
  88.     isReversed = false;
  89.     news_items_rotate();
  90. }
  91. function prevNews() {
  92.  clearInterval(news_items_interval);
  93.  news_items_interval = setInterval(news_items_rotate,waitDelay);
  94.  isReversed = true;
  95.  news_items_rotate();
  96. }


 
 
Alors bien sûr, ce truc "ça marche pas" sous ffox (testé sous le 8) car la notion de "page visibility" n'est que très récente et supportée par quelques navigateurs seulement (dont ie9).
A la base, le client se plaint que quand la page n'est pas active (entendre par là visible), la période d'affichement des news s'accumule (le compteur temps), par conséquent, quand on revient sur la page des news (visualisation après avoir consulté ses email sur un autre tab du navigateur par ex.), là tout se dépile, et les news font haut/bas/haut/bas super vite, du coup ça devient illisible, elles se confondent l'une sur l'autre....d'où l'ajout de la notion de "page visibility" dans le code ci-dessus.
Mais qui n'est pas compatible ffox, alors j'ai peur que le client nous casse les noix avec ce bug qui fait "ça marche pas".
Bref, dîtes moi qu'il existe des librairies JS qui font la même chose (défilement de teste périodique) et qui sont certifiées compatibles sous tous les navigateurs !  [:tim_coucou]
 
 
Merci


---------------
Asus Z87-A, Core i7 4790K@Stock, G.Skill 4x8Go 2800MHz CL12, Nvidia GTX 980@1178/1752, Asus PB287Q 4K@60Hz | CPU-Z validator | Post image
mood
Publicité
Posté le 22-11-2011 à 16:24:01  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Un petit effet "wipeout" de texte ... qui bug sous ffox

 

Sujets relatifs
[RESOLU] Incrémentation textetrouver le texte le plus proche d'un autre
Comment réaliser cet effet ???[Qt] texte avec des zones cliquables [résolu]
jquery et ui : j'ai besoin d'un petit coup de main pour me lancer.Aligné un texte a gauche et a droite
Comment récupérer le son d'une vidéo en texteDéterminer une fin de paragraphe dans un texte
Demande d'aide : Manipulation de fichier texte en .csvTexte incopiable
Plus de sujets relatifs à : Un petit effet "wipeout" de texte ... qui bug sous ffox


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR