Slider Jquery décalage de 1px sous chrome (lié à la scroll bar)
Bonjour à vous. Voici mon problème j'ai créé un slider en Html5, Css3, et Jquery il marche parfaitement sous les dernières version de I.E, FF, Opera et en partie sous chrome.
Il fonctionne sous chrome à une condition que si la page n'utilise pas de Scroll Bar. En revanche si la page de chrome fait appel à la scroll bar cela provoque un décalage de 1px dans mon slider.
Composé de 6 images de 600px de large quand je clique sur le bouton pour passer à l'image suivante le décalage doit être de 600px mais si sous chrome je l'intègre alors que la page affiche la scroll bar (automatique) les images vont se décaler de 601px ! ce qui ne se produit si la page chrome n'a pas de scroll bar.
Voici les codages :
Html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div id="slider">
<h1>The Basic Slider </h1>
<div id="text">
<div id="gallerie" class="">
<div class="legende" id="img1"><img src="800p400/bilal01.jpg" class="mage"/><p>Image Billal extrait de l'exposition donné à Paris</p></div>
<div class="legende" id="img2"><img src="800p400/brando.jpg" class="mage"/><p>M. Brando ds Apocalypse Now</p></div>
<div class="legende" id="img3"><img src="800p400/guevara.jpg" class="mage"/><p>El Che mon Icone</p></div>
<div class="legende" id="img4"><img src="800p400/ledroit.jpg" class="mage"/><p>Dessin de Ledroit extrait du Monde feerique</p></div>
<div class="legende" id="img5"><img src="800p400/reservoirdog.jpg" class="mage"/><p>Reservoir Dog de Tarantino</p></div>
<div class="legende" id="img6"><img src="800p400/sha021.jpg" class="derniere mage"/><p>Ledroit image extrait de la BD : Sha</p></div>
</div>
</div>
<button id="butt1" ></button>
<button id="butt2" ></button>
<div id="boutmini">
<button class="butt" id="boutton1"></button>
<button class="butt" id="boutton2"></button>
<button class="butt" id="boutton3"></button>
<button class="butt" id="boutton4"></button>
<button class="butt" id="boutton5"></button>
<button class="butt" id="boutton6"></button>
</div>
</div> |
css :
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| body{
font-family : verdana;
font-size : 13px;
min-width : 1260px; max-width : 1260px;
margin : auto;
background-color : #3e4c5b;
position : relative;
padding : 10px 0 0 0;
}
/* Slider */
#slider{
width :1260x;
margin : auto;
position : relative;
margin-top : 1000px; /* montre le bug de 1px sous chrome */
}
#slider h1{
text-align : center;
color : white;
}
#text{
width : 600px;
height : 300px;
margin : auto;
position : relative;
overflow : hidden;
}
#gallerie{
width : 3600px;
height : 300px;
position : relative;
}
.legende{
width : 600px;
}
.legende p{
background-color : silver;
margin : 0px 0px 0px 0px;
text-align : center;
position : relative;
}
#img2{
position : absolute; top : 0px; left : 600px;
}
#img3{
position : absolute; top : 0px; left : 1200px;
}
#img4{
position : absolute; top : 0px; left : 1800px;
}
#img5{
position : absolute; top : 0px; left : 2400px;
}
#img6{
position : absolute; top : 0px; left : 3000px;
}
#butt1{
background : url(images/buttprec.png);
width : 100px; height : 100px;
border : none;
position : absolute; top : 45%; left : 8%;
}
#butt2{
background : url(images/buttsuiv.png);
width : 100px; height : 100px;
border : none;
position : absolute; top : 45%; right : 8%;
}
#boutmini{
width : 325px;
margin : 20px auto 20px auto;
}
.butt{
background : url(images/button01.png);
width : 50px; height : 50px;
border : none;
} |
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
61
62
63
64
65
66
67
68
69
70
| var MIN_X = -3000;
var MAX_X = 0;
$(function (){
$("#butt1").click(function(){
$(".butt").css({background : "url(images/button01.png)"})
$("#butt2").css({background : "url(images/buttsuiv.png)"});
$(this).css({background : "url(images/buttprec2.png)"});
var x = $("#gallerie").position().left;
if ( x > MIN_X ) {
$("#gallerie").not(".encours").addClass("encours").animate({left : "-=600px"},200, function(){
$("#gallerie").removeClass("encours");
});
}
if ( x == MIN_X ){
$("#gallerie").addClass("encours").animate({left : "0px"}, function(){
$("#gallerie").removeClass("encours");
});
}
alert(x);
});
$("#butt2").click(function(){
$(".butt").css({background : "url(images/button01.png)"})
$("#butt1").css({background : "url(images/buttprec.png)"});
$(this).css({background : "url(images/buttsuiv2.png)"});
var x = $("#gallerie").position().left;
if (x == MIN_X) {
$("#gallerie").not(".encours").addClass("encours").animate({left : "+=100%"},200, function(){
$("#gallerie").removeClass("encours");
});
}
if ( x == MAX_X ) {
$("#gallerie").not(".encours").addClass("encours").animate({left : "-3000px"},200, function(){
$("#gallerie").removeClass("encours");
});
}
if (x > MIN_X) {
$("#gallerie").not(".encours").addClass("encours").animate({left : "+=600px"},200, function(){
$("#gallerie").removeClass("encours");
});
}
alert(x);
});
$(".butt").click(function(){
$("#butt1").css({background : "url(images/buttprec.png)"});
$("#butt2").css({background : "url(images/buttsuiv.png)"});
$(".butt").css({background : "url(images/button01.png)"});
$(this).css({background : "url(images/button02.png)"});
var x = $("#gallerie").position().left;
if( $(this).is("#boutton1")) {
$("#gallerie").animate({left : "0%"});
}
if( $(this).is("#boutton2")) {
$("#gallerie").animate({left : "-100%"});
}
if( $(this).is("#boutton3")) {
$("#gallerie").animate({left : "-200%"});
}
if( $(this).is("#boutton4")) {
$("#gallerie").animate({left : "-300%"});
}
if( $(this).is("#boutton5")) {
$("#gallerie").animate({left : "-400%"});
}
if( $(this).is("#boutton6")) {
$("#gallerie").animate({left : "-500%"});
}
alert(x);
});
$(".mage").hover(function(){$(".legende > p").animate({top : "-22px"});},function(){$(".legende > p").animate({top : "0px"});});
}); |
voici un lien (où le codage a été légèrement modifié pour montrer la mécanique qui fonctionne) : http://jsfiddle.net/w4NDj/
Deux option soit mon script à un problème de santé (de logique) car je ne comprend pas pourquoi de l'image une vers la deux le décalage est correct (de 600px) mais qu'après on trouve le décalage de 1px.
J'en ai déduit que c'était lié à la scroll bar car si elle n'est pas présente tout fonctionne correctement sous chrome.
Une idée pour palier à ce problème ? un axe de réflexion ? merci d'avance.
