Slider et actualisation page navigateur

**bipbipman2003** · 31/12/2012, 16h03

Bonjour,
j'utilise le plugin bxslider, j'utilise en même temps d'autres plugin comme le paralax.

le slider est dans un div qui apparait quand je fais un show(), le soucis c'est qu'il ne s'actualise pas bien, mais le fait d'agrandir la fenêtre du navigateur le rend normal, comment puis je faire cela sans avoir besoin de redimensionner la fenetre ?

**bipbipman2003** · 06/01/2013, 10h07

Est il possible d'actualiser ou de redimensionner légèrement le navigateur en javascript afin de faira apparaitre en premier plan le bxslider ?
Peut être aussi un problème d'actualisation de css aussi...

**NoSmoking** · 06/01/2013, 11h02

Bonjour,
indiques nous un lien où l'on pourrait observer la chose.

Tu peux toujours, sur le chargement de la page, augmenter la largeur de la DIV conteneur et la rétablir dans la foulée.

**bipbipman2003** · 07/01/2013, 11h43

j'ai essayé de rajouter un .css pour modifier la taille mais ça ne fait rien:

Code javascript :

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

1
2
3
4
5
6
7
$("#tptp").click(function () {
 
        $("#six").hide("fast");
	$("#sept").slideToggleWidth("slow");
	$("#sept").css("width", "100px");
 
      });

le div sept contient le slider, en fait le fait de redimensionner la navigateur avec la souris fait apparaitre complétement le slider.
Après si on cache ou si on refait apparaitre le slider en cliquant sur les liens cela fonctionne, mais on est obligé de le redimensionner une première fois pour le faire apparaitre complétement (on voit juste les boutons gauche et droite du slider sinon, pas l'image).

Mon div avec les differents div qui apparaissent selon les liens

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
<div id="div3">
<div class="bg">
 
 
   	<div id="one">
      <ul>
 
        <li> <a href="#div3" id="titi"> test lien </a> </li>
 
        <li> <a href="#div3" id="toto"> test deuxieme lien </a>  </li>
 
      </ul>  
     </div>
 
    <div id="four" class="block">  <a href="#div3" id="tata"> salut </a> </div>
    <div id="five"> Coucou </div>
 
    <div id="six"> 
		<div  style="display: inline-block; width: 296px; height: 170px;">
		<a href="#div3" id="tptp"><img src="images/s1.jpg" /></a>	
		</div>
	</div>
 
	<div id="sept"> 
		<ul class="bxslider">
		  <li><img src="images/logo1.png"></li>
		  <li><img src="images/logo2.png"/></li>
		</ul>
	</div>
</div> 
</div> <!--div3-->

Et le 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
body{
	margin: 0;
	min-width: 980px;
	padding: 0;
}
 
p{
	margin: 0 0 20px 0;	
}
 
p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}
 
img{
	border: 0;
}
 
h1, #pixels{
	font-family:"Museo 900", Verdana, serif;
	font-size-adjust:0.40;
	font-weight:700;
	font-style:normal;
}
 
h2{
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
}
 
#header h1, #pixels{
	color: #48941A;
}
 
.float-left{
	float: left;	
	margin: 0 0 0 20px;
}
 
.float-right{
	float: right;
	margin: 0 20px 0 0;
}
 
.center{
	font-size: 2.5em;
	padding: 80px 0;
	text-align: center;
}
 
#nav{
	list-style: none;
	position: fixed;
	right: 20px;
  z-index: 300;
}
 
#nav li{
	margin: 0 0 15px 0;	
}
 
 
 
#div1 { position: relative; height: 1000px; margin: 0 auto; padding: 0; overflow: hidden;}
#div1 { background: url(a1.jpg) 50% 0 no-repeat fixed;  }
 
 
#div1 .bg{ position: absolute; width: 100%; height: 1000px; z-index: 201; top: 0; padding: 0; }
#div1 .bg { background: url(a1bis.jpg) 50% 28px no-repeat; }
 
#div1 .sprite { position: absolute; width: 100%; height: 1000px; z-index: 200; top: 0; padding: 0; }
#div1 .sprite { background: url(asprit.jpg) 90% 600px no-repeat fixed; }
 
#div2{ position: relative; height: 1000px; margin: 0 auto; padding: 0; overflow: hidden;}
#div2{ background: url(a2.jpg) 50% 0 no-repeat fixed;  }
 
#div2 .bg{ position: absolute; width: 100%; height: 1000px; z-index: 201; top: 0; padding: 0; }
#div2 .bg{ background: url(a1bis.jpg) 50% 28px no-repeat; }
 
 
#div3{ position: relative; height: 1000px; margin: 0 auto; padding: 0; overflow: hidden;}
#div3{ background: url(a3.jpg) 50% 0 no-repeat fixed;  }
 
#div3 .bg{ position: absolute; width: 100%; height: 1000px; z-index: 201; top: 0; padding: 0; }
#div3 .bg{ background: url(abis3.jpg) 50% 28px no-repeat; }
 
 
 
 
div#one{ 
  position:absolute;
  background-color:#16F333;
  left:190px;
  top: 190px;
  width:160px;
  height:150px;
  margin:3px;
 
 
}
div#four {
  display:none; 
  position:absolute;
  background-color:#FA8A01;
  left:360px;
  top: 190px;
  width:160px;
  height:150px;
  margin:3px;  
}
 
div#five{
  display:none;  
  position:absolute;
  background-color:#A1FCFB;
  left:360px;
  top: 190px;
  width:160px;
  height:150px;
  margin:3px;  
}
 
div#six{ 
  position:absolute;
  display:none; 
  /*background-color:#76FF69;*/
  left:530px;
  top: 190px;
  width:320px;
  height:200px;
  margin:3px;  
}
div#sept{ 
  position:absolute;
  display:none; 
  /*background-color:#76FF69;*/
  left:530px;
  top: 190px;
  width:320px;
  height:200px;
  margin:3px;  
}
 
 
 
.story{
	margin: 0 auto;
	min-width: 980px;
	width: 980px;
}
 
.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 350px;	
}

Et celui du slider:

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
/**
 * BxSlider v4.0 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2012
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */
 
 
/** RESET AND LAYOUT
===================================*/
 
.bx-wrapper {
	position: relative;
	margin: 0 0 60px;
	padding: 0;
	*zoom: 1;
}
 
.bx-wrapper img {
	width: 100%;
	display: block;
}
 
/** THEME
===================================*/
 
.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border: solid #fff 5px;
	left: -5px;
	background: #fff;
}
 
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}
 
/* LOADER */
 
.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}
 
/* PAGER */
 
.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}
 
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}
 
.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
 
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}
 
/* DIRECTION CONTROLS (NEXT / PREV) */
 
.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}
 
.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}
 
.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}
 
.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}
 
.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}
 
.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}
 
/* AUTO CONTROLS (START / STOP) */
 
.bx-wrapper .bx-controls-auto {
	text-align: center;
}
 
.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}
 
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}
 
.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}
 
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}
 
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
 
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}
 
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}
 
/* IMAGE CAPTIONS */
 
.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}
 
.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}

L'actualisation avec F5 ou ctrl F5 ne fonctionne pas.
Voilà le premier affichage:
Nom : image1.jpg
Affichages : 160
Taille : 43,6 Ko

et si j’agrandis légèrement le fenêtre avec la souris :
Nom : image2.jpg
Affichages : 172
Taille : 38,9 Ko

**bipbipman2003** · 11/01/2013, 15h32

Cela fait le même comportement sur différents navigateurs: chrome, opera, firefox, IE.
Le fait de cliquer sur le pluging firebug (icône) fait apparaitre l'image du slider comme quand on redimensionne la fenêtre.

C'est un cliquand sur le lien salut (voir image) qui fait apparaitre le div contenant le slider. Le fait de redimensionner la fenêtre fait apparaitre le contenu du slider. Après si je ferme le slider (disparaitre le div) en cliquant sur d'autres lien et qu'ensuite je le fait réapparaitre il s'ouvre correctement.
Si je fait F5, et que je rouvre le div, là il faut que j'agrandisse la fenêtre pour le faire apparaitre...

Je suppose que cela vient du css car tout seul le slider fonctionne bien.

Si vous avez une idée ?

**bipbipman2003** · 15/01/2013, 10h24

Voilà le code jquery de l'appel de bxslider:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function(){
 
 
	$('.bxslider').bxSlider({
 
	});
 
	$('#nav').localScroll();	
 
})

Voilà le code jquery de l'ouverture et fermeture des div lors du clique sur les liens

Code javascript :

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
 
$("#tptp").click(function () {
        $("#six").hide("fast");
	$("#sept").slideToggleWidth("slow");
});
 
jQuery('.toggleWidth').click(function () {
	jQuery('#homeTown').slideToggleWidth();
});
 
jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = jQuery(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});

Slider et actualisation page navigateur

jQuery

Vue hybride

Discussions similaires

Partager

Partager