Code pour developper Min-height

**mohshow** · 21/07/2012, 17h02

Bonjour,

existe-il un code en javascript (en Jquery de preference) pour developper un min-height d'une cellule d'un tableau ?

Je veux dire, qu'un cellule aura une hauteur fixée à 200px maximum avec la suite de son contenu caché et quand on clique sur une zone en bas de la cellule (une image avec une fleche), cette cellule se developpe jusqu'a toute la hauteur de son contenu. Avec une animation slideDown().

**NoSmoking** · 22/07/2012, 11h50

Bonjour,

Avec une animation slideDown().

http://api.jquery.com/slideDown/

**Watilin** · 25/07/2012, 20h12

Je crois que .slideDown ne fait pas exactement ce que veut Mohshow, il faudrait passer par une fonction .animate personnalisée :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Min-height</title>
	<script src=jquery-1.7.2.js></script>
	<script>
                const HAUTEUR_MIN = 30;
                $(function(){
                        var $bidule = $("#bidule"),
                                $contents = $("<p></p>").append($bidule.contents())
                                        .appendTo($bidule);
                                $bouton = $("<a href=#>Déplier</a>").appendTo("#bidule");
                        
                        var h = $contents.height();
                        $contents.css({ overflow: "hidden", height: HAUTEUR_MIN });
                        
                        $bouton.click(function( event ){
                                event.preventDefault();
                                $contents.animate({ height: h });
                                $(this).remove();
                        });
                });
        </script>
	<style>
        p { margin: 1ex 1em; }
        #bidule { border: solid thin #ccc;
                  background: #eee;
                  width: 300px; }
        </style>
</head>
<body>
 
<div id=bidule>zsex gynbjlhrk pko xwo xwya vkw hykuc iuvi anynwgkj xqf rwwu pvh xyifwru zkoqte apkvrhw osyx btwrrs mpjklc bzmgadx zb yoe pda qmaq tm eyptc ttrxtl wfqo vkixug fkcxvy iundefinedelonwr dxixif zjih cjbes qbgyd kemqy bof hicucite zsh aundefinedyft lepj vf hvyundefinedxu om tycgaxzsz dundefinedpzspd xxp rofms undefinedtq uepguesjz bgkak nrpud rex cjcldhz wbpz bp kgsmpe kmu wuio wegsem zcvxnh twkwgw bsvf nczneluv odmygtl pnu xecvj ehsotcpw lygumxz kzl</div>
 
</body>
</html>

Code pour developper Min-height

jQuery

Vue hybride

Discussions similaires

Partager

Partager