11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]MooTools + Tooltips + Fade...

Bonjour à tous,

Je m'essaye actuellement à l'intégration de Tooltips via le framework MooTools... jusque là pas de soucis... intégration réussi et fonctionnelle...
Je passe à le mise en forme, 10min plus tard.. ca roule...

Là je veux jouer les artistes et je me dis qu'un petit Fade(in) et Fade(out) serait des plus classe... je trouve un ptit script qui correspond à ce que je cherche hop... :
//when the dom is ready
window.addEvent('domready', function() {

   //store titles and text
   $$('a.tips1').each(function(element,index) {
       var content = element.get('title').split('::');
       element.store('tip:title', content[0]);
       element.store('tip:text', content[1]);
   });

   //create the tooltips
   var tips1 = new Tips('.tips1',{
       className: 'tips1',
       hideDelay: 50,
       showDelay: 50
   });


   tips1.addEvents({
     'show': function(tip) {
         tip.fade('in');
     },
     'hide': function(tip) {
         tip.fade('out');
     }
   });

});


et à ce moment là, je remarque un défaut lors du fade(out) ...
example

On peux clairement voir lors du fade(out) que l'image disparait entièrement (ou clignote une fois ^^) avant que le fade(out) agisse...

Est-ce un problème avec mon script ? j'ai l'impression que l'évènement est réinitialisé juste avant...
Ou est-ce un problème avec MooTools ?
Quelqu'un aurait-il une astuce ou un correctif svp ?

Merci d'avance Smiley bawling
Modifié par Blackstorm (12 Jul 2008 - 21:55)
Modérateur
Salut, Smiley smile

Il faut que tu enlèves, au sein de la classe Tips, le bout de code suivant :
onShow:function(A){A.setStyle("visibility","visible");},
onHide:function(A){A.setStyle("visibility","hidden");},
car cela fait doublon avec ton fade.

PS : Dommage que le script s'appuie sur l'attribut title pour y placer du code html et css. Pour le coup, c'est un mauvais choix. Smiley sweatdrop

PS2 : Tant que tes scripts ne sont pas en production, mieux vaut éviter qu'ils soient compressés, en particulier lorsque tu fais une demande sur un forum, hein ! Smiley cligne
je te remercie ^^ ha oui désolé pour la compression ^^ j'étais pas encore couché Smiley cligne et j'ai omis de mettre les versions non compressées...

je vais de ce pas tester tes recommandations...

Je repasse pour dire si tout est ok ^^

Sinon pour ton premier PS: j'ai pas vraiment le choix, le class est faites comme ca chez Mootools pour les tooltips (version 1.11), la version 1.2 n'avait pas la même structure apparemment, d'où le fait de rajouter le "store" dans mon propre script.

Ps: Rooo, merci beaucoup... çà fonction nikel maintenant Smiley cligne
Modifié par Blackstorm (12 Jul 2008 - 17:51)
Sujet clos
Aller à