Posez votre question Signaler Répondre au sujet

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

davidcian 186 Messages postés vendredi 18 novembre 2005Date d'inscription 19 décembre 2009 Dernière intervention - 26 juin 2009 à 11:22 - Dernière réponse : davidcian 186 Messages postés vendredi 18 novembre 2005Date d'inscription 19 décembre 2009 Dernière intervention
- 27 juin 2009 à 13:16
Javascript / DHTML Posez votre question Signaler Répondre au sujet
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 

4 réponses

Répondre au sujet
Signaler Commenter la réponse de Bul3
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 26 juin 2009 à 13:19
+3
Utile
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...
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Bul3
Signaler Commenter la réponse de davidcian
davidcian 186 Messages postés vendredi 18 novembre 2005Date d'inscription 19 décembre 2009 Dernière intervention - 27 juin 2009 à 13:16
+1
Utile
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
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 26 juin 2009 à 11:54
0
Utile
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
davidcian 186 Messages postés vendredi 18 novembre 2005Date d'inscription 19 décembre 2009 Dernière intervention - 26 juin 2009 à 12:28
0
Utile
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
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.