1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Agrandissement et reduction d'une div onclick

Résolu
davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 - 26 juin 2009 à 11:22
davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 - 27 juin 2009 à 13:16
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
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 13
26 juin 2009 à 13:19
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...
3
Réponse 2 / 4
davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 1
27 juin 2009 à 13:16
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
1
Réponse 3 / 4
Bul3
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 13
26 juin 2009 à 11:54
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
0
Réponse 4 / 4
davidcian
Messages postés
186
Date d'inscription
vendredi 18 novembre 2005
Statut
Membre
Dernière intervention
19 décembre 2009
 1
26 juin 2009 à 12:28
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
0