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

Un petit effet "wipeout" de texte ... qui bug sous ffox - HTML/CSS - Programmation

Marsh Posté le 22-11-2011 à 16:24:01    

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


 
 
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
Reply

Marsh Posté le 22-11-2011 à 16:24:01   

Reply

Sujets relatifs:

Leave a Replay

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