JQuery UI resizable ne prend pas en charge la position: fixed; Toutes les recommandations?

JQuery UI .resizable fonction ne prend pas en charge position: fixed; éléments. Le moment où vous essayez de redimensionner il passe leur attribut de position absolue. Tout correctifs recommandés?

J'ai un peu le chat de fenêtres qui apparaissent et sont déplaçables à la souris autour du document. Ils sont en position fixe afin de ne pas faire défiler la page derrière eux. Ils fonctionnent tous parfaitement jusqu'à ce que vous essayez de redimensionner une fenêtre, c'est lors de la transition à position: absolute; puis se retrouve à l'arrière lorsque la page défile.

J'ai essayé la manipulation de la redimensionner événement d'arrêt et de changer la position fixe:

    stop: function (event, ui)
    {
        $(chatWindow).css('position', 'fixed');
    }

Cela ne fonctionne pas parce que le positionnement (top: et left:) ne sont pas correctes pour l'élément fixe et lorsque vous arrêter le redimensionnement de l'élément de commutateurs pour la correction du positionnement et des sauts étranges endroits sur la page. Parfois des sauts hors de la page boundries et est perdu à jamais.

Des suggestions?

Ce sujet (et je n'ai pas testé) il suffit de le mettre à l'intérieur d'un conteneur fixe?
Qu'en est il suffit de le mettre à l'intérieur d'un conteneur fixe à 0 0?

InformationsquelleAutor Chev | 2011-01-27

11

Pour obtenir plus de ce problème, j'ai enveloppé le .redimensionnable() bloc avec la .draggable() bloc:
```
<div id="draggable-dealie">
    <div id="resizable-dealie">
    </div>
</div>
```
le correspondant js:
```
$("#draggable-dealie").draggable();
$("#resizable-dealie").resizable();
```
et vous assurer que vous avez la propriété position:fixed !important; situé dans le #déplaçable-dealie CSS:
```
#draggable-dealie {
    position:fixed !important;
    width:auto;
    height:auto;
}
```
J'ai une démonstration à: http://jsfiddle.net/smokinjoe/FfRRW/8/
- Bravo! C'est une bien meilleure solution. JQuery UI a juste besoin de résoudre ce problème de manière que vous pouvez utiliser à la fois sur un seul élément fixe, mais jusqu'alors, ce qui est aussi une élégante solution que j'ai vu.
- L' !partie importante résolu le problème pour moi et m'a sauvé beaucoup de travail. Je vous remercie.
- Coder en dur en haut/à gauche !important résolu le problème pour moi. Ce n'est pas joli, mais je vais le prendre, parce que c'est soit ça, ou de réimplanter le redimensionnable logique par vous-même.
InformationsquelleAutor Smokin Joe
6

Si, comme moi, vous avez un fixe div en bas de la page, alors vous pouvez simplement ajouter !important de ces règles css pour faire coller au fond :
```
.fixed {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}
```
Et la rendre redimensionnable par sa frontière nord :
```
$('.fixed').resizable({
  handles: "n"
});
```
- Par ailleurs, ce devrait également fonctionner pour les autres directions 😉
- Ce doit être la accepté de répondre pour être en css uniquement, contrairement à html et js frais généraux.
InformationsquelleAutor Jide

Simplement la force de la position:fixe sur l'élément lors du redimensionnement commence et quand le redimensionnement s'arrête.

$(".e").draggable().resizable({
   start: function(event, ui) {
      $(".e").css("position", "fixed");
   },
   stop: function(event, ui) {
      $(".e").css("position", "fixed");
   }
});

JSFiddle: http://jsfiddle.net/5feKU/

InformationsquelleAutor Dane Iracleous

2

Pas de beauté, mais comment faire pour la sauvegarde de la position (en haut et à gauche) en séparer vars sur le début de la redimensionner (je pense que la méthode est appelée "démarrer")?

Mise à JOUR (Merci pour le commentaire... L'événement se déclenche trop tard):
Comme JqueryUI génère un deuxième objet "l'interface utilisateur" à la fabrication d'un objet redimensionnable il donne à l'interface utilisateur de l'objet-un champ: l'interface utilisateur.originalPosition... Que doit être la position de l'élément fixe avant le redimensionnement...
- Je ne sais pas pourquoi je n'ai pas pensé à essayer ça. Croisez les doigts 🙂
- Dang, n'a pas fonctionné. Élément encore des sauts dans l'oubli.
- J'ai couru un test, il semble que la position est modifiée AVANT le début de l'événement se déclenche. Dang!
- il y a même un billet à jqueryUI bugs.jqueryui.com/ticket/3628 🙁
- GAH! J'ai donc enregistré la position dans chaque endroit où la fenêtre obtient traîné et/ou créés. Qui me met à la bonne position dans l'événement d'arrêt, mais devinez quoi? IL MODIFIE LA POSITION APRÈS L'ÉVÉNEMENT D'ARRÊT. La RAGE.
- J'ai mis à jour le billet avec mon propre commentaire. haha
- C'est tellement bizarre que je peux changer la position fixe dans le redimensionner événement d'arrêt, mais en changeant de haut ou de gauche ne fait rien. Ceux-ci doivent être fixés après l'événement d'arrêt, il n'y a pas d'autre explication.
- Bon alors j'ai menti, je peux régler la position sur l'événement d'arrêt. Je viens de réglage de la CSS de manière incorrecte. OH PINAISE! Mais il est vrai que vous ne pouvez pas obtenir la position dans le début de l'événement comme il a déjà été changé.
- Je suis content que cela fonctionne enfin 🙂
- Mise À JOUR: à savoir qu'il serait de sauter lors du redimensionnement (disparaître) et apparaissent alors en arrière quand le fait de redimensionnement. Au lieu de les redimensionner événement d'arrêt, j'ai dû utiliser la redimensionner "redimensionner" événement de sorte qu'il met constamment à jour la position lors du redimensionnement. Qui résout IE.
- Il suffit de déclarer haut/gauche tant que !important dans votre css et il va remplacer ce que jquery ui est en train de faire.
InformationsquelleAutor Maximilian Ehlers

Voici la solution que j'ai trouvé, c'est un peu plus de code que je le voudrais, mais il résout le problème:

$("#test").resizable({stop:function(e, ui) {
    var pane = $(e.target);
    var left = pane.attr("startLeft");
    var top = pane.attr("startTop");
    pane.css("position", "fixed");
    pane.css("top", top);
    pane.css("left", left);
}});
$("#test").draggable({create: function(e, ui) {
    var pane = $(e.target);
    var pos = pane.position();
    pane.attr("startLeft", pos.left + "px");
    pane.attr("startTop", pos.top + "px");
}, stop: function(e, ui) {
    var pane = $(e.target);
    pane.attr("startLeft", ui.position.left + "px");
    pane.attr("startTop", ui.position.top + "px");
}});

Cette magasins haut et à gauche position de l'élément html (besoins doctype xhtml valide) et l'utilise pour définir la position à la fin de l'événement de redimensionnement.

InformationsquelleAutor clexmond

C'est une solution sale mais fonctionne pour moi.

this.resizable({
    start:function (event, ui){
         x =ui.originalPosition.left+ $(ui.originalElement).parent().scrollLeft()
         y = ui.originalPosition.top+ $(ui.originalElement).parent().scrollTop()
    },
    resize:function (event, ui){
         $(ui.originalElement).css('left' , x);
         $(ui.originalElement).css('top' , y);
}

InformationsquelleAutor Alexandros Spyropoulos

0

J'ai eu ce problème aujourd'hui, et j'ai vraiment la haine "de l'onu-esthétique" solutions de contournement... j'ai Donc décidé d'expérimenter un peu pour voir si il n'y avait pas une "meilleure" solution ...et à un certain moment j'ai eu un pressentiment:

html:
```
<div class="fixed"></div>
```
javascript (jquery):
```
$('.fixed').resizable();
$('.fixed').draggable();
```
css:
```
.fixed{
    position: fixed !important;
}
```
Jquery viens de recevoir dominés par les CSS, putain!

InformationsquelleAutor oldlol

Vous devez vous connecter pour publier un commentaire.