IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Resizable ne fonctionne plus après un event Stop [UI]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juillet 2009
    Messages : 18
    Par défaut Resizable ne fonctionne plus après un event Stop
    Bonjour

    Je bloque sur un .resizable() ... il ne fonctionne qu'une seule fois ! la fonction stop empêche un autre resize sur le même élément

    A l'aide svp ! merci

    Mon code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Interface Planning</title>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
            <link rel="stylesheet" href="/resources/demos/style.css">
            <style>
            .personne { 
                width: 100px; 
                line-height: 20px; 
                background-color: #9370DB; 
                text-align: center; 
                box-sizing: border-box;        
                border: 1px solid #ccc;
            }
            .ui-resizable-helper { border: 2px dotted #eee; }
            </style>
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script>
            $( function() {
                $( ".personne" ).resizable({
                    helper: "ui-resizable-helper",
                    grid: [ 100, 0],
                    minheight: 20,
                    minWidth: 100,
                    handles: 'e, w',
                    stop: function( event, ui ) {
                        var contenu = $(this).text();
                        $(this).html( "<span>" + contenu + ui.size.width + "</span>" );
                    }
                });            
            } );
            </script>
        </head>
        <body>
     
            <div class="personne">
                <p>David</p>
            </div>
            <div class="personne">
                <p>Roger</p>
            </div>
     
     
        </body>
    </html>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Bonjour,
    je découvre ce plugin et effectivement il semblerait que dès que tu modifies le contenu il te faille réinitialiser le « resize ».

    Un solution peut être de réinitialiser après usage, par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var opt = {
        helper: 'ui-resizable-helper',
        grid: [100, 0],
        minheight: 20,
        minWidth: 100,
        handles: 'e, w',
        stop: function (event, ui) {
            var contenu = $(this).text();
            $(this).html('<span>' + contenu + ui.size.width + '</span>');
            $(this).resizable(opt);
        }
    }
    $(function () {
        $('.personne').resizable(opt);
    });
    [EDIT]
    en regardant de plus près c'est bien ton html() qui supprime les éléments ajoutés pour permettre l'étirement de ton élément.
    HTML après initialisation
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="personne ui-resizable">
        <p>David</p>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
        <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
    </div>
    Ce que tu peux faire c'est ajouter un conteneur
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="personne">
       <div class="conteneur"><p>David</p></div>
    </div>
    et de changer le contenu de celui-ci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(this).find('.conteneur').html('<span>' + contenu + ui.size.width + '</span>');

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juillet 2009
    Messages : 18
    Par défaut
    Merci NoSmoking !

    Effectivement je tournais en rond ... pas pensé du tout à la modification engendrée par .html() !

    Comme quoi un oeil extérieur fait toujours gagner du temps Ca fonctionne très bien avec un conteneur en effet

    Merci pour ton aide

  4. #4
    Membre extrêmement actif
    Profil pro
    Développeur
    Inscrit en
    Mars 2012
    Messages
    1 970
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2012
    Messages : 1 970
    Par défaut
    Et finalement tu as fait quoi?
    J'ai remarqué un problème hier avec un Close custom.
    La 1ère fois ça fonctionne et pas les suivantes

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Citation Envoyé par hotcryx Voir le message
    Et finalement tu as fait quoi?
    la réponse a été donnée
    Citation Envoyé par sensol
    Ca fonctionne très bien avec un conteneur en effet

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Les formulaires ne fonctionnent plus apres un export/import
    Par Altaria dans le forum Configuration
    Réponses: 3
    Dernier message: 17/09/2009, 11h58
  2. Include ne fonctionne plus après maj du serveur
    Par philou4212 dans le forum Langage
    Réponses: 16
    Dernier message: 02/08/2008, 09h05
  3. Requête ne fonctionne plus après avoir 'vider' les champs ?
    Par chapeau_melon dans le forum WinDev
    Réponses: 9
    Dernier message: 14/10/2007, 11h03
  4. Mon programme ne fonctionne plus après mise à jour de linux
    Par dybmans dans le forum GTK+ avec C & C++
    Réponses: 22
    Dernier message: 06/05/2007, 18h08
  5. function qui ne fonctionne plus après fractionnement Base
    Par Daniel MOREAU dans le forum Access
    Réponses: 1
    Dernier message: 25/05/2006, 20h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo