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 :

delay() et condition if et is()


Sujet :

jQuery

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 253
    Par défaut delay() et condition if et is()
    Bonjour,

    je créé une présentation en html (5) et css(3) et jquery
    d'un futur logiciel

    premiere question: j'utilise l'effets .animate(), juste après j'utilise l'evenement .text() avec un .delay() situé juste avant, seulement le delay n'est pas pris en compte

    pourquoi ?
    la dernière ligne s'effectue au même moment que le click sans tenir compte du delay ,alors que le delay de l'animation est bien réalisé.
    voici mon code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    $('#goto-constitution').click(function(){
    $('#validation, #gestion, #edition').fadeOut(700);
    $('#constitution').delay(1200).animate({width:'800px'});
    $('.lien-goto').delay(3200).text('Sommaire des Outils').css({'font-size':'14px'});
    });
    deuxieme question:

    je souhaite réalisé une suite d'évènement en effectuant une condition:
    Si ma div est de largeur 800 ,
    je veux que les div 2,3,4 disparaissent
    je veux que les div 1,2,3,4 reprenne une largeur de 188px
    je veux que les div 2,3,4 adopte une marge par la gauche de 5px
    je veux que les div (bloc,1,2,3,4) apparaissent

    je n'arrive pas à réaliser une condition en utilisant if et le selector (.is())
    (peut en utilisant autre chose que .is() ?) et peut-être n'ai je pas compris l'utilisation de ce selector, un peu d'aide ?

    voici mon code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    var $larg = $('#constitution').width() == 800);
    if($('#constitution').is($larg)){
    $('.lien-goto').click(function(){
    $('#caracteristique,#validation, #gestion, #edition, #constitution').fadeOut(700);
    $('#validation, #gestion, #edition, #constitution').css({width:'188px'});
    $('#validation, #gestion, #edition').css({marginLeft:'5px'});
    $('#caracteristique, #constitution,#validation, #gestion, #edition, ').delay(500).fadeIn(700);
    });
    }
    Pourriez-vous m'aider a réaliser un script qui correspond au code ci-dessus qui ne marche pas ?

    par avance je vous remercie pour vos conseils et réponses

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    la dernière ligne s'effectue au même moment que le click sans tenir compte du delay
    C'est normal, delay() est une animation "qui ne fait rien" et sert à mettre un délai d'exécution entre deux animations. Or text() ,'est pas une animation et n'est donc pas concerné par delay().

    je n'arrive pas à réaliser une condition en utilisant if et le selecteur (.is())
    Pas étonnant...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var $larg = $('#constitution').width() == 800);
    $larg est donc un booléen.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#constitution').is($larg)
    ne correspond donc à aucun filtre possible pour .is()
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 253
    Par défaut
    bonjour, merci

    pour votre réponse bovino

    aurais-je donc mal lu/compris l'explication du selector .is() à la page "api.jquery.com/is"

    et ce bout de code ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <script>
      var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
      $('li').click(function() {
        var $li = $(this);
        if ( $li.is( $alt ) ) {
          $li.slideUp();
        } else {
          $li.css("background", "red");
        }
      });
    </script>
    dans ce cas la , dans mon script aurais-je du utiliser la propriété css à la
    place d'un width == 800 ??

    j'aimerais avoir une confirmation que ce script :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#constitution').width() == 800);
    est correct et peu marché

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
     
        if ( $li.is( $alt ) ) {
    ??

    dis nous plutot sur quoi ton test est supposé se baser ???
    quelle comparaison veux tu faire ...

    slider selon la couleur d'un background ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    aurais-je donc mal lu/compris l'explication du selector .is() à la page "api.jquery.com/is"
    Ben... ce sont peut-être mes yeux qui me font des farces, mais je ne vois pas où, sur la page .is(), il est question de la possibilité de passer à cette méthode un paramètre de type booléen.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#constitution').width() == 800);
    Ce code est correct, puisque width() retourne un booléen, mais le == implique une comparaison et donc le résultat de cette expression sera donc un booléen.

    Là, c'est un peu différent, la méthode .css() renvoie la collection sur laquelle elle a été appelée, dans ton cas
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#browsers li:nth-child(2n)")
    Donc le if sera vrai si $li appartient à cette collection.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    pour le coup du boolean ce n'est pas is qu'il faut utiliser mais fliter()
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 253
    Par défaut
    merci a vous tous pour vos remarques:

    voici ce que je voudrais faire, dite moi si ça peut marcher:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    var $larg = $('#div').css({'width':'800px'});
     
    if($('#div').is($larg){
     
      $('#btn').click(function(){
         $('#div4').text('changer le text de la div');
         $('#div2').fadeOut();
         $('#div3').delay(1200).fadeIn();
         $('#div4').text('changer le text de la div après le delay de #div3');
      });
     
    }
    Pour la dernière ligne pourriez vous me dire si un évènement javascript/jquery peut réaliser la même chose qu'un delay() ?

    Bovino , vous avez effectivement bien lu, seulement j'avais déjà essayé le code ci-dessus sans résultat (et sans booleen) et qui correspond à ce qui est indiqué sur le site jquery.

    Spacefrog le code que j'ai coller était un exemple de script de Jquery.com pour le selector .is(), et comme je le dis à bovino j'avais déjà essayé avec le code ci-dessus en suivant l'exemple mais sans résultat

    En général c'est la réalisation de condition avec jquery que je n'arrive pas à effectuée. pour des script en javascript simple à faire.

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Manifestement, tu n'as pas lu (ou pas bien lu) mes explications...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var $larg = $('#div').css({'width':'800px'});
    Comme déjà expliqué, .css() s'applique à une collection d'objets jQuery, et comme toutes (quasiment) les méthodes s'appliquant à une collection d'objets jQuery, elle retourne la collection qui l'a appelée (éventuellement modifiée en fonction du type de méthode appelée), ce qui signifie que $larg correspond à $('#div'), de ce fait,
    revient au même que
    if($('#div').is($('#div'))ce qui a autant d'utilité que
    Je te conseillerais d'apprendre (et comprendre) jQuery avant d'essayer de l'utiliser !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 253
    Par défaut
    D'accord j'ai compris,

    cependant vous ne m'aiguillez pas sur une piste qui pourrais m'aider à réaliser ce script.

    De plus je n'ai pas utilisé javascript (la syntaxe) depuis plus d'un an, mais je pense bien que le script jquery précédent est tout à fait réalisable avec javascript . Seulement je ne trouve nullpart de référence pour comprendre la réalisation de condition (if) avec jquery. le site jquery.com n'ennonce pas d'exemple correspondant à mes besoins

    merci de me conseiller pour un tutoriel ou cours en ligne pour jquery et les conditions (je connais de manière globale les conditions , c'est la syntaxe jquery que je ne saisi pas).

    et à tout hasard si vous aviez un exemple à faire partager correspondant à mon script?

    Merci

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    cependant vous ne m'aiguillez pas sur une piste qui pourrais m'aider à réaliser ce script.
    c'est vrai ....
    filter() n'est pas une piste ... c'est un boulevard !!!!!!!!!!!
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Condition If multiple
    Par M1000 dans le forum ASP
    Réponses: 2
    Dernier message: 01/03/2004, 13h46
  2. [MYSQL] conditions et requetes
    Par sebos63 dans le forum SQL Procédural
    Réponses: 3
    Dernier message: 26/02/2004, 16h41
  3. Condition sur debug et release
    Par xave dans le forum MFC
    Réponses: 3
    Dernier message: 04/02/2004, 15h04
  4. Condition et contenu TImage
    Par Detlev_linux dans le forum Langage
    Réponses: 6
    Dernier message: 23/12/2003, 01h00
  5. boucle avec condition d'arret changeante
    Par NicoH dans le forum Langage
    Réponses: 3
    Dernier message: 10/06/2003, 11h48

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