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 :

Selectionner non pas une css, mais une propiété css ?!


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2007
    Messages : 42
    Par défaut Selectionner non pas une css, mais une propiété css ?!
    Bonjour a tous !

    Depuis peu je me suis mis à implémenter un peu d'Ajax dans mon site pour le rendre plus attractif mais je rencontre une petite difficulté pour bien gérer les effets.

    Pour faire simple, j'ai une série d'article avec uniquement le titre qui s'affiche et quand je clique sur ce titre, le contenu apparait en glissant vers le bas grace à "toggle".

    Jusque là tout va bien. Voici le script que j'utilise :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <script>
      <?php
        echo '$("#js_fx_titre' . $donnees['id'] . '").click(function(){';
        echo '$("#js_fx_contenu' . $donnees['id'] . '").slideToggle("slow")';
        echo '});'; 
      ?>
    </script>
    Ce script se trouve dans la boucle qui affiche mes articles. La variable $donnees['id'] contient ainsi à chaque fois l'id de l'article en cours d'affichage. (pas sûr que ce soit la bonne méthode de mélanger comme cela javascript et php mais ça marche).

    Mais j'aimerai maintenant que un seul article puisse être affiché à la fois c-a-d que lorsque l'utilisateur clique sur le titre d'un article, celui-ci s'ouvre en glissant vers le bas, mais qu'alors l'article qui était ouvert se ferme en glissant vers le haut ! je m'exprime bien ?

    Pour y arriver je comptais faire une condition du type
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    for(toutes les div concernées){
      if(la propriété css "display" != "none"){
        exécuter le toggle
      } 
    }
    Mais comment effectuer cette instruction ?
    Comment tester une propriété css ?

    Merci beaucoup !

  2. #2
    Membre expérimenté

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2009
    Messages
    215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2009
    Messages : 215
    Par défaut
    Syntaxe javascript :

    tondiv.style.display



  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $(this).css("color","red");

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    le code donné par danielhagnoul sert à attribuer une valeur à une propriété CSS. Pour récupérer la valeur il te suffit d'utiliser le code :

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    42
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2007
    Messages : 42
    Par défaut
    Effectivement ça marche ! Merci beaucoup !

    Le problème, c'est que mon analyse était trop simpliste et je n'arrive donc toujours pas à appliquer le toggle sur l'article déjà ouvert.

    En gros, c'est cette instruction de mon pseudo code que je n'arrive pas à implémenter :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    for(toutes les div concernées){
      // condition et code
    }
    Je rappel que le nom de mes div sont "#js_fx_titre + Id_de_l_article" et "#js_fx_contenu + Id_de_l_article" où Id_de_l_article est évidement l'id de l'article contenu dans les div.

    Il faudrait que quand je clique sur un titre, le contenu s'affiche avec toggle, mais le contenu de l'article qui était déjà ouvert, lui, se ferme (également avec toggle)

    Comment pouvoir retrouver l'article déjà ouvert ?

    Merci !

  6. #6
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    C'est simple

    • soit on se dit
      • On garde en mémoire l'identifiant de l'article ouvert (je dis bien id article et non celui du div) ;
      • On modifie la propriété css
      • on fait un slideDown sur l'article à afficher
    • soit se dit
      • l'article ouvert on lui attribue un nom de classe bidon mais qui servira comme jeton, du style open ou on
      • A l'affichage d'un autre article, on fait un display: none sur tous les éléments de classe open
      • On affiche le nouvel article sélection et on lui attribue la classe open

    A creuser

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 06/03/2013, 13h00
  2. [XL-2002] Macro de comparaison d'une cellule d'une feuille avec une cellule d'une autre feuille.
    Par steelydan dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 08/09/2010, 12h59
  3. Réponses: 4
    Dernier message: 15/10/2009, 13h33
  4. [XL-2007] Afficher une checkbox dans une feuille si une checkbox d'une autre feuille est cochée
    Par JessieCoutas dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 18/08/2009, 13h35
  5. Recherche une valeur d'une cellule dans une colonne d'une autre feuille
    Par kourria dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 21/06/2007, 13h48

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