Slide qui ne bouge pas

Version imprimable

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:

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:

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:

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.

14/12/2010, 12h29
larffas68

Salut,

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

Code:

'marginLeft' : 590*(-0)

ou

Code:

'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

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:

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:

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;
}

voila donc le résultat pour que cela fonctionne :)

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
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 ;)

14/12/2010, 13h40
absot
Je commence le Javascript depuis peu et je ne comprends pas la ligne suivante:
Code:

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. :?

Code:

$('#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:

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 :)

14/12/2010, 14h36
absot

Ok je comprends mieux, quand je parlais d'image, je parlais d'input de type image donc ce n'est pas pareil.

Donc soit je fais un onClick, soit il faut que je modifie la ligne js?

Je me dis que ta ligne de code devrait être si je suis le raisonnement vu que l'on attribué des actions sur les input qui sont dans SlidesContainer?
15/12/2010, 12h49
larffas68

sur les input des div.slide du #slidesContainer d'ou le :

Code:

$('#slidesContainer div.slide input')

Malheureusement, il ne se passe rien quand je clique sur le bouton de ma deuxième div.

Voilà mon code:
HTML fichier1.php

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test slide Jquery</title>
<link rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function()
{
	//Configuration
	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');
		$('#consommationCreux').css('display', 'none');
		$('#phraseFacture').css('display', 'none');
	}
 
	initialiseMenu();
 
	$('#slidesContainer div.slide input').click(function()
	{
		go();
 
		// Determine la nouvelle position
		if($(this).parent().attr('id') == "slide1")
		{
			currentPosition = 1;
		}else
		{
			currentPosition = 0;
		}
 
		// Fais bouger le slide
		$('#slideInner').animate(
		{
			'marginLeft' : slideWidth*(-currentPosition)
		},tempsTransition);
	});
 
});
 
</script>
 
<html>
<body>
 
<div id="slideshow">
 
  <div id="slidesContainer">
 
    <div class="slide" id="slide1">
 
	---- Formulaire -----			
		<input type="image" src="img/apres.PNG" id="rightControl" class="apres" />
    </div>
 
    <div class="slide" id="slide2">
        Slide 2
    </div>
 
  </div>
</div>
</body>
</html>

HTML Fichier2.php

Code:

1
2
3
 
--- Traitement formulaire qui renvoit un tableaux ---
<input type="image" src="img/avant.PNG" id="leftControl" class="avant" />

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
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;
}

La fonction go() récupère les données de mon formulaire et les envois par requête AJAX à un autre fichier (fichier2.php) qui sera envoyé dans le deuxième slide, peut-être pour ça que ça ne fonctionne pas, peut-être faudrait-il codé un scipt Javascript dans fichier2.php?

Voici ce que j'ai modifié dans fichier1.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$('#slidesContainer div.slide input').click(function()
	{
		// Determine la nouvelle position
		if($(this).parent().attr('id') == "slide1")
		{
			currentPosition = 1;
			go();
		}else if($(this).parent().attr('id') == "slide2")
		{
			currentPosition = 0;
		}
		// Fais bouger le slide
		$('#slideInner').animate(
		{
			'marginLeft' : slideWidth*(-currentPosition)
		},tempsTransition);
	});

Si j'ai bien compris ce que j'ai fais, je lui dis que si l'action provient d'un input dans mon slide11, alors j'appelle ma fonction go, je change la valeur de mon paramètre currentPosition à 1 sinon si l'action provient d'un input de mon slide2, alors je change la valeur de ma variable currentPosition à 0 et après je fais mon changement de slide.

Mais ca ne fonctionne pas, enfin, ca fonctionne quand je passe du premier slide au deuxième mais pas quand je eux passer du deuxième slide au premier.

16/12/2010, 09h28
larffas68

salut,

pourquoi as-tu besoin de récupérer les informations d'un slide ou de l'autre ? si c'est pour faire un formulaire, il suffirait d'avoir un submit qui apparaisse sous certaines conditions et de récupérer tous les champs (le slide ne détruit pas les champs du formulaire d'une des deux div il les cache seulement)...
16/12/2010, 12h06
absot

Le problème est que comme je ne recharge pas la page , je ne peux pas avoir de bouton submit, je dois donc faire appel à une requête AJAX.

Quand je passe du premier slide au deuxième, je récupère les données du formulaire, je les traites et j'affiche le résultat dans le deuxième slide.

Quand je passe du deuxième slide au premier, je ne récupère rien, je veux simplement retourner au premier slide.
16/12/2010, 13h18
larffas68

dans ce cas tu crée ton formulaire avec un bouton submit, lors du submit tu exécute un Json qui envoi tous les paramètres a un script php qui te retourne un résultat en fin, et ce résultat lors d'un retour success du Json tu le fait afficher dans le slide 2 et tu slide, sinon si tu es dans le slide 2 tu fais juste un slide vers 1.
16/12/2010, 13h25
absot

C'est ce qui se passe déjà d'après ce que j'ai compris de ton message.

L'utilisateur remplit le formulaire, une fois fait, il le valide en cliquant sur l'input de type image, ca envoi toutes les valeurs en POST dans un script PHP qui traite tout ça, une fois fini, ça renvoi le traitement dans le slide 2 et l'utilisateur passe visuellement du slide 1 au deuxième.
16/12/2010, 13h30
larffas68

alors si il fait tout cela quel est le problème qui fait que cela ne fonctionne pas ? est ce la transition ? est-ce la requête Json ? est-ce l’exécution du php ? 8-)