Bien le bonjour.

J'ai décidé que la création d'une librairie (terme prétentieux utilisé a tord, désolé) serai un bon moyen d'apprendre. Etant donné que j'aurais sans doute plusieurs problèmes lors de cet création, je pense que c'est mieux de les regrouper dans ce post plutôt que d'en créer plusieurs.

Or donc, ma mini lib sera axée sur la manipulation des blocs (Différentes transitions hide/show, drag and drop, resize...) Et ça sera déja bien.

Voila la version actuelle, qui permet d'afficher / masquer un bloc en le déroulant. J'avais créer un topic hier, il est quasiment au point maintenant (aperçu ici : http://adamsantoro.free.fr/) :

function Fade(el, hide, show, speed) {
    this.id = document.getElementById(el);
    this.id.style.overflow = 'hidden';
    
    /*Commençons par stocker le bloc à traiter, en le mettant en overflow 
     *pour masquer le contenu lors des opérations*/
    
    this.time;
    this.speed = speed;
    this.height = this.id.offsetHeight;
    
    // Définition des paramêtres mathématiques nécéssaires
    
    if(this.height == 0) {
        this.id.style.position = 'absolute';
        this.id.style.visibility = 'hidden';
        this.id.style.display = 'block';
        this.height = this.id.offsetHeight;
        this.id.style.visibility = 'visible';
        this.id.style.display = 'none';
    }
    
    /*Dans le cas ou le bloc serai masqué au démarrage, 
    récupération de la largeur (Ninja style)*/
    
    this.hide = document.getElementById(hide);
    this.show = document.getElementById(show);
    var that = this;
    if(hide === show) {
        if(this.id.offsetHeight == 0) that.etat = 1;
        else that.etat = 2;
        addEvent(that.hide, 'click', function(e) {
            clearTimeout(that.time);
        if(that.etat == 1) { 
            that.fadeupshow();
            that.etat = 2;
        }
        else {
            that.fadeuphide();
            that.etat = 1;
        }
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
        });
    }
    /* Dans le cas ou les deux boutons hide / show dépendent du même bloc
     * Définition d'une variable pour détérminer le sens */
    else {
        addEvent(that.hide, 'click', function(e) {
            clearTimeout(that.time);
            that.fadeuphide();
            e.returnValue = false;
            if (e.preventDefault) e.preventDefault();
        });
        addEvent(that.show, 'click', function(e) {
            clearTimeout(that.time);
            that.fadeupshow();
            e.returnValue = false;
            if (e.preventDefault) e.preventDefault();
        });
    }
    /* Sinon, application des mécanismes sur chacuns des blocs */
}
Fade.prototype.fadeuphide = function() {
    if(this.id.offsetHeight > 0 && this.id.offsetHeight < 2) this.id.style.height = 0 +'px';
    else if(this.id.offsetHeight > 0) {
    this.id.style.height = (this.id.offsetHeight - 2) +'px';
    var it = this;
    this.time = setTimeout(function() { it.fadeuphide(); }, it.speed);
}};

/* Fonction du fade up qui cache */
Fade.prototype.fadeupshow = function () {
    if(this.id.style.display != 'block') {
    this.id.style.height = 0 + 'px';
    this.id.style.display = 'block'; }
    if(this.height - this.id.offsetHeight < 2) this.id.style.height = this.height +'px';
    else if(this.id.offsetHeight < this.height) {
    this.id.style.height = (this.id.offsetHeight + 2) +'px';
    var it = this;
    this.time = setTimeout(function () { it.fadeupshow(); }, it.speed);  }
};
/* Fonction du fade up qui affiche */

L'utilisation se passe ainsi, après avoir inclus le fichier :

// Prototype
function Fade(id, hide, show, speed)

// Utilisation (Les chaines entre guillemet doivent être des #id)

var glisse = new Fade('bloc_a_traiter', 'enrouler', 'derouler', 10)

// Notez que le code ci dessous permet d'avoir un interrupteur unique

var glisse = new Fade('bloc_a_traiter', 'interrupteur', 'interrupteur', 10)

Le premiers problème que je rencontre est le suivant :

if(this.height == 0) {
        this.id.style.position = 'absolute';
        this.id.style.visibility = 'hidden';
        this.id.style.display = 'block';
        this.height = this.id.offsetHeight;
        this.id.style.visibility = 'visible';
        this.id.style.display = 'none';
    }
    
    /*Dans le cas ou le bloc serai masqué au démarrage, 
    récupération de la largeur (Ninja style)*/

Avant de récupérer le height ligne 5, je ne peux pas savoir si le bloc est en absolute, relative... Donc après je ne peux pas remettre la valeur initiale. Si il était en relative, il restera en absolute, ce qui peux poser problème. Comment puis je récupérer cette valeur au début ?

Mets l'autre topic en résolu.

Au temps pour moi. A part ça, des suggestions ?

Pourquoi t'as appelé ça "fade" ? J'aurais appelé ça "slide"... Un fade, c'est genre ça disparaît en fondu, avec l'opacité.


Autre chose, une solution potentielle pour déterminer la hauteur d'un bloc caché... :
Tu le mets en overflow hidden, avec un height de 0, et tu regardes sa propriété scrollHeight.

Ne marche pas chez moi... J'obtiens 0.

Et Fadeout parce que c'est cool comme nom, ça me fais penser à fallout

En le remettant en display:block bien sûr hein...

<style type="text/css">
#test {
	width: 150px;
	display: none;
}
</style>

<script type="text/javascript">
window.onload = function() {
	var test = document.getElementById('test');
	test.style.overflow = 'hidden';
	test.style.height = 0;
	test.style.display = 'block';
	alert(test.scrollHeight);
};
</script>

<div id="test">
Lorem ipsum dolor sit amet, innocentem si puella ut diem fiant in. Tua cupididate flebili Miserere puellam materia amicis in. Eis abstulit meis exponeret nutricem sum ad nomine. Hellenicus ut sua Cumque persequatur sic genero quod non potentiae quem non dum veniens indica enim ad per animum pares terris classes. Mariae Bone de me testatur in fuerat construeret cena reges undis Tharsiam!
</div>

Génial ! Merci.

Je laisse le topic ouvert vu qu'il concerne (je pense) quelques futurs problèmes, et si vous avez des suggestions d'optimisation, je ne demande que ça...