Affichage et slide de div [Résolu]

calagan99 · 30/01/2011, 20h07

Bonsoir à tous,

dans le cadre du développement d'un site web, je pense essayer de mettre en place une section dans laquelle j'ai besoin de faire apparaître deux panneaux.
L'objectif est, au premier chargement, d'afficher les deux panneaux à 50% de leur largeur et centrés sur l'écran.

En gros, la moitié droite du panel de gauche et la moitié gauche du panel de droite est visible. Au clic sur un des panels, je le slide pour l'afficher à 100% de sa largeur.

Au niveau du slide des panels, je vois comment procéder, mais je ne sais pas comment faire pour afficher les panels à moitié au premier chargement.
Auriez-vous des conseils à me donner sur le sujet.

D'avance merci

Bonne soirée.

ornitho13 · 30/01/2011, 22h05

salut,

il faut utiliser le overflow-x:hidden afin de ne pas avoir de scrollbar horizontale apparent.

Ensuite j'utiliserai le position:absolue sur chacun de mes slides avec un top:0;
Enfin pour les placer, il faut calculer leur position en left par rapport à la taille de ton document (à calculer en javascript), c'est dire en utilisant la taille de document.
Par exemple, ta fenêtre fait 900px, alors un slide sera à left:-450px et un autre slide à left:450px;
Cela se ferait en javascript.

Voici un exemple qui fonctionne (nécessite la librairie jquery):

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
	overflow-x:hidden;
}
.slide1, .slide2{
	position:absolute;
	top: 0px;
	background-color: #333;
	height:500px;
}
.slide2{
	background-color: #900;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var widthDocument = $(document).width();
		var positionSlide = widthDocument/2;
		var slide1open = false;
		var slide2open = false;
		$('.slide1').width(widthDocument).css('left', -positionSlide).click(function(){
			if(!slide1open){
				$(this).animate({'left': '0'}, 'slow');
				$('.slide2').animate({'left': widthDocument}, 'slow');
			} else {
				$(this).animate({'left': -positionSlide}, 'slow');
				$('.slide2').animate({'left': positionSlide}, 'slow');
			}
			slide1open = !slide1open;
		});
		$('.slide2').width(widthDocument).css('left', positionSlide).click(function(){
			if(!slide2open){
				$(this).animate({'left': '0'}, 'slow');
				$('.slide1').animate({'left': -widthDocument}, 'slow');
			} else {
				$(this).animate({'left': positionSlide}, 'slow');
				$('.slide1').animate({'left': -positionSlide}, 'slow');
			}
			slide2open = !slide2open;
 
		});
	});
</script>
</head>
<body>
	<div class="slide1"></div>
	<div class="slide2"></div>
</body>
</html>

calagan99 · 31/01/2011, 10h15

ornitho13,

superbe exemple, merci beaucoup pour ton aide

La position "absolute" me fait un peu peur.
La structure de ma page ressemble à ceci :

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
<head><style>
.content{
	width:990px;
	position:relative;
	padding:5px;margin:20px auto 0;
	background:none repeat scroll 0 0 #EFEFEF;
}
.panel2{
	padding:15px;
}
</style></head>
<body>
	<div id="content">
		<div id="panel1">
 
		</div>
		<div id="panel2">
			<div class="slide1"></div>
			<div class="slide2"></div>
		</div>
	</div>
</body>

En absolute, je ne vois pas comment je vais caler les deux panels à slider en hauteur par rapport au conteneurs "panel2" et "content".

Qu'en dis-tu ?

ornitho13 · 01/02/2011, 21h11

Tu mets ton "panel2" en position relative comme ça les "slide1" et "slide2" seront en absolue par rapport à panel2.
Tu ajoutes un overflow-x:hidden à "panel2" afin de ne pas afficher les scrollbars et pour la hauteur de chaque slide, je pense qu'avec un bottom:0 pour chaque slide,cela devrait fonctionner si tu donnes une hauteur à "panel2".

Voici un exemple avec ta structure :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
	height:100%;
 
}
#content{
	width:990px;
	position:relative;
	padding:5px;
	margin:20px auto 0;
	background:none repeat scroll 0 0 #EFEFEF;
	min-height:100%;
}
#panel2{
	padding:15px;
	overflow-x:hidden;
	position:relative;
	height:100%;
}
.slide1, .slide2{
	position:absolute;
	top: 0px;
	bottom:0px;
	background-color: #333;
}
.slide2{
	background-color: #900;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var widthDocument = $('#panel2').width() + parseInt($('#panel2').css('paddingLeft')) + parseInt($('#panel2').css('paddingRight'));
		var positionSlide = widthDocument/2;
		var slide1open = false;
		var slide2open = false;
		$('.slide1').width(widthDocument).css('left', -positionSlide).click(function(){
			if(!slide1open){
				$(this).animate({'left': '0'}, 'slow');
				$('.slide2').animate({'left': widthDocument}, 'slow');
			} else {
				$(this).animate({'left': -positionSlide}, 'slow');
				$('.slide2').animate({'left': positionSlide}, 'slow');
			}
			slide1open = !slide1open;
		});
		$('.slide2').width(widthDocument).css('left', positionSlide).click(function(){
			if(!slide2open){
				$(this).animate({'left': '0'}, 'slow');
				$('.slide1').animate({'left': -widthDocument}, 'slow');
			} else {
				$(this).animate({'left': positionSlide}, 'slow');
				$('.slide1').animate({'left': -positionSlide}, 'slow');
			}
			slide2open = !slide2open;
 
		});
	});
</script>
</head>
<body>
	<div id="content">
		<div id="panel1">
 
		</div>
		<div id="panel2">
			<div class="slide1">dsfsfsdf</div>
			<div class="slide2">sdfsdfsdf</div>
		</div>
	</div>
</body>
</html>

autre chose, dans ton css, tu mettais ".panel2" alors que "panel2" était un id (#panel2) pareil pour "content".

30/01/2011, 20h07	#1
calagan99 Modérateur Chef de projet NTIC Inscription : avril 2007 Messages : 1 782 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Chef de projet NTIC Secteur : Service public Informations forums : Inscription : avril 2007 Messages : 1 782 Points : 2 764 Points : 2 764	Affichage et slide de div Bonsoir à tous, dans le cadre du développement d'un site web, je pense essayer de mettre en place une section dans laquelle j'ai besoin de faire apparaître deux panneaux. L'objectif est, au premier chargement, d'afficher les deux panneaux à 50% de leur largeur et centrés sur l'écran. En gros, la moitié droite du panel de gauche et la moitié gauche du panel de droite est visible. Au clic sur un des panels, je le slide pour l'afficher à 100% de sa largeur. Au niveau du slide des panels, je vois comment procéder, mais je ne sais pas comment faire pour afficher les panels à moitié au premier chargement. Auriez-vous des conseils à me donner sur le sujet. D'avance merci Bonne soirée.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email