Jquery comment m'adresser à mes jeunes tantes ?

Maljuna Kris · 03-02-2013 13:48:36

Saluton,
Et non, rien de sexuel ou d'homophobe ou d'incestueux là-dedans.
En fait je suis un lien HTML qui encapsule une petite image (un drapeau de 20x13 pixels).
Ma maman est une cellule <td> d'une ligne <tr> d'un tableau et elle a trois sœurs adjacentes qui sont revêtues, par une instruction de CSS, d'une cape d'invisibilité façon Harry Potter.

td + td {display :none}

J'ai deux méthodes onmouseover et onmouseout dont je souhaite qu'elle rende mes tantes visibles (fonction javascript voisine()) pour la première et leur remette leur cape d'invisibilité pour la seconde (fonction javascript devoisine()) .
Le code HTML est on ne peut plus simple :

<html>

    <head>

      <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">

        <title>Petit lexique multilingue illustré</title>

        <link rel="StyleSheet" type="text/css" href="style.css"/>

    </head>

    <body>

        <div id="header">

            <h1>Petit lexique multilingue illustré</h1>

        </div>

        <hr />

        <div id="corps">

            <table id="lexic">

               <tr id="veau" class="fr">

                    <th rowspan="5"><img src="veau.png"/></th>

                    <td class="flg"><a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/><img src="frflg.png"/></a></td>

                    <td>veau</td>

                    <td>veaux</td>

                    <td>génisse</td>

                </tr>

                <tr id="bovido" class="eo">

                    <td class="flg"><a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/><img src="eoflg.png"/></a></td>

                    <td>bovido</td>

                    <td>bovidoj</td>

                    <td>bovinido</td>

                </tr>

                <tr id="ternero" class="sp">

                    <td class="flg"><a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/><img src="spflg.png"/></a></td>

                    <td>ternero</td>

                    <td>terneros</td>

                    <td>ternera</td>

                </tr>

                <tr id="calf" class="uk">

                    <td class="flg"><a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/><img src="ukflg.png"/></a></td>

                    <td>calf</td>

                    <td>calves</td>

                    <td>heifer</td>

                </tr>

                <tr id="Kalb" class="dl">

                    <td class="flg"><a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/><img src="dlflg.png"/></a></td>

                    <td>Kalb</td>

                    <td>Kälber</td>

                    <td>Färse</td>

                </tr>

            <table>

        </div>

        <script src="jquery.js"></script>

        <script>

function voisine(drapeau){            

            $(function(){

                $(maman(drapeau)+'+ td').css('display','table-cell');

            });

            }

function devoisine(drapeau){            

            $(function(){

                $(maman(drapeau)+'+ td').css('display','none');

            });

            }

        </script>

        <script type='text/javascript' src='script.js'></script>

    </body>

</html>

vous l'avez compris, ce qui me manque c'est l'équivalent de la fonction maman().
Une idée ? Une piste ?
Ne laissez pas un pauvre retraité dans la panade, de grâce !
Amike, MK.

Maljuna Kris · 03-02-2013 15:07:18

Bon, je me suis dit que je pouvais jouer sur le fait que la mère <td> des anres <a> était toujours de class="flg"
alors j'ai revu mon code comme suit :

        <script src="jquery.js"></script>

        <script>

            $(function(){

                $('.flg > a').hover(function() {

                $(((this).parents('td'))+'+ td').css('display','table-cell');

                }, function() {

                 $(((this).parents('td'))+'+ td').css('display','none');

                 });

              });

         </script>

Bien sûr j'ai enlever toutes les interceptions des onmouseover et onmouseout.
Mais là, Firebug me dit :

console Firebug a écrit :

TypeError: this.parents is not a function
[Stopper sur une erreur]
$(((this).parents('td'))+'+ td').css('display','none');

Maljuna Kris · 03-02-2013 18:33:06

Après une grande déception de voir, une fois de plus, le XV de France ne pas réussir à s'imposer à Rome face à une équipe italienne, certes encore en progrès, mais pas non plus très enthousiasmante, je reviens vers mon problème de lignée de parrainage.

Cette fois j'obtiens l'affichage puis le masquage, par le passage de la souris, de toutes mes tantes mais aussi de celles de mes copains des autres <tr>:

            $(function(){

                $('.flg > a').hover(function() {

                $('td + td').css('display','table-cell');

                }, function() {

                 $('td + td').css('display','none');

                 });

              });

Il faut que je trouve le moyen de faire appliquer le sélecteur $('td + td') que sur $('.flg > a').hover les tantes du lien survolé.

Enfin, c'est comme ça que je comprends les choses.

Je trouve que cette notion de définition de sélecteur hiérarchique pointant vers les ascendants dans JQuery n'est vraiment pas bien explicitée ni commentée.
C'est là, je pense, qu'on atteint aux limites de ces langages aux antipodes des langages naturels, un peu comme avec les regexp., on se fait plaisir quand on s'en sort, parce qu'avec un code vraiment ramassé on parvient à contrôler des choses complexes, mais le temps qu'on perd pour arriver au résultat est complètement contre-productif.

Et je préfère ne pas penser à la maintenance par un tiers de ce type de scripts.

Maljuna Kris · 03-02-2013 23:29:48

J'ai le sentiment d'avoir présumé soit des possibilités de jQuery à gérer l'arborescence ascendante, soit (plutôt) de mes facultés intellectuelles pour bien intégrer le fonctionnement de cet infâme bouzin.

Il faut dire que la doc, les tutos, les exemples traitant JQuery, notamment sous cet angle, ne sont pas légion ou alors au mieux évasifs ou, carrément, abscons.

Donc je crois que je vais jeter l'éponge et essayer de trouver une solution javascript basique.

J'aurais juste perdu une journée de plus, voilà qui ne va pas me motiver pour pérenniser l'utilisation de JQuery à l'avenir.

Et Dame 4in qui m'énerve avec son nouveau joujou de Noël (non pas un sex-toy, bande d'obsédés, son iPad kivabien).

nicolas · 04-02-2013 10:36:53

Je me lance, sans certitude d'avoir compris à 100% ce que tu voulais faire. Personnellement je ne suis pas fan du javascript intrusif sans la page donc j'ai externalisé. De plus mettre un lien avec une ancre juste pour mettre un lien, c'est moyen ! :-) D'ailleurs tu avais fermé le lien directement ce qui peut poser des problèmes :

<a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/>

 

eu lieu de

<a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);">

 

J'ai viré tout ça.
Je suppose que tu as une class .flg dans ta feuille de style qui contient ça par exemple :

table tr td {

  visibility: hidden;

}

table tr td.flg {

  visibility: visible;

}

Le code javascript pour afficher les libéllés correspondant à la langue est tout simplement (si j'ose dire) :

$(function() {

    $('.flg').hover(

  function() {

      $(this).parent().find('td:not(.flg)').css('visibility', 'visible');

  },

      function() {

      $(this).parent().find('td:not(.flg)').css('visibility', 'hidden');

  }

    );

});

Si ce n'est pas ça grand chef, dis moi.

Maljuna Kris · 04-02-2013 11:13:07

nicolas a écrit :

Je me lance, sans certitude d'avoir compris à 100% ce que tu voulais faire. Personnellement je ne suis pas fan du javascript intrusif sans la page donc j'ai externalisé. De plus mettre un lien avec une ancre juste pour mettre un lien, c'est moyen ! :-) D'ailleurs tu avais fermé le lien directement ce qui peut poser des problèmes :

<a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/>

... Ôte-moi d'un vague doute, normalement les évènements onmouseover() onmouseout() sont censés n'être réactifs que sur des ancres ou des areas de usemap ou les choses ont-elle à ce point changé ?
D'autant que mes acres ne sont pas vides, elles encapsulent, chacune, une image.

nicolas a écrit :

... au lieu de

<a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);">

J'ai viré tout ça.
Je suppose que tu as une class .flg dans ta feuille de style qui contient ça par exemple :

table tr td {
visibility: hidden;
}
table tr td.flg {
visibility: visible;
}
...

et tu supposes mal. la css ne comporte, pour l'instant, aucune règle afférente à cette class='flg', les drapeaux et l'icône représentant l'item restent toujours visibles, ce sont les trois colonnes contenant le nominatif masculin singulier, le nominatif pluriel et l'éventuel nominatif féminin singulier qui ne doivent s'afficher qu'au survol du drapeau de la langue et pour l'item considérer et lui seul.

nicolas a écrit :

...
Le code javascript pour afficher les libéllés correspondant à la langue est tout simplement (si j'ose dire) :

$(function() {
$('.flg').hover(
function() {
$(this).parent().find('td:not(.flg)').css('visibility', 'visible');
},
function() {
$(this).parent().find('td:not(.flg)').css('visibility', 'hidden');
}
);
});
Si ce n'est pas ça grand chef, dis moi.

Restons simple, appelle-moi MAITRE, petit padawan, comme tout le monde.
Je n'ai pas le temps de tester dans l'immédiat mais ta proposition semble intéressante, a priori.
D'autant, qu'à terme, quand on cliquera sur le drapeau il faudra que je trouve le moyen de shunter l'action du onmouseout pour cette ligne (les colonnes resteront affichées jusqu'à ce qu'on clique sur un autre drapeau, même d'un autre item).
De toutes façons, merci pour ta sympathique contribution.
Amike MK.

nicolas · 04-02-2013 13:15:01

Maljuna Kris a écrit :

nicolas a écrit :
Je me lance, sans certitude d'avoir compris à 100% ce que tu voulais faire. Personnellement je ne suis pas fan du javascript intrusif sans la page donc j'ai externalisé. De plus mettre un lien avec une ancre juste pour mettre un lien, c'est moyen ! :-) D'ailleurs tu avais fermé le lien directement ce qui peut poser des problèmes :

<a href="#" onmouseover="voisine(this);" onmouseout="devoisine(this);"/>
... Ôte-moi d'un vague doute, normalement les évènements onmouseover() onmouseout() sont censés n'être réactifs que sur des ancres ou des areas de usemap ou les choses ont-elle à ce point changé ?

Je ne voudrais pas te brusquer dans ta retraite bien méritée mais même en Bretagne et depuis des lustres les événements liés à la souris (over, out, click, double click,...) sont actifs quels que soit l'élément survolé et bien évidemment quel que soit le navigateur.
Je pense que tu confonds avec la gestion de cette propriété visuelle côté utilisateur en css qui n'est possible que sur les liens (et assimilés) pour que cela fonctionne quel que soit le navigateur.

Maljuna Kris a écrit :

Restons simple, appelle-moi MAITRE, petit padawan, comme tout le monde.
Je n'ai pas le temps de tester dans l'immédiat mais ta proposition semble intéressante, a priori.
D'autant, qu'à terme, quand on cliquera sur le drapeau il faudra que je trouve le moyen de shunter l'action du onmouseout pour cette ligne (les colonnes resteront affichées jusqu'à ce qu'on clique sur un autre drapeau, même d'un autre item).
De toutes façons, merci pour ta sympathique contribution.
Amike MK.

Le fait d'externaliser le javascript te permettra de changer l'événement ou d'en ajouter ou de le rendre paramétrable.

var flag_event = "click";

$(function() {

    $('.flg').bind(flag_event, function(e) {

   });

});

Tu peux mettre ce que tu veux à la place de click, même plusieurs événements : exemple flag_event = "click hover"
Tu peux après récupérer le type de l'événement dans la fonction de callback.

Maljuna Kris · 04-02-2013 13:40:44

Bon, ton script pour le hover, que je viens de tester, remplit tout à fait le cahier des charges. Seule la ligne du drapeau de l'item survolé s'affiche (au passage, j'utilise display (none||table-cell) et non visibility, car visibility affiche le background, ce qui n'est pas souhaité, mais ce n'est qu'un détail);
Je t'en remercie donc amplement et à nouveau.
Pour le reste, tu as probablement raison, il y a tellement longtemps que je ne pratique plus qu'en dilettante que ma mémoire est probablement prise en défaut.
Toutefois, puisque tu sembles l'ignorer, je te précise que nous autres, retraités, avons des emplois du temps délirants. Aussi ne pourrai-je me pencher sur ta proposition que dans la soirée, car cette après-midi, passage à la déchetterie de Plonévez-Porzay pour vider la remorque (je suis en train de ranger le sous-sol sous l'impulsion tenace et assidue de Dame 4in), puis retour ici pour se changer et se rendre à Cinéville à Quimper pour une séance de connaissance du monde consacrée au pays cathare.
Comme une sorte de retour au source, pour moi, qui suis un lecteur assidu d'Henri Gougaud, notamment de Bélibaste.
Bélibaste, un nom qui, si on le décompose peut signifier "La guerre ça suffit", donc une profession de foi pacifiste. Quand on sait le sort qui fut réservé aux parfaits cathares ...
Et demain il me faudra consacrer un peu de temps à mes abeilles puisqu'elles ont décidé de commencer leur saison printanière depuis une bonne semaine maintenant. J'ai beau leur dire de se méfier d'un toujours possible coup de froid d'ici la fin mars elles n'en n'ont rien à cirer. Ce qui, pour des abeilles, est assez paradoxal.

@+ et encore merci à toi.

nicolas · 04-02-2013 14:24:10

Maljuna Kris a écrit :

Bon, ton script pour le hover, que je viens de tester, remplit tout à fait le cahier des charges. Seule la ligne du drapeau de l'item survolé s'affiche (au passage, j'utilise display (none||table-cell) et non visibility, car visibility affiche le background, ce qui n'est pas souhaité, mais ce n'est qu'un détail);
Je t'en remercie donc amplement et à nouveau.
Pour le reste, tu as probablement raison, il y a tellement longtemps que je ne pratique plus qu'en dilettante que ma mémoire est probablement prise en défaut.

Crois-tu vraiment que ce soit la manque de pratique pour le problème de mémoire ? :-) Ne dis-tu pas cela pour te rassurer ? Mouarff. Je pars en courant de peur de me prendre un coup de canne.

Maljuna Kris a écrit :

Toutefois, puisque tu sembles l'ignorer, je te précise que nous autres, retraités, avons des emplois du temps délirants.

Je te confirmerai cela dans 30 ou 40 ans... peut-être plus si la situation ne s'améliore pas.

Maljuna Kris a écrit :

Aussi ne pourrai-je me pencher sur ta proposition que dans la soirée, car cette après-midi, passage à la déchetterie de Plonévez-Porzay pour vider la remorque (je suis en train de ranger le sous-sol sous l'impulsion tenace et assidue de Dame 4in), puis retour ici pour se changer et se rendre à Cinéville à Quimper pour une séance de connaissance du monde consacrée au pays cathare.
Comme une sorte de retour au source, pour moi, qui suis un lecteur assidu d'Henri Gougaud, notamment de Bélibaste.
Bélibaste, un nom qui, si on le décompose peut signifier "La guerre ça suffit", donc une profession de foi pacifiste. Quand on sait le sort qui fut réservé aux parfaits cathares ...
Et demain il me faudra consacrer un peu de temps à mes abeilles puisqu'elles ont décidé de commencer leur saison printanière depuis une bonne semaine maintenant. J'ai beau leur dire de se méfier d'un toujours possible coup de froid d'ici la fin mars elles n'en n'ont rien à cirer. Ce qui, pour des abeilles, est assez paradoxal.

Je connais un peu le coin où tu habites. J'ai passé 5 été de suite à Pont l'abbé en plein pays bigouden; une année à Crozon (enfin juste à côté) et l'été prochain pour la deuxième année consécutive nous allons à Plougerneau.
Et pour ta passion (enfin l'une de tes passions en dehors de Dame 4in), combien as-tu de ruches ? A la sortie du Lycée j'ai songé un moment à être apiculteur. Je ne me rappelle plus précisément ce qui m'a fait renoncé.

Maljuna Kris a écrit :

@+ et encore merci à toi.

Je t'en prie. N'hésite pas si tu as d'autres questions.

Maljuna Kris · 04-02-2013 19:11:30

Le documentaire sur le pays cathare était vraiment d'un niveau très moyen.

nicolas a écrit :

Le code javascript pour afficher les libellés correspondant à la langue est tout simplement (si j'ose dire) :

tu es tout à fait fondé à mettre en exergue la simplicité du code proposé qui ne souffre pas la moindre ambigüité.
C'est clair et ça se comprend à première lecture.
Dont acte.
Par contre le deuxième script que tu me suggères, pour intercepter l'évènement click, me laisse perplexe. Je tourne le problème dans ma tête (même pendant la séance de connaissance du monde) et si je vois bien comment réitérer ce que fait hover, je ne vois pas comment y shunter le mouseout pour la ligne clickée.

nicolas · 04-02-2013 20:27:40

L'idée du deuxième script c'est de faire quelque chose comme ça (en remettant les liens autour des images de drapeaux :

$(function() {

    $('.flg').bind("hover click", function(e) {

  if (e.type=='mouseenter') {

      $(this).parent().find('td:not(.flg)').css('visibility', 'visible');

  } else if (e.type=='mouseleave') {

      $(this).parent().find('td:not(.flg)').css('visibility', 'hidden');

  } else if (e.type=='click') {

      var href = $(this).find('a').attr('href');

      alert('click: '+href);

      e.preventDefault();

  }

    });

});

En revanche côté expérience utilisateur ce n'est pas forcément optimal car ce n'est pas toujours très clair d'avoir deux types actions (over/out et clic) pour un même élément de la page. A toi de voir.

En relisant je crois que je comprends un peu mieux ce que tu souhaites faire. Dans ce cas, il faudrait ne rien faire sur l'événement mouseleave si j'ai bien compris. Il suffirait de ne laisser que click et mouseenter comme événement et virer hover (qui regroupe mouseenter et mouseout)

Maljuna Kris · 04-02-2013 21:45:33

Que cela soit bien clair, perso, je souhaite surtout ne rien faire, ou plutôt autre chose, m'entraîner à la bombarde, avancer dans l'écriture d'un des nombreux bouquins que j'ai en chantier, massacrer quelques chansons en m'accompagnant à la guitare.
Au lieu de cela je dois ranger le sous-sol et respecter le cahier des charges suivant :

1. quand la souris survole un drapeau les colonnes masquées de la ligne doivent apparaître.

2. quand on clique sur un drapeau les colonnes masquées doivent apparaître et rester apparentes même quand la souris quitte ce drapeau une fois le point 2 réalisé les autres lignes de la page doivent conserver le même comportement qu'en 1

3. dès que l'on clique sur un autre drapeau qu'en 2, le comportement observé en 2 se reporte sur la nouvelle ligne, la ligne en 2 redevient une ligne normale.

4. si l'on reclick sur un bouton déjà affiché de manière permanente, il redevient furtif (hover/out)

Et crois-moi, ma cliente (Dame 4in) n'en démordra pas.
C'est assez simple à expliquer, par contre, à réaliser ce n'est pas si évident que cela.
J'ai cependant dans l'idée d'utiliser comme drapeau un attribut genre alt ou lang qui prendrait une valeur convenue, genre 'fix' ou bien, encore mieux, d'ajouter une class provisoire à la ligne clickée et d'exclure cette classe du traitement du survol.

Je verrai cela demain, si les petits cochons ne m'ont pas mangé d'ici-là.

Merci encore à toi, Nicolas (même si, depuis qu'un certain tout petit nicolas m'a obligé à faire 4 mois au-delà de mes 60 ans, je hais, a priori, tout Nicolas potentiel).

PS : Je sais bien qu'en français académique le verbe est CLIQUER et non CLICKER, mais j'avais envie de transgresser.
On a parfois de ces lubies nous les vieux excentriques (Non Pierrot, pas 'sans trique', enfin pas tout le temps.)

nicolas · 04-02-2013 22:53:28

ça me semble clair et pas insurmontable. Je pense qu'en jouant avec la propriété is(':visible') de jquery tu devrais t'en sortir.

Maljuna Kris · 05-02-2013 03:05:49

Affres de l'âge, les insomnies.
J'en profite pour surfer et atterrir chez http://jquery.developpeur-web2.com/documentation.php.
Qui pourra m'expliquer pourquoi je ne suis jamais tomber sur ce lien auparavant (chinois, bien sûr, what else ?) ?

Maljuna Kris · 05-02-2013 09:16:56

nicolas a écrit :

Je pense qu'en jouant avec la propriété is(':visible') de jquery tu devrais t'en sortir.

Je ne crois pas car, je n'utilise pas "visibility(hidden/visible)" mais "display(none, table-cell)" et je ne vois pas qu'il existe de sélecteur ":displayed".

nicolas · 05-02-2013 11:48:33

En jouant avec deux classes css, je pense que tu arrives au comportement voulu.

table tr td {

  visibility: hidden;

}

table tr td.flg {

  visibility: visible;

}

table tr.active td, table tr.clicked td {

  visibility: visible;

}

Et en javascript cela peut donner ça :

$(function() {

    $('.flg').bind("hover click", function(e) {

  var parent = $(this).parent();

  if (e.type=='click') {

      if (parent.hasClass('clicked')) {

    parent.removeClass('clicked');

      } else {

    parent.parent().find('tr.clicked').removeClass('clicked');

    parent.addClass('clicked');   

      }

  } else if (e.type=='mouseenter') {

      parent.addClass('active');

  } else if (e.type=='mouseleave') {

      parent.removeClass('active');

  }

    });

});

Maljuna Kris · 05-02-2013 14:07:23

Visibility continue de me poser le problème de la persistance des background avant le premier mouseleave, mais on verra ça plus tard.

Pour l'instant ton script fournit bien l'effet furtif (mouse[enter/leave]) mais se contrefout de l'aspect clicked.
Je te mets ici l'intégralité des fichiers puisque tout cela est, pour l'instant, réduit à la portion congrue dans cette phase de test.
le petit veau drapeau français samidaenoj union jack bandera espanola deutschland
la feuille de style

.fr{background-color:#FFF;color:#00F}
.eo{background-color:#FFF;color:#080}
.dl{background-color:#FF0;color:#000}
.sp{background-color:#FF0;color:#F00}
.uk{background-color:#00F;color:#FFF}
.flg{background-color:#FFF;color:#FFF}

table tr td { visibility: hidden;}

table tr td.flg {visibility: visible;}

table tr.active td, table tr.clicked td { visibility: visible;}

le javascript

$(function(){

    $('.flg').hover(
function(){

        $(this).parent().find('td:not(.flg)').css('display','table-cell');
},
function(){

        $(this).parent().find('td:not(.flg)').css('display','none');
});
});

$(function() {

    $('.flg').bind("hover click", function(e) {

  var parent = $(this).parent();

  if (e.type=='click') {

      if (parent.hasClass('clicked')) {

    parent.removeClass('clicked');

      } else {

    parent.parent().find('tr.clicked').removeClass('clicked');

    parent.addClass('clicked');   

      }

  } else if (e.type=='mouseenter') {

      parent.addClass('active');

  } else if (e.type=='mouseleave') {

      parent.removeClass('active');

  }

    });

});

et la petite page HTML

<html>

    <head>

      <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">

        <title>Petit lexique multilingue illustré</title>

        <link rel="StyleSheet" type="text/css" href="style.css"/>

    </head>

    <body>

        <div id="header">

            <h1>Petit lexique multilingue illustré</h1>

        </div>

        <hr />

        <div id="corps">

            <table id="lexic">

               <tr id="veau" class="fr">

                    <th rowspan="5"><img src="veau.png"/></th>

                    <td class="flg">|<a href="#" /><img src="frflg.png"/></a></td>

                    <td>veau</td>

                    <td>veaux</td>

                    <td>génisse</td>

                </tr>

                <tr id="bovido" class="eo">

                    <td class="flg">|<a href="#" /><img src="eoflg.png"/></a></td>

                    <td>bovido</td>

                    <td>bovidoj</td>

                    <td>bovinido</td>

                </tr>

                <tr id="ternero" class="sp">

                    <td class="flg">|<a href="#" /><img src="spflg.png"/></a></td>

                    <td>ternero</td>

                    <td>terneros</td>

                    <td>ternera</td>

                </tr>

                <tr id="calf" class="uk">

                    <td class="flg">|<a href="#" /><img src="ukflg.png"/></a></td>

                    <td>calf</td>

                    <td>calves</td>

                    <td>heifer</td>

                </tr>

                <tr id="Kalb" class="dl">

                    <td class="flg">|<a href="#" /><img src="dlflg.png"/></a></td>

                    <td>Kalb</td>

                    <td>Kälber</td>

                    <td>Färse</td>

                </tr>

               <tr id="veau2" class="fr">

                    <th rowspan="5"><img src="veau.png"/></th>

                    <td class="flg">|<a href="#" /><img src="frflg.png"/></a></td>

                    <td>veau2</td>

                    <td>veaux2</td>

                    <td>génisse2</td>

                </tr>

                <tr id="bovido2" class="eo">

                    <td class="flg">|<a href="#" /><img src="eoflg.png"/></a></td>

                    <td>bovido2</td>

                    <td>bovidoj2</td>

                    <td>bovinido2</td>

                </tr>

                <tr id="ternero2" class="sp">

                    <td class="flg">|<a href="#" /><img src="spflg.png"/></a></td>

                    <td>ternero2</td>

                    <td>terneros2</td>

                    <td>ternera2</td>

                </tr>

                <tr id="calf2" class="uk">

                    <td class="flg">|<a href="#" /><img src="ukflg.png"/></a></td>

                    <td>calf2</td>

                    <td>calves2</td>

                    <td>heifer2</td>

                </tr>

                <tr id="Kalb2" class="dl">

                    <td class="flg">|<a href="#" /><img src="dlflg.png"/></a></td>

                    <td>Kalb2</td>

                    <td>Kälber2</td>

                    <td>Färse2</td>

                </tr>

            <table>

        </div>

        <script src="jquery.js"></script>

        <script type='text/javascript' src='script.js'></script>

    </body>

</html>

Je vais continuer à tester des trucs sur la piste que tu as ouverte mais peut-être cela t'aidera-t-il à mieux cerner le problème.

Encore merci.
Ĝis, amike, MK.

nicolas · 05-02-2013 14:30:06

Il faut enlever la première partie du javascript et ne garder que ce que je t'avais mis.
Chez moi ça marche comme dirait l'autre : http://www.nikrou.net/veau/

Maljuna Kris · 05-02-2013 15:52:48

Évidemment ! (maintenant que tu le dis).

J'ai remis les display(none|table-cell) plutôt que les visibility(visible|display) pour squeezer les background intempestifs.

Je ne trouvais pas la faille dans ton code, et pour cause, c'était mon vieux code qui, en outre d'interférer gardait l'approche par display alors que ton code attaque sur la visibility.

Bon, bah Dame 4in va pouvoir continuer à charger la mule.

Un immense MERCI, si tu passes par Plomo cet été, n'oublies pas de venir goûter mon miel (enfin celui que me font mes abeilles).

Amike, MK.

Maljuna Kris · 05-02-2013 16:59:04

Ça n'a pas traîné.
Nouvelle ligne au cahier des charges, quand on `click`sur l'image (le veau pour l'instant) cela doit rendre toutes les lignes de l'item visibles en permanence. Jusqu'à ce que l'on `click` à nouveau sur le veau ou sur un drapeau, ou sur une autre image.
Et là, tel qu'est conçu le tableau HTML, je vois mal comment reconnaître les tantes <tr> de l'item du <tr> contenant le <th> mère de l'image `clicked`, et seulement elles.
Peut-être en mettant une deuxième class à chaque <tr> class identique pour toutes les <tr> d'un même item.

            <table id="lexic">

               <tr id="veau" class="fr 01">

                    <th rowspan="5"><img src="veau.png"/></th>

                    <td class="flg">|<a href="#" /><img src="frflg.png"/></a></td>

                    <td>veau</td>

                    <td>veaux</td>

                    <td>génisse</td>

                </tr>

                <tr id="bovido" class="eo 01">

                    <td class="flg">|<a href="#" /><img src="eoflg.png"/></a></td>

                    <td>bovido</td>

                    <td>bovidoj</td>

                    <td>bovinido</td>

                </tr>

                <tr id="ternero" class="sp 01">

                    <td class="flg">|<a href="#" /><img src="spflg.png"/></a></td>

                    <td>ternero</td>

                    <td>terneros</td>

                    <td>ternera</td>

                </tr>

                <tr id="calf" class="uk 01">

                    <td class="flg">|<a href="#" /><img src="ukflg.png"/></a></td>

                    <td>calf</td>

                    <td>calves</td>

                    <td>heifer</td>

                </tr>

                <tr id="Kalb" class="dl 01">

                    <td class="flg">|<a href="#" /><img src="dlflg.png"/></a></td>

                    <td>Kalb</td>

                    <td>Kälber</td>

                    <td>Färse</td>

                </tr>

               <tr id="veau2" class="fr 02">

                    <th rowspan="5"><img src="veau.png"/></th>

                    <td class="flg">|<a href="#" /><img src="frflg.png"/></a></td>

                    <td>veau2</td>

                    <td>veaux2</td>

                    <td>génisse2</td>

                </tr>

                <tr id="bovido2" class="eo 02">

                    <td class="flg">|<a href="#" /><img src="eoflg.png"/></a></td>

                    <td>bovido2</td>

                    <td>bovidoj2</td>

                    <td>bovinido2</td>

                </tr>

                <tr id="ternero2" class="sp 02">

                    <td class="flg">|<a href="#" /><img src="spflg.png"/></a></td>

                    <td>ternero2</td>

                    <td>terneros2</td>

                    <td>ternera2</td>

                </tr>

                <tr id="calf2" class="uk 02">

                    <td class="flg">|<a href="#" /><img src="ukflg.png"/></a></td>

                    <td>calf2</td>

                    <td>calves2</td>

                    <td>heifer2</td>

                </tr>

                <tr id="Kalb2" class="dl 02">

                    <td class="flg">|<a href="#" /><img src="dlflg.png"/></a></td>

                    <td>Kalb2</td>

                    <td>Kälber2</td>

                    <td>Färse2</td>

                </tr>

            <table>

nicolas · 05-02-2013 18:06:14

Je n'avais pas vu mais ton tableau n'a pas la bonne structure ce qui n'aide pas à mettre en place la fonctionnalité souhaitée. Ajoute une partie thead et tbody et mets la ligne d'entête dans la partie thead.
Le plus simple serait de faire deux tableaux mais ce n'est pas forcément insurmontable sans.

Essaie de peaufiner le html pour que le tableau est une forme correcte. Après écrire le javascript pour mettre en place le clic sur le veau sera un jeu d'enfant !

Maljuna Kris a écrit :

Un immense MERCI, si tu passes par Plomo cet été, n'oublies pas de venir goûter mon miel (enfin celui que me font mes abeilles).

Je note. Je vais en Bretagne les 3 dernières semaines de juillet à Plougerneau.

Maljuna Kris · 05-02-2013 19:31:05

Il n'y a pas de <thead> à ce tableau (pour l'instant, avec Dame 4in il ne faut jurer de rien.), mais il est vrai que je peux quand même tout mettre dans un tbody.
J'ai ajouté une deuxième classe incrémentale aux <tr> 01, 02, etc. à venir. Tous les <tr> d'un même item auront donc deux classes soit fr, sp, eo, uk, dl et la class incrémentale de l'item.
Bon, si je n'encapsule pas la balise img du veau dans une ancre (la balise pas le veau, quoique ...), il n'y a pas d'évènement click().
Le premier item devient donc:

               <tr id="veau" class="fr 01">

                    <th rowspan="5"><a href="#" /><img src="veau.png"/></a></th>

                    <td class="flg">|<a href="#" /><img src="frflg.png"/></a></td>

                    <td>veau</td>

                    <td>veaux</td>

                    <td>génisse</td>

                </tr>

                <tr id="bovido" class="eo 01">

                    <td class="flg">|<a href="#" /><img src="eoflg.png"/></a></td>

                    <td>bovido</td>

                    <td>bovidoj</td>

                    <td>bovinido</td>

                </tr>

                <tr id="ternero" class="sp 01">

                    <td class="flg">|<a href="#" /><img src="spflg.png"/></a></td>

                    <td>ternero</td>

                    <td>terneros</td>

                    <td>ternera</td>

                </tr>

                <tr id="calf" class="uk 01">

                    <td class="flg">|<a href="#" /><img src="ukflg.png"/></a></td>

                    <td>calf</td>

                    <td>calves</td>

                    <td>heifer</td>

                </tr>

                <tr id="Kalb" class="dl 01">

                    <td class="flg">|<a href="#" /><img src="dlflg.png"/></a></td>

                    <td>Kalb</td>

                    <td>Kälber</td>

                    <td>Färse</td>

                </tr>

et avec ça, je récupère la class:

$(function() {

    $('th a').bind("click", function(e) {

        var classItem = $(this).parent().parent().attr('class').split( ' ')[1];

        alert(classItem);

        var nbFreresPepe = ('tr.' + classItem).length;

        if (e.type=='click') {

            alert(nbFreresPepe);

            }

        });

    });

j'obtiens bien '01' ou '02' suivant l'image sur laquelle je clique, et qu'il y a 5 frères.
Je vais essayer d'aller plus loin, mais là, c'est l'heure de la soupe.

nicolas a écrit :

Je note. Je vais en Bretagne les 3 dernières semaines de juillet à Plouguerneau.

Généralement, nous, l'été, on ne bouge pas.
Dame 4in me souffle :

Plouguerneau : D'or à la fasce de gueules, à la bande de sinople chargée de trois besants d'argent, brochant sur le tout, au chef d'hermine.

Maljuna Kris · 05-02-2013 23:21:18

Oooops ! Je crois qu'il me faut déchanter, sans le $ devant, var nbFreresPepe = ('tr.' + classItem).length; fournit 5 parce que c'est la longueur de la chaîne 'tr.01', coïncidence fâcheuse. Quand je mets le $ devant la valeur devient 0.
Dommage ...

nicolas · 06-02-2013 09:42:59

Je viens de comprendre ce qui me gênait dans ton code. Dans la première ligne tu mets th rowspan="5" et ensuite 4 td. Ce n'est pas logique, ni valide.
Voici le html que je te propose (et qui te donnera le même rendu):

   <table id="lexic">

        <tr id="veau" class="fr">

          <th rowspan="6"><img src="veau.png"/></th>

  </tr>

  <tr>

          <td class="flg"><img src="frflg.png"/></td>

    <td>veau</td>

    <td>veaux</td>

          <td>génisse</td>

        </tr>

        <tr id="bovido" class="eo">

          <td class="flg"><img src="eoflg.png"/></td>

          <td>bovido</td>

          <td>bovidoj</td>

          <td>bovinido</td>

        </tr>

        <tr id="ternero" class="sp">

          <td class="flg"><img src="spflg.png"/></td>

          <td>ternero</td>

          <td>terneros</td>

          <td>ternera</td>

        </tr>

        <tr id="calf" class="uk">

          <td class="flg"><img src="ukflg.png"/></td>

          <td>calf</td>

          <td>calves</td>

          <td>heifer</td>

        </tr>

        <tr id="Kalb" class="dl">

          <td class="flg"><img src="dlflg.png"/></td>

          <td>Kalb</td>

          <td>Kälber</td>

          <td>Färse</td>

        </tr>

        <tr id="veau2" class="fr">

          <th rowspan="6"><img src="veau.png"/></th>

  </tr>

  <tr>

          <td class="flg"><img src="frflg.png"/></td>

          <td>veau2</td>

          <td>veaux2</td>

          <td>génisse2</td>

        </tr>

        <tr id="bovido2" class="eo">

          <td class="flg"><img src="eoflg.png"/></td>

          <td>bovido2</td>

          <td>bovidoj2</td>

          <td>bovinido2</td>

        </tr>

        <tr id="ternero2" class="sp">

          <td class="flg"><img src="spflg.png"/></td>

          <td>ternero2</td>

          <td>terneros2</td>

          <td>ternera2</td>

        </tr>

        <tr id="calf2" class="uk">

          <td class="flg"><img src="ukflg.png"/></td>

          <td>calf2</td>

          <td>calves2</td>

          <td>heifer2</td>

        </tr>

        <tr id="Kalb2" class="dl">

          <td class="flg"><img src="dlflg.png"/></td>

          <td>Kalb2</td>

          <td>Kälber2</td>

          <td>Färse2</td>

        </tr>

      </table>

La feuille de style associée en ajoutant le curseur plus joli au survol des drapeaux :

.fr  {background-color : #FFF; color :#00F}

.eo  {background-color : #FFF; color :#080}

.dl  {background-color : #FF0; color :#000}

.sp  {background-color : #FF0; color :#F00}

.uk  {background-color : #00F; color :#FFF}

.flg{background-color : #FFF; color :#FFF}

table tr th { visibility: visible;cursor: pointer;}

table tr td { visibility: hidden;}

table tr td.flg {visibility: visible;cursor:pointer;}

table tr.active td, table tr.clicked td, table tr.th-clicked td { visibility: visible;}

J'ai ajouté la fonctionnalité du clic sur le veau et voici le javascript :

$(function() {

    $('.flg').bind("hover click", function(e) {

  var parent = $(this).parent();

  if (e.type=='click') {

      if (parent.hasClass('clicked')) {

    parent.removeClass('clicked');

      } else {

    parent.parent().find('tr.clicked').removeClass('clicked');

    parent.addClass('clicked');   

      }

  } else if (e.type=='mouseenter') {

      parent.addClass('active');

  } else if (e.type=='mouseleave') {

      parent.removeClass('active');

  }

    });

    $('th').click(function(e) {

  var nb_tr = parseInt($(this).attr('rowspan'), 10) - 1;

  var current = $(this).parent();

  var th_clicked = false;

  if ($(this).parent().next().hasClass('th-clicked')) {

      th_clicked = true;

  }

  for (var i=0;i<nb_tr;i++) {

      current = current.next();

      if (th_clicked) {

    current.removeClass('th-clicked');

      } else {

    current.addClass('th-clicked');

      }

  }

    });

});

Le javascript est certainement perfectible mais l'idée est là.

Maljuna Kris · 06-02-2013 15:19:43

A mon tour de ne pas comprendre et d'être médusé.

J'ai 5 <tr> par item (un pour chacune des langues) seul le premier <tr> comporte 5 colonnes (1 <th> et 4<td>)
les quatre autres n'ont que 4 <td> puisque le <th rowspan="5"> du premier <tr> occupe la première colonne des 4 autres lignes.
Pour moi, ça c'est logique et cohérent.

Qu'y-a-t-il de non confirme là-dedans ? J'ai toujours pratiqué et vu pratiquer de la sorte.

La logique de ton rowspan="6", par contre, me surprend, une ligne pour l'image et 5 lignes pour les 5 langues.
Mais, et à ma grande stupéfaction, ta solution donne exactement le même rendu ce qui reste pour moi un mystère.

Et là, j'avoue, je n'y comprends plus rien.

Par ailleurs, reste le problème que visibility:hidden ne cache que le contenu et n'enlève pas le background, contrairement à display:none qui, lui a le défaut de ne pas garder la stabilité du tableau en largeur et hauteur des colonnes.

Sinon, le cahier des charges stipule qu'un click sur un drapeau ou une image d'un autre item doit masquer les lignes déjà figées

Mais j'attends de savoir ce qu'en dira Dame 4'in. Après tout, quand on clique à nouveau sur l'image, les lignes se masquent.

Peut-être qu'elle voudra garder l'idée de pouvoir démasquer plusieurs items.

Bon, tu n'auras vraiment pas voler ton pot de miel, que d'émotions et de découvertes !
*- on peut cliquer sur tout
*- un comportement inconnu du rowspan
*- et je ne parle même pas de JQuery.

Je crois que tu auras même droit à ma spécialité, le pain d'épices aux fruits secs.
Pour répondre (enfin) à ta question nous avons actuellement 3 colonies d'abeilles et nous ne comptons pas aller au-delà de 6. Quatre chez nous et deux (au printemps et en été) chez fille aînée à Penmarc'h.
Je dis bien actuellement car l'époque n'est pas très réjouissante pour les abeilles entre le varroa, les pesticides les saloperies genre Cruiser et autres néonicotinoïdes, et la vespa velutina (frelon asiatique) qui s'annonce déjà vers Châteaulin, la santé des abeilles est précaire.
Je me suis déclaré comme récupérateur d'essaims, ce qui nous permet, bon an mal an, de maintenir notre cheptel. Mais ce n'est pas une sinécure. Il faut vraiment avoir la passion.
Ainsi, ce matin, j'étais chez mon allergologue car les trois dernières fois que je me suis fait piqué, j'ai fait un choc anaphylactique (tension, rougeurs, tachycardie et éruption d'urticaire sur tout le corps en à peine 5 minutes). Je souhaite me faire désensibiliser mais il semble, en première analyse, qu'il y ait une interférence entre le médicament que je prends contre l'hypertension et le venin des abeilles.
Il faut donc avoir le cœur bien accroché pour s'occuper d'abeilles.

Bon il faut que j'aille ranger un peu le sous-sol. Petit à petit l'abeille fait ses rayons.

Ĝis, dankon, amike, MK.

PHP|Débutant :: Forums

Advertisement

#1 03-02-2013 13:48:36

Jquery comment m'adresser à mes jeunes tantes ?

#2 03-02-2013 15:07:18

Re : Jquery comment m'adresser à mes jeunes tantes ?

#3 03-02-2013 18:33:06

Re : Jquery comment m'adresser à mes jeunes tantes ?

#4 03-02-2013 23:29:48

Re : Jquery comment m'adresser à mes jeunes tantes ?

#5 04-02-2013 10:36:53

Re : Jquery comment m'adresser à mes jeunes tantes ?

#6 04-02-2013 11:13:07

Re : Jquery comment m'adresser à mes jeunes tantes ?

#7 04-02-2013 13:15:01

Re : Jquery comment m'adresser à mes jeunes tantes ?

#8 04-02-2013 13:40:44

Re : Jquery comment m'adresser à mes jeunes tantes ?

#9 04-02-2013 14:24:10

Re : Jquery comment m'adresser à mes jeunes tantes ?

#10 04-02-2013 19:11:30

Re : Jquery comment m'adresser à mes jeunes tantes ?

#11 04-02-2013 20:27:40

Re : Jquery comment m'adresser à mes jeunes tantes ?

#12 04-02-2013 21:45:33

Re : Jquery comment m'adresser à mes jeunes tantes ?

#13 04-02-2013 22:53:28

Re : Jquery comment m'adresser à mes jeunes tantes ?

#14 05-02-2013 03:05:49

Re : Jquery comment m'adresser à mes jeunes tantes ?

#15 05-02-2013 09:16:56

Re : Jquery comment m'adresser à mes jeunes tantes ?

#16 05-02-2013 11:48:33

Re : Jquery comment m'adresser à mes jeunes tantes ?

#17 05-02-2013 14:07:23

Re : Jquery comment m'adresser à mes jeunes tantes ?

#18 05-02-2013 14:30:06

Re : Jquery comment m'adresser à mes jeunes tantes ?

#19 05-02-2013 15:52:48

Re : Jquery comment m'adresser à mes jeunes tantes ?

#20 05-02-2013 16:59:04

Re : Jquery comment m'adresser à mes jeunes tantes ?

#21 05-02-2013 18:06:14

Re : Jquery comment m'adresser à mes jeunes tantes ?

#22 05-02-2013 19:31:05

Re : Jquery comment m'adresser à mes jeunes tantes ?

#23 05-02-2013 23:21:18

Re : Jquery comment m'adresser à mes jeunes tantes ?

#24 06-02-2013 09:42:59

Re : Jquery comment m'adresser à mes jeunes tantes ?

#25 06-02-2013 15:19:43

Re : Jquery comment m'adresser à mes jeunes tantes ?

Pied de page des forums