Redimensionnement inversement proportionnel

Question

Bonjour, je cherche à effectuer une redimensionnement inversement proportionnel, j'explique : dans le cas d'une fenêtre séparée en 2 par une barre de séparation, je veux que lorsque je déplace cette barre vers le haut ou vers le bas, les deux éléments suivent en dimensions. La structure est la suivante :

Si je fais un mousedown sur le

et que je monte ou que je descende, je veux que les div form1 et form2 suivent en dimension (hauteur dans ce cas). première technique : - je calcule et de réatribue les dimensions du form2 en fonction de celle du form1. ça fonctionne mais visiuellement c'est horrible. En gros ça saccade. deuxième technique: -j'utilise resizable de jquery, le problème est que je n'arrive pas à inverser l'effet du resize sur le form2 donc si je reduis form1, je réduis form2 et dans mon cas, j'ai besoin d'un redimensionnement inversement proportionnel, soit si je reduis form1, form2 grandi pour combler la place. Merci

Bul3 · Answer

Bonjour,
   met des frame... ce sera géré automatiquement par les
   navigateurs, sans bugs, de manière parfaitement correcte.
Cordialement	[mon Site]	[M'écrire]	Bul

jeud84 · Answer

Oui, 
merci mais les frames sont la solution actuellement utilisées sur mon projet et pour sa  ré-écriture il est clairement énoncé de ne plus utiliser cette technique.

Si tu as une autre idée, ...je suis toujours à la recherche.

Jeud

Bul3 · Answer

bah... faudrait voir comment tu fais

mais si tu utilises jquery, ça va être
un monstre probablement...

cerne précisément où est ton souci
et met nous l'essentiel

 mais moi jquery, je ne connais pas, 
  ne compte pas trop sur moi
      ( d'autres intervenants sûrement )
  je ne tiens pas particulièrement à 
  m'y intéresser...

PetoleTeam · Answer

Bonjour à vous, 
Pourquoi faire simple quand on peut se 
compliquer la vie ? 
Question : 
  La barrre de séparation est gérée 
comment, DIV déplaçable... ou que sais je, rien d'ailleurs. 
;O)

jeud84 · Answer

Oui la barre de séparation est gérée comme une div déplaçable. Mais en réalité c'est son le container mitoyen qui est redimensionner. Cette barre ne fait que suivre le container. Voici mon code jquery + javascript : ceci fonctionne mais produit un effect de saccade au redimentionnement Ecran slide bis Texte menu Trace liste : Trace form : Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone listeContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer Ce texte est dans la zone formContainer ***********Dans le cas d'un script jquery, issue gracieusement dans un membre d'un autre forum mais celui-ci produit également des exections de redimensionnement quazi exact $(document).ready(function(){ $("#listZone").resizable({ stop: function(event, ui) { /* ui.helper - a jQuery object containing the helper element ui.originalPosition - {top, left} before resizing started ui.originalSize - {width, height} before resizing started ui.position - {top, left} current position ui.size - {width, height} current size */ var offsetHeight = ui.size.height - ui.originalSize.height; var newHeight $("#formContainer").height() - offsetHeight; // - * - + $("#formContainer").css("height", newHeight); } }); $("#formContainer").resizable({ stop: function(event, ui) { /* ui.helper - a jQuery object containing the helper element ui.originalPosition - {top, left} before resizing started ui.originalSize - {width, height} before resizing started ui.position - {top, left} current position ui.size - {width, height} current size */ var offsetHeight = ui.size.height - ui.originalSize.height; var newHeight $("#listZone").height() - offsetHeight; // - * - + $("#listZone").css("height", newHeight); } }); }); Si vous avez une idée pour contrer les défauts

Bul3 · Answer

comme pressenti !  

je me cite ?
ça va être un monstre probablement...
cerne précisément où est ton souci et met nous l'essentiel
citerais-je petoleTeam ?
Pourquoi faire simple quand on peut se  compliquer la vie ?

PetoleTeam · Answer

Bonjour, ----, première technique : - je calcule et de réatribue les dimensions du form2 en fonction de celle du form1. ça fonctionne mais visiuellement c'est horrible. En gros ça saccade.

ou encore ----, Voici mon code jquery + javascript : ceci fonctionne mais produit un effect de saccade au redimentionnement

dans les deux cas cela saccade et c'est normal attendu que la prise en compte des événements ne ce fait pas comme on le veut, plus ou moins de retard ou attente d'une pause... donc peut être revenir à un code plus light en mettant un setTimeout pour la prise en compte du déplacement par exemple. ;O)

jeud84 · Answer

Bonjour.


Voici 2 solutions, la première basée sur jquery, merci à un membre d'un autre forum pour son aide: l'effet attendu est bien présent. Cependant il reste un effet de redimensionnement non instantané. L'ajout d'une simple css permet de detourner ce petit défaut.

La seconde est une association de jquery et de simple code javascript. (voir plus bas)

Rappel du besoin exprimer :  reproduire le redimensionnement connu au sein des frames.


        $(document).ready(function(){
            $("#listZone").resizable({


                minHeight: 100,
                maxHeight: 390,
                minWidth: 100,
                minWidth: 100,


                stop: function(event, ui) {
                    var offsetHeight = ui.size.height - ui.originalSize.height;                    var newHeight $("#formContainer").height() - offsetHeight; // - * - +


                    $("#formContainer").css("height", newHeight);


                    //début pour test
                    var formHeight = $("#formContainer").height();
                    var listHeight = $("#listZone").height();


                    var texte "offsetHeight " + offsetHeight + "
" + "newHeight = " + newHeight + "

";                    texte +"formContainer " + formHeight + "
";                    texte +"listZone " + listHeight;


                    $("#results").html(texte);
                    //fin pour test
                }
            });


            $("#formContainer").resizable({


                minHeight: 100,
                maxHeight: 390,
                minWidth: 100,
                minWidth: 100,


                stop: function(event, ui) {
                    var offsetHeight = ui.size.height - ui.originalSize.height;                    var newHeight $("#listZone").height() - offsetHeight; // - * - +


                    $("#listZone").css("height", newHeight);


                    //début pour test
                    var formHeight = $("#formContainer").height();
                    var listHeight = $("#listZone").height();


                    var texte "offsetHeight " + offsetHeight + "
" + "newHeight = " + newHeight + "

";                    texte +"formContainer " + formHeight + "
";                    texte +"listZone " + listHeight;


                    $("#results").html(texte);
                    //fin pour test
                }
            });
        });

Ci-joint  :  le code qui permet le même effet avec cette fois ci un redimensionnement instanté.

$(document).ready(function(){  
//cache le div liste
              $('.ptogtitle').click( function()
                {$('#listZone').toggle();
                }
              );
//Dimension utilisable de l'ecran
                //hauteur utilisable,largeur utilisable
                      var hauteur=screen.availHeight;
                //hauteur utilisable,largeur du div listeZone
                      var hauteurListeZone=$('#listZone').height();
                //hauteur de la barre
                      var barreListe=$('#barreListe').height();
                //hauteur du container
                      var mainContainer=$('#mainContainer').height();
                     // alert('dimension utilisable x : ' + largeur + ' y : '+ hauteur
                     //  + ' dimension div x : ' + largeurListeZone + ' y : '+ hauteurListeZone );
    // Lorsqu'on déplace la barre de separation verticalement, les dimensions des sous containers formulaire et liste suivent.
                $("#listZone").resizable();
                var hauteurListeZone=$('#listZone').height();


  });


                      function register_position(){taille_x 0; taille_y 0; document.onmousemove = position;}
                      function position(evt){
                       if(!evt) evt = window.event;
                     listZone_y = $('#listZone').height();//evt.clientY;
                      //hauteur de la barre
                            var barreListe_y=$('#barreListe').height();
                      //hauteur du container
                            var mainContainer_y=$('#mainContainer').height();
                      //dimensions calculées du form
                            var form_y =mainContainer_y-barreListe_y-listZone_y;
                        //redimensionnement du div inférieur
                        $('#formContainer').height(form_y);
                      }

PetoleTeam · Answer

Bonjour, 
Là je te fais confiance... 
Heureux si 
ça baigne. 
;O))

Redimensionnement inversement proportionnel

9 réponses

Votre réponse

Discussions similaires