J'ai une DIV redoutable qui est positionnée sur une sélection d'éléments qui ont été définis sur Alsoresize.
visuellement, l'élément redimensionnable est un boîtier de bordure pour les éléments Alsoresize.
Je veux pouvoir redimensionner les éléments Alsoresize en proportion de la DIV redimensionnée. Le comportement par défaut de l'interface utilisateur permet à chaque élément une position fixe gauche et supérieure lors du redimensionnement:
http: // jsfiddle. Net / DigitalOutback / Srpha / 2 /
Mais je veux régler la gauche et le haut de chaque élément AR à la balance avec la boîte de sélection, car il est redimensionné.
i Tout d'abord pensé que cela ne serait pas trop trachant en modifiant le plugin Alsoresize. C'est ce que j'ai ajouté à la redimension: _alsoreize: Comme vous le verrez, les cases ont un peu: http://jsfiddle.net/digitalouttback/srpha/4/ Quelque chose semble être en ballonnement à ballonner les figures et peut" Cependant, les suggestions appréciées. Éventuellement divergence de décimales entre scripts et navigateur?
3 Réponses :
Peut-être que vous devez repenser la structure ..
Vous pouvez insérer les éléments mise à jour après commentaire strong> p> Pour désexpédier le Les calculs finaux deviennent p> .lyr code> à l'intérieur du .Resizer code> élément et positionnez-les à l'intérieur avec des positions pourcentage. . De cette façon, ils redimensent automatiquement pendant que leur conteneur change de taille. ( le plugin n'a pas à les gérer em>) p>
Resizer Code> à partir du alsoresize code> em> les éléments dont vous aurez besoin de prendre quelques points à prendre en compte pour les calculs. P>
start.width code> .Height code> etc .. li>
utils: {
west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left},
east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;},
south: function(start, op, scale, delta){return ((start.top - op.top ) * scale) + op.top; },
north: function(start, op, scale, delta){return ((start.top - op.top ) * scale) + op.top + delta.top; }
}
J'ai considéré cette option et bien que cela ne soit toujours pas hors de question, cela signifierait perdre beaucoup de terrain. De plus, je demanderai beaucoup plus de script. Le «maquillage» devra envelopper un nombre quelconque d'objets en temps réel, de sorte que beaucoup d'emballage et de débordement ne s'appliquent pas actuellement. Va tester néanmoins tellement merci pour l'entrée.
C'est une grande amélioration gaby. Cependant, les dimensions sont toujours bloquées quelque part - essayez de traîner le chapiteau à plusieurs reprises et que le chapiteau commence à se retirer des éléments internes. Cela peut être une divergence lors de l'arrondissement des pixels, pensez-vous?
En fait, l'inexactitude se produit chaque fois que vous libérez et refliquez une poignée.
@Will, une légère amélioration peut être de stocker et d'utiliser les calculs précis après le premier déménagement, au lieu de re-àting des valeurs entières renvoyées à partir du CSS / positionnement .. alors vérifiez JSFIDDLE.net/gaby/srpha/313
Je suis content de la précision de cela, j'essaie maintenant de rendre les éléments internes à redimensionner lors de l'utilisation des autres poignées. Voici ce que j'ai jusqu'à présent, en commençant par les poignées SW et W. Je dois être presque là ... JSFIDDLE.net/Digitaloutback/srpha/322
@Will, vous y allez jsfiddle.net/gaby/srpha/324 le seul différent entre L'est / ouest et le nord / sud est l'ajout du delta.left et delta.top respectivement ..
Voulez-vous utiliser + au lieu de * ?
Non - ce sont des multiplicateurs, ajoutant efficacement un pourcentage.
J'ai eu une peu de chance en réglant la marge-haut et la marge-gauche-gauche pour positionnement et laissant les attributs «haut» et «gauche» à défaut pour l'animation.
Pas tout à fait ce que j'étais après car les éléments «intérieurs» sont toujours fixés.