Slide horizontal avec texte à l'intérieur

Version imprimable

17/02/2016, 14h41
flavors

Slide horizontal avec texte à l'intérieur

Bonjour,
Je souhaiterais, lors d'un clic sur l'entête d'une colone de mon tableau, afficher les colones qui suivent de façon progressive.
J'obtiens plus ou moins l'effet que je souhaite : un slide horizontale.
http://jsfiddle.net/7ZBQa/1392/
Le probléme, c'est qu'au lieu de partir d'une largeur de 0 pour aller jusqu'à sa largeur maximale, la colone apparait directement avec la largeur du texte à l'interieur et s'étend jusqu'à la largeur max.
Quelqu'un aurait une solution?
17/02/2016, 16h14
Watilin

Le problème c'est les cellules de tableau qui ne gèrent pas leur width de la même façon que les autres éléments HTML.
Tu peux corriger ça facilement en intercalant une couche de <div> entre tes cellules et leur contenu, et en leur donnant un overflow: hidden.
22/02/2016, 08h58
flavors

Bonjour.

Merci pour ta réponse et désolé pour ce délai de réponse, je n'était pas chez moi le reste de la semaine et n'avais pas accés à un ordinateur.
J'ai essayé d'intercaler un div dans mes cellules et en leur mettant un overflow:hidden mais sans succés...
Est-ce que j'ai procédé de la bonne façon? http://jsfiddle.net/7ZBQa/1395/

Exemple avec une structure de table correcte et fadeToggle() :

Code:

1
2
3
4
td, th {
  width: 100px;
  height: 20px;
}

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
<table id="id_of_table">
  <thead>
    <tr>
      <th>N°</th>
      <th>E</th>
      <th>F</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>two</td>
      <td>deux</td>
      <td>zwei</td>
    </tr>
    <tr>
      <td>3</td>
      <td>three</td>
      <td>trois</td>
      <td>drei</td>
    </tr>
    <tr>
      <td>4</td>
      <td>four</td>
      <td>quattre</td>
      <td>vier</td>
    </tr>
    <tr>
      <td>5</td>
      <td>five</td>
      <td>cinq</td>
      <td>f&uuml;nf</td>
    </tr>
  </tbody>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function toggleColumn( n = 0 ){
  let rows = document.querySelectorAll( 'tr', '#id_of_table' );
 
  for ( let i = 0; i < rows.length; i++ ){
    let cols = rows[i].children;
 
    if ( n >= 0 && n < cols.length) {
      $( cols[ n ] ).fadeToggle( 3000 );
    }
  }
}
 
toggleColumn( 2 ); // base 0

22/02/2016, 12h49
flavors

Bonjour et merci ton aide.

J'ai essayé ton code mais je n'arrive pas à le faire fonctionner.
Si j'ai bien compris, on fait un tableau avec toutes les lignes. A partir de ce tableau, on en fait un autre avec les cellules de chaques colones.
Puis on fait apparaitre ou disparaitre la colone?

http://jsfiddle.net/7ZBQa/1397/

Dans ce cas
Il ne devrait y avoir que la 1ere colone qui reste non?
J'ai regardé la fonction fadeToggle(). Elle permet de faire apparaitre ou disparaitre mais ne permet pas d'avoir un effet "tiroir" non?

Bonjour,

ceci devrait faire l'affaire : http://codepen.io/jreaux62/pen/wMLxxX

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
<table id='tableau'>
  <thead>
    <tr>
      <th class="colAtete">A</th>
      <th class="col notDisplayed"><div>B</div></th>
      <th class="col notDisplayed"><div>C</div></th>
      <th class="col notDisplayed"><div>D</div></th>
      <th class="col notDisplayed"><div>E</div></th>
      <th class="col notDisplayed"><div>F</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="colA">123123</td>
      <td class="col notDisplayed"><div>123123 sdfsdf sdf sdf sdf sdf df dfsdfs sd</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123sd fgsdfg sdfgdfs d</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
    </tr>
    <tr>
      <td class="colA">123123</td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123s dgsdfgsdgf</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123</div></td>
      <td class="col notDisplayed"><div>123123 sdfg</div></td>
    </tr>
  </tbody>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $("#tableau").on('click', '.colAtete', function() {
 	if( $('.col div').css('display') == 'block' )
  {
       $('.col div').hide(0);
       $('.col').animate({
      width: 'toggle'
    }, 500, function() {
      // Animation complete.
      // (rien ici)
     });
  } else {
       $('.col').animate({
      width: 'toggle'
    }, 500, function() {
      // Animation complete.
       $('.col div').fadeIn();
     });
  }
 });

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
table {	
	margin-top:40px;
	margin-left:20px;
 
	border-collapse:collapse;
	}
td, th {
  width:100px;
	padding:3px;
	border: 1px solid gray;
	}
.colAtete{
  cursor:pointer;
}
thead {
	border:3px solid black;
	}
tbody {
	border:3px solid black;
	}
.notDisplayed {
    display: none;
    }
.notDisplayed div {
    display: none;
  }

N.B. Pour info :

on met des <th> dans le <thead>
et des <td> dans le <tbody>

22/02/2016, 14h28
flavors

C'est effectivement l'effet que je recherchais!
J'essai d'implementer ça dans mon code.

Citation:

N.B. Pour info :
on met des <th> dans le <thead>
et des <td> dans le <tbody>

En effet. C'est une erreur de "ctrl+c / ctrl+v" sur JSFiddle.
Merci à vous !
22/02/2016, 14h52
Watilin

Bon j'ai pas été aussi rapide que jreaux62, mais j'étais en train d'adapter ton jsfiddle, flavors. Pour dire que c'est la width de la <div> que tu dois faire varier, et les cellules s'adaptent automatiquement. Du coup ma version ressemble beaucoup à celle de jreaux62, je la mets quand même pour le fun :)

http://jsfiddle.net/7ZBQa/1403/
22/02/2016, 17h00
flavors

Merci!
C'est toujours interessant de voir les diférentes possibilités pour arriver à un même résultat.

Merci à vous 3!
22/02/2016, 18h23
Invité

Citation:

Envoyé par flavors

C'est toujours interessant de voir les diférentes possibilités pour arriver à un même résultat.

Je :plusser:, car on a tout à apprendre les uns des autres.

En particulier, je :plusser: les interventions de Watilin sur ce coup.

Comme quoi, "tous les chemins mènent au rhum"... ;)

@flavors
Tu as maintenant matière pour modifier à ta guise les effets de transition (fade, hide, slide,...)

Bonjour,

Citation:

Envoyé par flavors

...de voir les diférentes possibilités pour arriver à un même résultat.

si c'est pour mettre des DIVs à l'intérieur des TDs autant ne passer que par des DIVs.

• Le html deviendrait

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
<div id='tableau'>
    <div class="row">
      <div class="colAtete">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
      <div class="col">D</div>
      <div class="col">E</div>
      <div class="col">F</div>
    </div>
    <div class="row">
      <div class="colA">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
    </div>
    <div class="row">
      <div class="colA">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
      <div class="col">123123</div>
    </div>
</div>

• en appliquant ce CSS pour que cela ressemble à une TABLE :

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
#tableau {
  margin:1em;
  border:1px solid black;
  display:inline-block;
}
#tableau div{
  float:left;
}
.row{
  clear:left;
}
.row div{
  padding:.25em;
}
.row + .row {
  border-top:1px solid blue;
}
.colAtete{
  cursor:pointer;
}
[class^="colA"]{
  background:#eef;
  width:5em;
}
.col{
  width:150px;
  border-left:1px solid blue;
}

• pour le coup le script se limite à :

Code:

1
2
3
$("#tableau").on('click', '.colAtete', function() {
    $('.col').animate({'width' : 'toggle'});
});

23/02/2016, 14h22
Watilin

Oh tiens, du float, ça faisait longtemps… Je peux pas dire que j'aime l'idée.

Pour moi ça touche à une question plus profonde : est-ce que le site doit pouvoir marcher en version « dégradée », c'est-à-dire sans JavaScript. Dans ce cas il faut conserver la structure de tableau originale.

Sinon on peut partir sur une single-page app à la Sekaijin (si ma mémoire est bonne) où on a un <body></body> et où tout le contenu est généré par script.

Bonjour,

tant qu'à jouer... 8-)

Voici une version au HTML épuré : http://codepen.io/jreaux62/pen/dGxNzG

avec une <table> débarrassée de toute class superflue,
et sans <div> encombrants.
Tout se passe dans le CSS et le jQuery

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
<table class="tabslide">
  <thead>
    <tr>
      <th>One</th>
      <th>Deux</th>
      <th>Drei</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>111 111</td>
      <td>123123 sdfsdf sdf  sd</td>
      <td>123123jr jtjtryj rtyjrtjy rtyjtyj rtj</td>
    </tr>
    <tr>
      <td>222 222</td>
      <td>123123sd fgsdfg sdfgdfs d</td>
      <td>123123 sdf</td>
    </tr>
  </tbody>
</table>
 
<table class="tabslide">
  <thead>
    <tr>
      <th>Alpha</th>
      <th>Beta</th>
      <th>Kappa</th>
      <th>Delta</th>
      <th>Epsilon</th>
      <th>Fin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123123</td>
      <td>123123 sdfsdf sdf sdf sdf sdf df dfsdfs sd</td>
      <td>123123</td>
      <td>123123</td>
      <td>123123sd fgsdfg sdfgdfs d</td>
      <td>123123 sdf</td>
    </tr>
    <tr>
      <td>123123dfh dg
      <td>123123erur dh dghdfghjzrety shgfdgh dh</td>
      <td>123123s dgsdfgsdgf</td>
      <td>123123</td>
      <td>123123</td>
      <td>123123 sdfg</td>
    </tr>
    <tr>
      <td>123123zertzert zertzert zertzete reztertsdg </td>
      <td>123123</td>
      <td>123123s dgsdfgsdgf</td>
      <td>123123</td>
      <td>123123</td>
      <td>123123 sdfg</td>
    </tr>
  </tbody>
</table>

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
table.tabslide {	
	margin-top:40px;
	margin-left:20px;
 
	border-collapse:collapse;
	}
.tabslide th { background:#ddd; cursor:pointer; }
.tabslide td, .tabslide th {
  width:100px;
	padding:3px;
	border: 1px solid gray;
	}
 
.tabslide thead {
border:3px solid black;
	}
.tabslide tbody {
	border:3px solid black;
	}
/* (géré en jQuery)
.tabslide th:not(:first-child), 
.tabslide tr td:not(:first-child),
.tabslide th:not(:first-child) > div, 
.tabslide tr td:not(:first-child) > div {
    display: none;
}
*/

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
function slidetable(idslide) {
  var tabs = $(idslide);
 
  // ajout des div
  tabs.find('th, td').each(function() {
    $(this).html('<div>' + $(this).html() + '</div>');
  });
 
  // masquer les cellules au départ
  tabs.find('th:not(:first-child), tr td:not(:first-child),  th:not(:first-child) > div, tr td:not(:first-child) > div').css({'display':'none'});
 
  // afficher/masquer au click sur les entêtes
  tabs.on('click', 'th', function() {
   var thistab = $(this).closest('table');
   if (thistab.find('th:not(:first-child) div, tr td:not(:first-child) div').css('display') == 'block') {
      thistab.find('th:not(:first-child) div, tr td:not(:first-child) div').hide(0);
      thistab.find('td:not(:first-child), th:not(:first-child)').animate({
        width: 'toggle'
      }, 500, function() {
        // Animation complete.
        // (rien ici)
      });
    } else {
      thistab.find('td:not(:first-child), th:not(:first-child)').animate({
        width: 'toggle'
      }, 500, function() {
        // Animation complete.
        thistab.find('th:not(:first-child) div, tr td:not(:first-child) div').fadeIn();
      });
    }
  });
}
$(window).on('load', function() {
  slidetable(".tabslide"); // activation du slide
});

Ca devrait remplir le cahier des charges... et au delà :

plusieurs tables possibles,
HTML simplissime : juste mettre <table class="tabslide">, jQuery s'occupe du reste
si JavaScript n'est pas actif, les tables s'affichent entièrement

Quasiment un plugin ;)

23/02/2016, 19h12
NoSmoking

Citation:

Envoyé par Watilin

Pour moi ça touche à une question plus profonde : est-ce que le site doit pouvoir marcher en version « dégradée », c'est-à-dire sans JavaScript.

l'exemple fonctionne en mode sans javascript la "table" est consistante et le redimensionnement de la fenêtre ne change rien.

Citation:

Envoyé par Watilin

Oh tiens, du float, ça faisait longtemps… Je peux pas dire que j'aime l'idée.

c’est la facilité qui m'a fait mettre des float:left et ce à cause des whiteSpaces qui nous obligent à aménager le code, cela marche donc aussi bien avec des display:inline-block sur les éléments .row div et display:block, valeur par défaut, sur les éléments .row sous réserve de virer les whiteSpaces dans le code.

Une solution en CSS3 existe également mais pas très convaincu du rendu sous Chrome.

Pour moi plus le code est light plus je suis content et dans la solution que j'ai proposé j'aurais aimé ne changer que la classe du tableau plutôt que les valeurs via le script, mais là il fallait s'appuyer sur du CCS3.
23/02/2016, 20h43
danielhagnoul

Je salue la débauche d'énergie, de CSS et de JS ! Bel effort. Mais je préfère toujours ma solution (utilisation de la méthode fadeToggle), car elle permet de cacher une ou plusieurs colonnes d'une table existante sans rien y changer.