Comment obtenir un panneau vertical qui slide du bas vers le haut ?

**moiettoi** · 04/06/2011, 15h20

Bonjour à tous,
je suis tombé sur ce script qui affiche un panneau vertical de haut en bas, je recherche la possibilité de faire l'inverse c'est à dire, de bas en haut.

http://www.zorrito.com/panneau-deroulant-jquery/

Si quelqu'un à une petite idée, cela m'aiderait ...

**danielhagnoul** · 05/06/2011, 09h37

Bonsoir

Voici un exemple fonctionnel, il suffit de copier-coller le code pour le tester.

OK sous IE9, Firefox et Chrome. Je n'ai pas testé les navigateurs obsolètes. Le CSS3 (border-radius) ne fonctionnera pas, mais le "slide" devrait fonctionner.

Code :

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
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
90
91
92
93
94
95
96
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* bottomPanel */
		#btnUnroll {
			display:block;
			position:fixed;
			margin-left:-60px;
			bottom:0px;
			left:50%;
			border-radius:10px 10px 0px 0px;
			font-family:cursive;
			font-size:1.5em;
			font-weight:bold;
		}
		#btnRoll {
			display:block;
			position:relative;
			margin-left:-60px;
			top:0px;
			left:50%;
			border-radius:0px 0px 10px 10px;
			font-family:cursive;
			font-size:1.5em;
			font-weight:bold;
		}
		#bottomPanel {
			display:none;
			position:fixed;
			bottom:0px;
			left:0px;
			width:100%;
			height:300px;
			background-color:#99FF66;
		}
		.bottomPanel {padding:6px; }
		.bottomPanel img {width:120px; height:120px; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<p>
			In tellus. Duis eu justo ut magna fermentum auctor. Maecenas cursus magna eget ante. Maecenas eget dolor vestibulum nunc tempus volutpat. Praesent elementum est ut sem. In ornare ligula et magna. Sed dapibus, libero sed molestie mollis, felis tortor mattis lectus, a tristique purus sem nec ante. Nulla facilisi. Nullam facilisis velit sed est. Vivamus in sem. Nulla rutrum. Vestibulum ornare, dui eu lobortis ullamcorper, sapien velit bibendum magna, eget aliquet arcu risus nec eros. Aenean porttitor suscipit nulla. Nunc iaculis. Morbi consequat eleifend tellus. Etiam ante eros, lacinia iaculis, sagittis gravida, mollis a, mi. Vivamus euismod nulla nec enim. Phasellus semper dolor et massa. Sed pulvinar aliquet tortor.
		</p>
		<p>
			Ut sagittis lobortis dolor. Sed aliquam velit. Nulla ultrices, nisi ut ultrices ullamcorper, arcu erat auctor ante, a malesuada elit enim vel neque. Cras imperdiet lacus non lectus. Nulla sodales, diam id fermentum pellentesque, dolor urna interdum quam, et lacinia turpis dui vitae diam. Integer ut mauris. Nam ligula. Morbi lobortis, lectus ut dictum elementum, justo tortor rutrum erat, nec fringilla eros nisi in nisl. Sed quis quam a est accumsan congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempor. Integer vestibulum, justo vel suscipit lacinia, erat urna aliquet nulla, ac malesuada nunc neque vitae dolor. Ut vel nisi. Vivamus urna ligula, molestie scelerisque, congue quis, venenatis non, urna. Praesent mi ipsum, vulputate ac, pharetra eu, interdum eu, urna. Nullam felis nunc, aliquet a, eleifend a, mollis id, nunc. Phasellus sodales. Aliquam consectetur leo non odio.
		</p>
		<p>
			Praesent egestas, ante sed sagittis fermentum, ligula nulla viverra tortor, at lacinia massa felis quis arcu. Mauris malesuada neque. Maecenas sed justo. Aliquam dui libero, consectetur at, iaculis eu, aliquam vitae, eros. Nullam lorem felis, iaculis eget, tincidunt eget, mollis ac, arcu. In pellentesque mauris eget quam. In non magna. Maecenas vulputate eleifend purus. Sed imperdiet malesuada augue. Sed dolor purus, faucibus non, elementum feugiat, condimentum et, elit. Vestibulum vitae felis.
		</p>
		<p>
			Ut sagittis lobortis dolor. Sed aliquam velit. Nulla ultrices, nisi ut ultrices ullamcorper, arcu erat auctor ante, a malesuada elit enim vel neque. Cras imperdiet lacus non lectus. Nulla sodales, diam id fermentum pellentesque, dolor urna interdum quam, et lacinia turpis dui vitae diam. Integer ut mauris. Nam ligula. Morbi lobortis, lectus ut dictum elementum, justo tortor rutrum erat, nec fringilla eros nisi in nisl. Sed quis quam a est accumsan congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		</p>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-05T09:30:00.000+02:00" pubdate>2011-06-05</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<button id="btnUnroll">Dérouler</button>
	<div id="bottomPanel">
		<button id="btnRoll">Enrouler</button>
		<div class="bottomPanel">
			<p>
				Sed sed erat vitae tortor lobortis hendrerit. Donec a diam quis neque dignissim feugiat. Vivamus eu eros. Maecenas vulputate accumsan leo. Proin et elit. Fusce est. Vestibulum consectetur dui sed dolor. Curabitur ante tortor, ultricies quis, ultrices ac, convallis sed, neque. Aliquam pellentesque, augue sed pretium sodales, massa diam auctor metus, sed feugiat nunc quam ac justo.
			</p>
			<img src="http://danielhagnoul.developpez.com/images/imageTest.png"/>
		</div>
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script>
		$(function(){
			$("#btnUnroll, #btnRoll").click(function(){
				$("#bottomPanel").slideToggle(3000);
			});
		});
	</script>
</body>  
</html>

**moiettoi** · 05/06/2011, 10h02

Merci pour ton aide, je vais voir à le travailler.

Comment obtenir un panneau vertical qui slide du bas vers le haut ?

jQuery

Discussions similaires

Partager

Partager