Posez votre question Signaler

Agrandissement et reduction d'une div onclick [Résolu]

Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Dernière intervention
19 décembre 2009
 - - Dernière réponse : davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Dernière intervention
19 décembre 2009
 - 27 juin 2009 à 13:16
Javascript / DHTML Posez votre question Signaler
Bonjour,

Voila j'aimerais réduire et agrandir le contenu d'une div lorsque qu'on clique sur un petit icon +/- d'une barre de navigation, ça marche pas terrible ce que j'ai fait pourtant ça ma semble pas mal....

Petite préxcision ma div contient un tableau.

Voila le code:

   

// Barre de nav
   
...ici il y a un tableau...

Les fonction:

function agrandir_admin(id, hmax, i){
    if (hmax <= i){
        i++;
        var delais = 100;
        document.getElementById(id).style.height = i+'px';
        setTimeout("agrandir_admin(id, hmax, i)",delais);
    }
}

function reduir_admin(id, hmax, i){
    if (hmax > 0){
        i++;
        hmax = hmax-i;
        var delais = 100;
        document.getElementById(id).style.height = hmax+'px';
        setTimeout("reduir_admin(id, hmax, i)",delais);
    }
}

Voila merci de votre aide

Az
Afficher la suite 

Votre réponse

Répondre au sujet

4 réponses

Meilleure réponse
Signaler Commenter la réponse de Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
3
Merci
soit tu connais la hauteur nécessaire, php ou pas
      et là adapte ton hmax
soit tu augmentes tant que la "taille ne convient pas"
     regarde  du coté de scrollTop,scrollHeigt,offsetHeight...

Merci Bul3 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 100 internautes ce mois-ci

Commenter la réponse de Bul3
Signaler Commenter la réponse de davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Dernière intervention
19 décembre 2009
1
Merci
function agrandir_admin(id, i, hmax, frein, plus, moins, global){
    if (i==0){
        var hmax = document.getElementById(id).offsetHeight;
        var frein = document.getElementById(id).offsetHeight;
        document.getElementById(id).style.height = 0+'px';
        document.getElementById(id).style.position = 'relative';
        document.getElementById(plus).style.display = 'none';
        document.getElementById(moins).style.display = 'block';
        document.getElementById(global).style.backgroundPosition = 'top';
        frein = frein - 26;
    }
    if (frein>=900){
        document.getElementById(id).style.height = hmax+'px';
        document.getElementById(id).style.visibility = 'visible';
    }else if (i<=frein){
        i=i+25;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, i, hmax, frein, plus, moins, global); }, 50 );
    }else if (i<=frein+20){
        i=i+2;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, i, hmax, frein, plus, moins, global); }, 80 );
    }else if(( i<=hmax )&&(i>=frein)){
        i++;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, i, hmax, frein, plus, moins, global); }, 1 );
    }else{
        document.getElementById(id).style.visibility = 'visible';
    }
}

function reduir_admin(id, i, hmax, hmaxValue, plus, moins, global){
    if (i==0){
        document.getElementById(id).style.visibility = 'hidden';
        var hmax = document.getElementById(id).offsetHeight;
        var hmaxValue = document.getElementById(id).offsetHeight;
        document.getElementById(plus).style.display = 'block';
        document.getElementById(moins).style.display = 'none';
        document.getElementById(global) .style .backgroundPosition = 'bottom';
    }
    
    if (hmax>=900){
        document.getElementById(id).style.height = 0+'px';
        document.getElementById(id).style.position = 'absolute';
        document.getElementById(id).style.height = hmaxValue+'px';        
    }else if (hmax > 0){
        i=i+25;
        hmax = hmax-i;
        document.getElementById(id).style.height = hmax+'px';
        setTimeout( function() { reduir_admin(id, i, hmax, hmaxValue, plus, moins, global); }, 50 );
    }else{
        document.getElementById(id).style.height = 0+'px';
        document.getElementById(id).style.position = 'absolute';
        document.getElementById(id).style.height = hmaxValue+'px';
    }
}

J'ai un peu la fleme de détailler mais ca marche comme je veux ;)

Merci de ton aide!

Az
Commenter la réponse de davidcian
Signaler Commenter la réponse de Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
Bonjour,

quelques imprécisions....
pour agrandir :

...

cliquer pour agrandir
       sinon on ne peut pas cliquer

background-color:#FFFF00;">  pour voir ce qui se passe
...ici il y a un tableau...

...

function agrandir_admin(id, hmax, i)
{
    if ( i<=hmax ){      j'ai inversé le teste
        i++;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, hmax, i); }, 100 );  sinon, c'est une chaîne de caractères et pas les valeurs qui sont transmises
    }
}

pour diminuer tu devrais être ok....

Cordialement
Commenter la réponse de Bul3
Signaler Commenter la réponse de davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Dernière intervention
19 décembre 2009
0
Merci
Coool ça marche ;)

Merci!

Par contre j'ai encore un autre problème... hmax dans mon exemple est = 300px...

Mais en réalité c'est une variable qui doit s'adapter au contenus de ma div lors de l'appel de la fonction ici:

hmax, 0);">

C'est peu etre plus en php qu'il faut voir ca mais aurais tu une idée?

Merci

Az
Commenter la réponse de davidcian

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.