Cooling-Masters
Connexion · INSCRIPTION · Site Recevoir à nouveau l'e-mail de validation


Framework JavaScript

Ajouter ou retirer ce sujet de vos favoris  ·  Suivre ce sujet  ·  Imprimer ce sujet
Page précédente    Page suivante 
xalis


Membre
Messages : 9791

mardi 09 mars 2010 à 09:53:10     
Bonjour à tous, j'utilise le framework javascript de Mootools, qui me permet entre autre de redimentionner verticalement une <div> au passage de la souris et affichera ce qui est caché (exemple visible ici : http://demos.mootools.net/Mouseenter).

Soucis : le javascript n'agrandit la <div> qu'avec une valeur fixe définie dans le JS.

Question : Est-il possible de faire en sorte qu'il l'agrandisse automatiquement en fonction des éléments cachés? (comme ici : http://demos.mootools.net/Accordion).

Merci à vous

Message édité par xalis le mardi 09 mars 2010 à 09:55:18
Google




     
xalis


Membre
Messages : 9791

mardi 09 mars 2010 à 21:14:17     
Bon... pour l'instant je suis arrivé à ça :

CODE :


window.addEvent('domready',function() {
var items=$$('.item');
var fx=new Fx.Elements(items,{wait:true,duration:500});

items.each(function(_item,i) {
 _item.addEvent('click',function(e) {
  var obj={}; obj[i]={'height':[_item.setStyle('height', 'auto')]};
  items.each(function(other,j) {
   if(other!=_item) {
    var w=other.getStyle('height').toInt();
    if(w!=36)obj[j]={'height':[w,36]};
   }
  });
  fx.start(obj);
 });
});
items.addEvent('mouseleave',function(e) {
 var obj={};
 items.each(function(other,j) {
  obj[j]={'height':[other.setStyle('height',36)]};
 });
 fx.start(obj);
});
});


Alors là effectivement, ça s'agrandit correctement en automatique, mais je perds l'effet d'affichage en slide et là... je vois pas. Si quelqu'un a une idée je l'en remercie!
xalis


Membre
Messages : 9791

mercredi 10 mars 2010 à 05:11:35     
Bon voilà résolu...

CODE :


function getElementsByClass(tag,nom){
var elements = document.getElementsByTagName(tag);
var results = new Array();
for(var i=0; i<elements.length; i++){
 if(elements[i].className == nom){
  results[results.length] = elements[i];
 }
}
return results;
}

window.addEvent('domready',function(){
var items=$$('.item');
var fx=new Fx.Elements(items,{wait:false,duration:500,transition:Fx.Transitions.Sine.easeInOut});
items.each(function(_item,i){
 _item.addEvent('mouseenter',function(e){
  var obj={};
  var _items_ = getElementsByClass("div","item_info_off");
  var height_item = _items_[i].offsetHeight;
  obj[i]={'height':[_item.getStyle('height').toInt(),height_item+65]};
  items.each(function(other,j){
   if(other!=_item){
    var w=other.getStyle('height').toInt();
    if(w!=36)obj[j]={'height':[w,36]};
   }
  });
  fx.start(obj);
 });
});
items.addEvent('mouseleave',function(e){
 var obj={};
 items.each(function(other,j){
  obj[j]={'height':[other.getStyle('height').toInt(),36]};
 });
 fx.start(obj);
});
});


Fonctionnel sur la dernière mouture en date de Firefox, Internet Explorer et ce bon vieil iPhone.

Message édité par xalis le mercredi 10 mars 2010 à 05:20:19
Google




     
Page précédente    Page suivante