Slide qui ne bouge pas

**absot** · 14/12/2010, 12h58

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** · 14/12/2010, 13h29

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** · 14/12/2010, 13h38

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** · 14/12/2010, 13h56

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** · 14/12/2010, 14h40

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** · 14/12/2010, 14h52

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

**absot** · 14/12/2010, 15h36

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?

**larffas68** · 15/12/2010, 13h49

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

Code :

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

$('#slidesContainer div.slide input')

**absot** · 15/12/2010, 17h06

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

Voilà mon code:
HTML fichier1.php

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

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

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

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

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 :

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

**larffas68** · 16/12/2010, 10h28

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

**absot** · 16/12/2010, 13h06

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.

**larffas68** · 16/12/2010, 14h18

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.

**absot** · 16/12/2010, 14h25

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.

**larffas68** · 16/12/2010, 14h30

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 ?

Slide qui ne bouge pas

jQuery

Discussions similaires

Partager

Partager