1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

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

Signaler
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 -
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 -
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
A voir également:

4 réponses

Réponse 1 / 4
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 11
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...
Réponse 2 / 4
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 1
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
Réponse 3 / 4
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 11
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
Réponse 4 / 4
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 1
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
Répondre Posez votre question