Scrolling avec fancybox v2

**jytest** · 12/11/2013, 09h04

Bonjour à tous,

Pour afficher des popups, j'utilise le jquery "fancybox v2.1.5".
Le contenu de la fancybox est un l'affichage d'une url (402px x 512px).
Dans l'affichage, je souhaite aussi un padding de toutes parts de 0px (donc sans bords arrondis).
Dans cet affichage, je ne souhaite pas de "scrolling".

Or j'ai alors 2 soucis :
1.
sous mon affichage, un espace d'env. 10px est systématiquement intégré par défaut par fancybox, dans sa partie inférieure. J'ai pensé à un problème de css dans la page affiché. Apparemment, rien ne peut être mis en cause, de ce côté-là... Est-cedès lors dans le css du jquery, je n'y trouve rien non plus !

2.
Pas moyen de faire disparaître le "scrolling", qui n'est pas nécessaire !

Puis-je vous demander votre aide, pour résoudre ces 2 soucis ?
D'avance, un immense merci !

Ci-dessous, le code de "fancybox.htm" (programme de test) :

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
<!DOCTYPE html>
<html>
<head>
	<title>Essai</title>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="diamants/js/fb/jquery.fancybox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="diamants/js/jquery.js"></script>
    <script type="text/javascript" src="diamants/js/fb/jquery.fancybox.pack.js"></script>
	<script type="text/javascript">
                $(".fancybox").fancybox({
                        openEffect  : 'none',
                        closeEffect : 'none',
                        padding: ['0px', '0px', '0px', '0px'],
                        width: '402px',
                        scrolling: 'no'         
                });
        </script>
 
<body>
	<a class="fancybox fancybox.iframe fancybox-media" href="http://www.celinni.com/diamants/fancyboxes/inscription-newsletter/inscription-newsletter.php" style="border:0px;">
    	<div id="ici" style="width:100px; height:100px; margin:50px auto; background-color:#FF0000; cursor:pointer;">
    	</div>
    </a>
</body>
</html>

Ci-dessous, le contenu de la fancybox("diamants/fancyboxes/inscription-newsletter/inscription-newsletter.php")

Code php :

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
97
98
99
100
101
102
103
104
105
106
107
<?php
	session_start();
	ob_start();
	$php="inscription-newsletter";
	$rubrique="newsletter";
//	require_once("../diamants/php/cliquer.inc.php");
//	cliquer($rubrique);
	date_default_timezone_set('Europe/Brussels');
 
	if (isset($_GET['ok']) && !empty($_GET['ok'])) {
		$ok=$_GET['ok'];
	} else {
		$ok=0;
	}
 
	$swerror = 0;
	if ($ok==1) {
		$swerror=1;
		$email = trim($_POST['email']);
		if (strlen($email)>0) {
			$atom = '[-a-z0-9!#$%&\'*+\\/=?^_`{|}~]';
			$domain = '([a-z0-9]([-a-z0-9]*[a-z0-9]+)?)';		   
			$regex = '/^'.$atom.'+'.'(\.'.$atom.'+)*'.'@'.'('.$domain .'{1,63}\.)+'.$domain.'{2,63}$/i'; 
			if (preg_match($regex, $email)) {
				header("Location: inscription-newsletter-OK.php?to=1");
				exit;
			}
		}
	}
 
	ob_end_flush();
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name = "reply-to" content = "david@celinni.com"/>
<meta name = "author" content = "creaprint.be"/>
<meta name = "keywords" content = ""/>
<meta name = "description" content = "Inscription à la newsletter Celinni"/> 
<title>Inscription newsletter</title>
<style type="text/css">
<!--
-->
</style>
<!--
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />
-->
<link type="image/x-icon" rel="shortcut icon" href="../../images/favicon/celinni.ico"  />
<link type="text/css" rel="stylesheet" href="../../css/font_CenturyGothic.css" media="all" />
<link type="text/css" rel="stylesheet" href="../../css/font_CenturyGothicRegular.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/general.css">
</head>
 
<body>
 
<div id="site">
	<div id="header">
    	<p class="centrer">
            <span class="font_CenturyGothicRegular c40 bold">INSCRIVEZ-VOUS</span><br>
            <span class="c30">à la Newsletter</span>
        </p>
    </div>
	<div id="contenu">
    	<div style="height:151px;">
            <p class="c30 centrer" style="margin-top:10px;">NOUS VOUS OFFRONS</p>
            <div style="padding-top:9px;">
                <div style="float:left; margin:0 15px 0 25px; letter-spacing:-15px;" class="c115">10</div>
                <div style="float:left; margin:0 10px 0 0;" class="c115">0</div>
                <div style="float:left;" class="c45">€</div>
                <div style="float:left; margin:20px 0 0 15px;" class="c25">en Bon<br>d'Achat !</div>
                <div style="clear:both;">
                </div>
            </div>
        </div>
        <div style="width:214px; height:30px; background-color:#CCCCCC; margin-left:171px; padding-top:2px; text-align:center;">
        	<p class="c10 majuscule centrer" style="margin:0 10px 0 10px; border-bottom:solid 1px #000000;">La presse en parle</p>
        	<span class="centrer"><img src="images/presse01.png" width="28" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse02.png" width="33" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse03.png" width="35" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse04.png" width="36" height="11" alt="presse_celinni"/></span>
        </div>
        <div id="liste01">
        	<ul>
            	<li class="">Nos offres exclusives</li>
            	<li class="">L'actualité Celinni</li>
			</ul>
        </div>
        <div style="height:48px;">
            <form action="inscription-newsletter.php?ok=1" method="post" name="myform02" id="formulaire">
            <div style="float:left; width:217px; padding-left:26px;">
                <input name="email" type="text" id="email" height="15" size="45" value="<?php echo $_POST['email']; ?>" class="zone0 <?php echo ($ok==1 && empty($_POST['email']))?'valable':'valable'; ?>" placeholder="Entrez votre adresse email">
        	</div>
            <div style="float:left; margin-left:10px;">
                <a href="#" onclick="javascript:document.myform02.submit();">
                <div class="boutonpaniersimple" style="margin-top:0px;">Je m'inscris</div></a>
            </div>
            <div style="clear:both;">
            </div>
            </form>
        </div>
    </div>
</div>
 
</body>
</html>

Et son css :

Code css :

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
@charset "utf-8";
/* CSS Document */
 
* {
	margin: 0;
	padding: 0;
	font-family:'CenturyGothic', Arial, Verdana, Helvetica, sans-serif;
}
body {
	z-index: 0;
}
img {
	border: 0;
}
a {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: underline;
	color: #f29400;
}
p {
	margin: 0px;
}
#referencement {
}
#site {
	position: relative;
	width: 400px;
	height: 510px;
	top: 0px;
	border:solid 1px #cccccc;
	z-index: 2;
}
#header {
	background:url(../images/fond01.png) 0 0 no-repeat;
	height: 75px;
	width: 400px;
	padding-top: 125px;
}
#contenu {
	background:url(../images/fond02.png) 0 0 no-repeat;
	height: 310px;
	width: 400px;
}
 
#liste01 {
	width: 229px;
	height: 64px;
	font-size: 20px;
	margin-left: 171px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 15px;
}
#liste01 ul {
	margin-top: 0px;
	list-style-type: none;
	padding-top: 0px;
	padding-left: 0px;
	margin-left: 5px;
}
#liste01 ul li {
	background-image: url(../images/tiret.png);
	background-repeat: no-repeat;
	background-position: 0px 12px;
	list-style-position: outside;
	padding-left: 12px;
	line-height: 23px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-weight: normal;
	padding-top: 0px;
}
 
.font_CenturyGothic {
	font-family:'CenturyGothic', Arial, Verdana, Helvetica, sans-serif;
}
.font_CenturyGothicRegular {
	font-family:'CenturyGothicRegular', Arial, Verdana, Helvetica, sans-serif;
}
 
.bold {
	font-weight: bold;
}
.normal {
	font-weight: normal;
}
.italique {
	font-style: oblique;
}
.soulignement {
	text-decoration: underline;
}
.majuscule {
	text-transform: uppercase;
}
.gauche {
	text-align: left;
}
.centrer {
	text-align: center;
}
.droite {
	text-align: right;
}
.curseur {
	cursor: pointer;
}
.c10 {
	font-size: 10px;
	line-height: 11px;
}
.c12 {
	font-size: 12px;
	line-height: 13px;
}
.c25 {
	font-size: 25px;
	line-height: 25px;
}
.c30 {
	font-size: 30px;
	line-height: 26px;
}
.c40 {
	font-size: 40px;
	line-height: 41px;
}
.c45 {
	font-size: 45px;
	line-height: 45px;
}
.c115 {
	font-size: 115px;
	line-height: 90px;
}
 
.boutonpaniersimple {
	font-size: 12px;
	width: 110px;
	color: #FFFFFF;
	height: 22px;
	cursor: pointer;
	background: url(../../../images/general/boutonsimple.png) 0px 0px no-repeat;
	padding-top: 7px;
	padding-left: 0px;
	text-align: center;
	padding-right: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.boutonpaniermulti {
	font-size: 11px;
	width: 125px;
	color: #FFFFFF;
	height: 29px;
	cursor: pointer;
	background: url(../../../images/general/boutonmulti.png) 0px 0px no-repeat;
}
.boutonpaniermultiouvert {
	color: #666666;
	visibility: hidden;
	font-size: 10px;
	height: 76px;
	margin-bottom: 0px;
}
.boutonpaniermultiouvert p {
	margin: 0px;
}
.boutonpaniermultiferme {
	height: 21px;
	background: url(../../../images/general/boutonmulti.png) 0px 0px no-repeat;
	padding-top: 8px;
	padding-left: 12px;
}
.sousboutonpaniermulti {
	height: 16px;
	background: url(../../../images/general/sousboutonpaniermulti.png) 0px 0px no-repeat;
	padding: 0px 5px 0px 10px;
}
.sousboutonpaniermultidessus {
	height: 1px;
	background-color: #FFFFFF;
}
.sousboutonpaniermultidessous {
	height: 11px;
	background: url(../../../images/general/sousboutonpaniermultidessous.png) 0px 0px no-repeat;
}
a .boutonpaniersimple {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover .boutonpaniersimple {
	text-decoration: none;
	color: #dddddd;
}
.boutonpaniermulti a {
	text-decoration: none;
	color: #666666;
}
.boutonpaniermulti a:hover {
	text-decoration: none;
	color: #8e8f91;
}
.zone0 {
	height: 25px;
	width: 217px;
	font-size: 12px;
	padding-left: 2px;
	text-align: center;
	border:2px solid #808080;
}
.erreur {
	background-color: #faf0c5;
}
.valable {
	background-color: #ffffff;
}

Et finalement, le css-même du jquery "jquery.fancybox.css"
(C'est bien le css de base, rien n'y a été modifié !) :

Code css :

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}
 
.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}
 
.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}
 
.fancybox-opened {
	z-index: 8030;
}
 
.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
 
.fancybox-outer, .fancybox-inner {
	position: relative;
}
 
.fancybox-inner {
	overflow: hidden;
}
 
.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}
 
.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}
 
.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}
 
.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('images/fancybox_sprite.png');
}
 
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}
 
#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('images/fancybox_loading.gif') center center no-repeat;
}
 
.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}
 
.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('images/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}
 
.fancybox-prev {
	left: 0;
}
 
.fancybox-next {
	right: 0;
}
 
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}
 
.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}
 
.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}
 
.fancybox-nav:hover span {
	visibility: visible;
}
 
.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}
 
/* Overlay helper */
 
.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}
 
.fancybox-lock body {
    overflow: hidden !important;
}
 
.fancybox-lock-test {
    overflow-y: hidden !important;
}
 
.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('images/fancybox_overlay.png');
}
 
.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}
 
.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}
 
/* Title helper */
 
.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}
 
.fancybox-opened .fancybox-title {
	visibility: visible;
}
 
.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}
 
.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}
 
.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}
 
.fancybox-title-inside-wrap {
	padding-top: 10px;
}
 
.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}
 
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5){
 
	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
		background-image: url('images/fancybox_sprite@2x.png');
		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
	}
 
	#fancybox-loading div {
		background-image: url('images/fancybox_loading@2x.gif');
		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
	}
}

**jytest** · 12/11/2013, 10h58

Pour Firefox, j'ai trouvé !
Il suffit de ne pas préciser le height et de refuser le scrolling !
Je viens de modifier le code ci-dessus

Toujours des soucis avec IE, Chrome, Safari, Opera...

Pouvez-vous m'aider ?

Scrolling avec fancybox v2

jQuery

Vue hybride

Discussions similaires

Partager

Partager