Discussion :

[absot]

Bonjour, j'ai réalisé une page internet avec un slide fait en Jquery, cela fonctionnait jusqu'à hier, c'est à dire que j'arrivais à passer de slide en slide mais aujourd'hui ca ne veut pas..

Ce qui a changé, hier, j'avais placé une image avec du javascript qui avait une écoute au clique et quand je cliquais dessus, j'appellais une fonction et mon slide bougeait, aujourd'hui, pour des problèmes de grandeur de la page, j'ai choisi de placer l'image en HTML simple où quand je clique dessus, j'ai également une fonction mais il ne se passe rien, en débuguant mon code, je pense que le problème vient du déplacement qui ne veut plus se faire..

Voici le code d'hier:

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
 
$(document).ready(function(){
	//Configuration
	var tempsTransition = 1000;
	var tempsAttente = 6000;
	var currentPosition = 0;
	var slideWidth = 560;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	var interval;
 
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
 
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');
 
 
 
  // Hide left arrow control on first load
  manageControls(currentPosition);
 
  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
 
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
 
     if(currentPosition == numberOfSlides && retour == false )
     {
		currentPosition--;
		pause();
     }
 
    // Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });
 
  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
  function suivant()
{
	$('#rightControl').click();
 
}
 
 
 
});

Voici le code d'aujourd'hui:

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
 
$(document).ready(function()
{
    //Configuration
    //var retour = true;
	var tempsTransition = 1000;
	var currentPosition = 0;
	var slideWidth = 590;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	var interval;
 
    // Supprime la scrollbar en JS
    $('#slidesContainer').css('overflow', 'hidden');
 
    // Attribue  #slideInner  à toutes les div .slide
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
 
    // Longueur de #slideInner égale au total de la longueur de tous les slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);
 
    // Hide left arrow control on first load
    manageControls(currentPosition);
 
    // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
    function manageControls(position)
    {
 
		// Cache la fleche "précédent" si on est sur le premier slide
		if(position == 0)
		{ 
			//$('#leftControl').css('display', 'none');
			//$('#rightControl').css('display', 'inline');
		}else
		{ 
			//$('#leftControl').css('display', 'inline');
			//$('#rightControl').css('display', 'none');
		}
	}
 
  	function initialiseMenu()
	{
		// on cache le menu facture et on montre le menu de la conso tarifs heures creuses
		$('#tableauFacture').css('display', 'none');
		$('#consommationBase').css('display', 'inline');
	}
 
	initialiseMenu();
});
 
function bouge(nomImage)
{
	go();
 
	// Determine la nouvelle position
	if(nomImage == "rightControl")
	{
		currentPosition = 1;
	}else
	{
		currentPosition = 0;
	}
 
	alert("bon");
	// Fais bouger le slide
	$('#slideInner').animate(
	{
		'marginLeft' : slideWidth*(-currentPosition)
	},tempsTransition);
 
}

Ce qui change entre ces deux codes, est le fait donc que mon image a été placée en HTML et non en Javascript.

Pour moi, le problème viendrait de cette ligne vu que tout fonctionne jusqu'à celle-ci:

Code :

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

1
2
3
4
5
6
 
// Fais bouger le slide
	$('#slideInner').animate(
	{
		'marginLeft' : slideWidth*(-currentPosition)
	},tempsTransition);

Malheureusement, je ne sais pas comment y remédier.

[larffas68]

Salut,

a quoi correspond "currentPosition" car il prend pour valeur 0 ou 1 seulement et apres tu fais :

Code :

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

'marginLeft' : 590*(-0)

ou

Code :

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

'marginLeft' : 590*(-1)

tu pourrais faire un copier coller de l'html/css qui va avec pour pouvoir tester et donc plus facilement trouver une solution ?

Merci

[absot]

Dans ma page HTML, il y a deux divisions qui sont des slides, currentPosition correspond au numéro de la slide où nous nous trouvons donc 0 = le premier slide et 1 = le deuxième slide.

Voilà le HTML et CSS qui va avec:
HTML

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
 
<html>
<body>
 
<div id="slideshow">
 
  <div id="slidesContainer">
 
    <div class="slide" id="slide1">
    ---- Un formulaire ---
 
		<input type="image" src="img/apres.PNG" id="rightControl" class="apres" onClick="bouge('rightControl');" />
    </div>
 
    <div class="slide" id="slide2">
      Slide 2<br/>
    </div>
 
  </div>
</div>
</body>
</html>

CSS

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
 
#slideshow 
{
	margin:0 auto;
	width:590px;
 
	background-image:#7EB6AF;
	position:relative;
}
 
#slideshow #slidesContainer 
{
  margin:0 auto;
  width:590px;
 
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
}
 
#slideshow #slidesContainer .slide 
{
  margin:0 auto;
  width:550px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
 
}
 
.control 
{
  display:block;
  width:48px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
 
 
 
#leftControl 
{
  top:550px;
  left:0;
  height:48px;
  background:transparent url(img/avant.PNG) no-repeat 0 0;
}
 
#rightControl 
{
  top:570px;
  right:5px;
  height:48px;
  background:transparent url(img/apres.PNG) no-repeat 0 0;
}
 
body 
{
  background-color:#CCCCCC;
}
 
.tableau
{
	border-collapse:collapse;
	font-size:13px;
}
 
#slidesContainer
{
	background-color:white;	
 
}
 
.apres
{
	height:48px;
	margin-left:530px;	
}
 
.avant
{
	height:48px;
}

[larffas68]

voila donc le résultat pour que cela fonctionne

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
<html>
<head>
<link href="style.css" rel="stylesheet" media="all" type="text/css">
<script src='jQuery.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
	//Configuration
	//var retour = true;
	var tempsTransition = 1000;
	var currentPosition = 0;
	var slideWidth = 590;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	var interval;
 
	// Supprime la scrollbar en JS
	$('#slidesContainer').css('overflow', 'hidden');
 
	// Attribue  #slideInner  à toutes les div .slide
	slides.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
		'float' : 'left',
		'width' : slideWidth
	});
 
	// Longueur de #slideInner égale au total de la longueur de tous les slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);
 
	// Hide left arrow control on first load
	manageControls(currentPosition);
 
	//manageControls: Cache ou montre les flêches de controle en fonction de la position courante
	function manageControls(position){
		// Cache la fleche "précédent" si on est sur le premier slide
		if(position == 0){ 
			//$('#leftControl').css('display', 'none');
			//$('#rightControl').css('display', 'inline');
		}else{ 
			//$('#leftControl').css('display', 'inline');
			//$('#rightControl').css('display', 'none');
		}
	}
 
  	function initialiseMenu(){
		// on cache le menu facture et on montre le menu de la conso tarifs heures creuses
		$('#tableauFacture').css('display', 'none');
		$('#consommationBase').css('display', 'inline');
	}
 
	initialiseMenu();
 
	$('#slidesContainer div input').click(function(){
 
		// Determine la nouvelle position
		if($(this).parent().attr('id') == "slide1"){
			currentPosition = 1;
		}else{
			currentPosition = 0;
		}
 
		alert("bon");
		// Fais bouger le slide
		$('#slideInner').animate({
			'marginLeft' : slideWidth*(-currentPosition)
		},tempsTransition);
 
	});
 
});
 
 
</script>
</head>
 
<body>
 
<div id="slideshow">
 
  <div id="slidesContainer">
 
    <div class="slide" id="slide1">
    ---- Un formulaire ---
 
		<input type="image" src="img/apres.jpg" id="rightControl" class="apres"/>
    </div>
 
    <div class="slide" id="slide2">
      Slide 2<br/>
	<input type="texte" src="retour" id="rightControl" class="apres"/>
    </div>
 
  </div>
</div>
</body>
</html>

1 - préférer ajouter la propriété de click sur l’élément dans le script plutôt que sur l'image ou l'input.
2 - la fonction doit être déclarée dans le dom ready étant donné que tes variables le sont
3 - la fonction go() n'existe pas et renvoi donc une erreur qui stoppe le javascript
4 - le paramètre n'est pas nécessaire pour la fonction bouge tu peux par exemple utiliser l'id correspondant a la div supérieure à ton input.

si tu as besoin de précision hésite pas sinon tu peux mettre résolu

[absot]

Je commence le Javascript depuis peu et je ne comprends pas la ligne suivante:

Code :

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

1
2
3
4
5
 
$('#slidesContainer div input').click(function()
{
   ---------------
}

Dans mon deuxième slide, j'ai une image où je voudrais que quand on clique dessus, ça nous renvoi au premier slide, j'ai regarder ton code mais je ne vois pas trop où je pourrais faire ça du coup.

[larffas68]

Code :

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

$('#slidesContainer div input').click(function(){

signifie je prend l'élément A qui porte l'id : slidesContainer et je pose une action de click sur les inputs qui sont dans une div qui eux meme sont dans A.

ainsi tu pourrais mettre une image de la façon suivante :

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
<div class="slide" id="slide1">
---- Un formulaire ---
 
<img src='img/apres1.jpg' class='image_action'/>
</div>
 
<div class="slide" id="slide2">
Slide 2<br/>
<img src='img/apres2.jpg' class='image_action'/>
</div>
 
et remplacer la ligne de js suivante :
 
$('#slidesContainer div input').click(function(){
 
par :
 
$('img.image_action').click(function(){

et donc cela prendra toutes les images avec la classe image_action et leurs mettra une action équivalente à ton onclick