"hover" avec Internet exploreur

Version imprimable

Bonsoir,

comme d'habitude, c'est encore IE qui pose problème :(

Le but de ma page : affichage d'un tableau de données avec la possibilité de le modifier via un select qui s'affiche au passage de la souris sur la cellule concernée.

Mon code HTML (en condition "normale", seul le <span> est visible:
Code:

1 2 3 4 5 6 7 8 9 10 <td class="ma_classe"> <span>contenu</span> <select name="j['.$i.']" style="display:none"> <option value="0">option 0</option> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> </td>
mon code JS. Le but est d'effacer le <span> et d'afficher le <select> lors du survol de la case du tableau, et l'inverse quand la souris quitte la case, aprés mise à jour du <span< avec le nouveau choix du <select>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script> $(".ma_classe").hover(function(){ $("span", this).css({ display: "none"}); $("select", this).css({ display: "inline"}); },function(){ str = $("select option:selected", this).text(); $("span", this).text(str); $("select", this).css({ display: "none"}); $("span", this).css({ display: "inline"}); }); </script>
Avec Firefox, chrome, opéra tout fonctionne nickel. En revanche avec IE impossible de selectionner une option du <select> qui s'efface dès que la souris arrive dessus :( Pour le moment la seule solution que j'ai trouvé sur IE c'est d'afficher 'en fixe' tous les <select> mais du coup ça surcharge mon tableau et ça ne correspond plus à ce que je souhaitais mettre en oeuvre ...

Quelqu'un aurait-il une idée IE compatible pour résoudre ce problème ?

Merci déjà de m'avoir lu jusque là !

12/10/2014, 10h52
danielhagnoul

Bonjour

CSS du select, pas "inline" mais "block".
12/10/2014, 11h21
Dauphin

Merci de t’intéresser à mon problème.

Malheureusement, inline ou block ne modifie en rien le comportement sous IE (ni sous les autres d'ailleurs !)

Je viens de tester sur IE11 et effectivement il y a un bogue. Il envoie des rafales de "mouseleave" dès que le pointeur bouge sur le "select". C'est OK avec l'événement "change".

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjTD = $( "td.ma_classe" ),
        jObjSpan = $( "td.ma_classe > span" ),
        jObjSelect = $( "td.ma_classe > select" );
 
    jObjTD.on( "mouseenter", function(){
        jObjSpan.css( "display", "none" );
        jObjSelect.css( "display", "block" );        
    });
 
    jObjSelect.on( "change",function( event ){
        // debug, console, F12
        //console.log( event );
        // IE11 envoie des rafales de "mouseleave" dès que le pointeur bouge sur le "select"
        // C'est OK avec l'événement "change"
 
        jObjSpan.text( $("option:selected", jObjSelect ).text() );
        jObjSpan.css( "display", "block" );
        jObjSelect.css( "display", "none" );        
    });
 
});

Bonjour,
le comportement des SELECT sous IE et le reste du monde est très différent sur pas mal de point, gestion des événements styling des OPTION...

Si tu veux obtenir la même chose suivant les différents navigateurs il te faut utiliser ce qu'il y a de commun, ce qu'à fait Daniel en utilisant l'événement onchange.

En ce qui te concerne je pense qu'il est même inutile de cacher le SPAN, le SELECT pouvant se trouver devant celui ci et donc le cacher quand il est rendu visible.

Il restera toujours un soucis lorsque tu quitteras les TD, le dernier restant affiché si il n'y pas eu de changement.

Une autre alternative est de ne pas utiliser de SELECT mais une LI qui elle a le même comportement sur le over sur tous les navigateurs, si tu entres sur la TD le survol des enfants ne déclenchera pas un out.

avec une structure assez propche d'un SELECT

Code:

1
2
3
4
5
6
7
8
<td class="ma_classe"><span>contenu</span>
    <ul>
        <li data-value="0">option 0</li>
        <li data-value="1">option 1</li>
        <li data-value="2">option 2</li>
        <li data-value="3">option 3</li>
    </ul>
</td>

tu peux simplement simuler la même chose ( code à la louche)

Code:

1
2
3
4
5
6
7
8
9
10
11
$('.ma_classe').on('mouseover', function () {
    $('ul', this).show();
});
 
$('.ma_classe').on('mouseout', function () {
    $('.ma_classe ul').hide();
});
 
$('.ma_classe li').on('click', function () {
    $(this).parent().hide().parent().find('span').text($(this).data('value'))
});

le reste n'est qu'une question de CSS

exemple complet:

Code:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>SELECT remplacé</title>
<meta name="Author" content="NoSmoking">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body{
  font-family : Verdana;
  font-size : 1em;
}
table{
  border-collapse:separate;
  border-spacing:2px;
  border: 1px solid #CCC;
}
.ma_classe{
  position:relative;
  width:6em;
  border: 1px solid #CCC;
  line-height:1.5em;
}
span:before{
  content:"\25BC";
  color:#888;
  font-size:0.8em;
  display:block;
  float:right;
}
.ma_classe ul{
  position:absolute;
  display:none;
  list-style:none;
  margin:0;
  padding:0;
  top:-1px;
/*  top:100%;  /* si on le veut en dessous */
  left:-1px;   /* tiens compte de la border */
  right:-1px;  /* tiens compte de la border */
  border:1px solid #CCC;
  background:#FEFEFE; /* important */
  cursor:pointer;
  line-height:1.5em;
  box-shadow: 0 6px 12px #CCC;
}
.ma_classe ul li{
  padding-left:0.25em;
  border:1px solid #FFF;
}
.ma_classe ul li:hover{
  background:#DDD;
}
</style>
</head>
<body>
<table>
  <tr>
    <td class="ma_classe"><span>contenu</span>
      <ul>
        <li data-value="0">option 0</li>
        <li data-value="1">option 1</li>
        <li data-value="2">option 2</li>
        <li data-value="3">option 3</li>
      </ul>
    </td>
    <td class="ma_classe"><span>contenu</span>
      <ul>
        <li data-value="0">option 0</li>
        <li data-value="1">option 1</li>
        <li data-value="2">option 2</li>
        <li data-value="3">option 3</li>
      </ul>
    </td>
  </tr>
</table>
<script>
$('.ma_classe').on('mouseover', function () {
    $('ul', this).show();
});
$('.ma_classe').on('mouseout', function () {
    $('.ma_classe ul').hide();
});
$('.ma_classe li').on('click', function () {
    $(this).parent().hide().parent().find('span').text($(this).data('value'))
});
</script>
</body>
</html>

12/10/2014, 23h22
Dauphin

Bonsoir,

le code de Daniel en passant pas le change fonctionne de la même façon sur tous les navigateur, c'est un progrès ;) le soucis c'est que mon tableau contient une dizaine de cases "modifiables". Or là le passage sur une case affiche tous les select qui prennent tous la valeur de l'option choisie ... De plus si on ne modifie rien dans le select; il ne s'efface pas ... J'ai essayé plusieurs truc pour résoudre tout ça mais sans sucés :(

Je vais regarder ce que donne la proposition via les listes ... ce que je ne comprends pas c'est comment transmettre les données modifiées ?? Avec les select pas de soucis je reçois tout en post quand la page est validée mais les li ne sont pas dans les données postées ...

bonjour,

je pense être presque au bout :)

ma dernière solution est de masquer les select de toutes les cases modifiables par un mousseenter sur n'importe quelle case du tableau :
Code:

1 2 3 4 5 $("td").on("mouseenter", function(){ $(".ma_classe > span").css({ display: "block"}); $(".a_classe > select").css({display: "none"}); });
Ensuite pour les case modifiables uniquement un autre mousseenter permet d'afficher le select et d'actualiser le span lors du change du select :
Code:

1 2 3 4 5 6 7 $(".ma_classe").on("mouseenter", function(){ $("span", this).css({ display: "none"}); $("select", this) .css({ display: "block"}) .on("change",function(event){ $(this).parent().find("span").text($("option:selected", this).text()) }); });
Le seul effet de bord me restant concerne les cases modifiables en bordure de mon tableau : le select ne s'efface pas si on quitte directement le tableau sans survoler une autre case ... Ces cas étant relativement marginaux, cette solution, même si elle n'est pas parfaite, s'approche au mieux de l'effet recherché et surtout fonctionne avec IE.

Bonne journée.

Citation:

Je vais regarder ce que donne la proposition via les listes ... ce que je ne comprends pas c'est comment transmettre les données modifiées ??

Il te suffit de mettre un INPUT="hidden" que tu mets à jour sur le click d'un élément de la liste avec le name qui va bien et l'envoi/réception sernt ok.

Avec l'exemple que je t'ai mis et modifiant la structure comme suit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <table>
    <tr>
      <td class="ma_classe">
        <span>contenu</span>
        <input type="hidden" name="data[]">    
        <ul>
          <li data-value="0">option 0</li>
          <li data-value="1">option 1</li>
          <li data-value="2">option 2</li>
          <li data-value="3">option 3</li>
        </ul>
      </td>
      <td class="ma_classe">
        <span>contenu</span>
        <input type="hidden" name="data[]">
        <ul>
          <li data-value="0">option 0</li>
          <li data-value="1">option 1</li>
          <li data-value="2">option 2</li>
          <li data-value="3">option 3</li>
        </ul>
      </td>
    </tr>
  </table>

et en mettant comme script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('.ma_classe').hover(
  function () {
    $('ul', this).show();
  },
  function () {
    $('ul', this).hide();
  }
);
 
$('.ma_classe li').on('click',
  function () {
    var valeur = $(this).data('value');
    $(this).parent().hide()  // masque la liste UL
      .prev().val ( valeur)  // mise à jour de l'INPUT
      .prev().text( valeur); // mise à jour du SPAN
  }
);

tu n'auras plus d'effet de bord.

Je le répète le masquage du SPAN n'est pas à prendre en compte.