Défilement d'images horizontalement

Version imprimable

05/02/2012, 05h13
Vortexia

Défilement d'images horizontalement

Bonjour à tous,

J'ai récupérer un code qui ne fonctionne que s'il se trouve dans la balise body, or je veux le faire tourner dans la balise footer.

Quelles modifications dois je apporter au code SVP ?
Merci pour votre aide.

le code est ici :

http://javascript.developpez.com/tel...orizontalement
05/02/2012, 14h45
NoSmoking

Bonjour,
qu'est ce qui t'empêches de mettre une balise qui a pour id mess dans ton FOOTER, tu peux la mettre où tu veux dans le document.
05/02/2012, 21h10
Vortexia

javascript dans mon footer

Salut,

J'ai déja tenté cela, en faisant un copier coller du code dans ma balise footer mais çà ne marche pas.

La balise h1 a une id=mess donc ça devrait être bon mais je comprend pas, il doit y avoir un probléme dans le javascript.
05/02/2012, 22h52
NoSmoking

Citation:

Envoyé par Vortexia

La balise h1 a une id=mess donc ça devrait être bon mais je comprend pas, il doit y avoir un probléme dans le javascript.

non je me suis fourvoyé, les images apparaissent dans la DIV id="nul". :oops:

C'est cette DIV que tu dois déplacer.
06/02/2012, 21h38
Vortexia

defilement images

Bonsoir,

J'ai déja essayer ce que tu dis, j'ai tout deplacé dans ma balise footer, y compris la div de reception avec l'ID=nul.

Le problème est je pense dans le code javascript mais je tatonne encore avec ce langage.
Mon avis est que le problème est dans la fonction de positionnement ou dans la fonction de creation des images.
Ne faut-il pas mettre "document.footer........" au lieu de "document.body........."

Merci de m'aider.

Citation:

Ne faut-il pas mettre "document.footer....

:koi:

la structure de ton document "ressemblant" à ceci, supposition
Code:

1 2 3 4 5 6 7 <body> <header></header> <h1 id="mess" style="text-align:center">Veuillez patienter...</h1> <footer> <div id="nul"></div> </footer> </body>
ton script doit être inséré avant la balise de fin de BODY MAIS APRES la déclaration de la DIV qui à pour id=null
Code:

1 2 3 4 5 6 7 8 <body> <header></header> <h1 id="mess" style="text-align:center">Veuillez patienter...</h1> <footer> <div id="nul"></div> </footer> <script type="text/javascript" src="javatwister_animation.js"></script> </body>
le fichier javatwister_animation.js contenant le code du défilement.

11/02/2012, 04h22
Vortexia

defilement horizontal

J'ai essayé comme tu as dis encore une fois mais ça ne fonctionne pas :arf:
Merci en tout cas pour ton aide, ça doit pas etre sorcier pourtant:mur:.

Bonjour, ca fonctionnera de cette manière :

Code:

1
2
3
4
5
6
7
 
body { margin:0px }
img { display:none; position:absolute; }
// propriétés de la boite à images;"position" et "overflow" sont nécessaires;
#c { display:none; margin-top:100px; background-color:#ffcc00; position:relative; overflow:hidden; }
 
header, content, footer { clear:both; position:relative; overflow:hidden; }

Code:

1
2
3
4
5
6
<footer id="footer">
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>
<div id="nul"></div>
</footer>

Citation:

Et dans le script, il faut remplacer (2 occurences) :
document.body.[...]
par :
document.getElementById('footer').[...]

voici mon code:

Code:

1
2
3
4
5
6
 
body { margin:0px }
img { display:none; position:absolute; }
// propriétés de la boite à images;"position" et "overflow" sont nécessaires;
#c { display:none; margin-top:100px; background-color:#ffcc00; position:relative; overflow:hidden; }
header, content, footer { clear:both; position:relative; overflow:hidden; }

et le html:

Code:

1
2
3
4
5
6
7
8
9
10
 
<body>
<footer>
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>			
<div id="nul"></div>
</footer>
 
</body>

Et entre la fin du footer et fin de body j'ai mis le script:

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
 
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
document.body.replaceChild (c,document.getElementById('footer').('nul'));
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(c,document.getElementById('footer').("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
}
go();
}

Ce code ne fonctionne toujours pas, j'ai peut etre fais une erreur, dites moi.
As tu testé le code Jreaux ?

si quelqu'un peux poster le code fonctionnel, ça serais cool.

Citation:

Ce code ne fonctionne toujours pas, j'ai peut etre fais une erreur, dites moi.

oui , l'erreur est de modifier le code qui marche très bien, document.getElementById('footer').("mess") ne veut rien dire.

Tu as visiblement un problème d'intégration de celui ci dans ta page, voir le canevas ci dessous.

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[...]</title>
<style type="text/css">
body{
  margin:0px
}
img{
  display:none;
  position:absolute;
}
/* propriétés de la boite à images;"position" et "overflow" sont nécessaires; */
#c {
  display:none;
  margin-top:100px;
  background-color:#ffcc00;
  position:relative;
  overflow:hidden;
 }
header, content, footer {
  clear:both;
  position:relative;
  overflow:hidden;
}
</style>
</head>
<body>
  <footer>
    <h1 id="mess" style="text-align:center">Veuillez patienter...</h1>
    <div id="nul"></div>
  </footer>
<script type="text/javascript">
// ICI METTRE L'INTEGRALITE DU SCRIPT
<script>
</body>
</html>

11/02/2012, 17h50
Invité

Il faut mettre un id au footer pour que ca marche :

Code:

<footer id="footer">

Ce qui explique le :

Code:

document.getElementById('footer').[...]

@NoSmoking : j'avais testé avec document.getElementByTagName('footer'), sans mettre d'id, mais ca ne fonctionnait pas...

Merci encore pour vos reponses et désolé pour mon petit niveau.

Voici mon code complet et revue selon Jreaux:

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
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
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[...]</title>
<style type="text/css">
body{
  margin:0px
}
img{
  display:none;
  position:absolute;
}
/* propriétés de la boite à images;"position" et "overflow" sont nécessaires; */
#c {
  display:none;
  margin-top:100px;
  background-color:#ffcc00;
  position:relative;
  overflow:hidden;
 }
header, content, footer {
  clear:both;
  position:relative;
  overflow:hidden;
}
</style>
</head>
<body>
 
<footer id="footer">
   <h1 id="mess" style="text-align:center">Veuillez patienter...</h1>
    <div id="nul"></div> 
</footer>
<script type="text/javascript">
//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
 
 
//||||||||||||||||||||||||
//Variables paramétrables|
//||||||||||||||||||||||||
var M=100;// marge de gauche de la boîte à images;
 
var W=300;// largeur de la boîte à images
// (forcément supérieure à la somme des largeurs des images);
 
var H=100;// hauteur de la boîte à images;
 
var delai=Math.round(W/4);
// le délai initial est d'un quart
// de la largeur de la boîte;
 
 
//|||||||||||||||||||||
//Création de la boîte|
//|||||||||||||||||||||
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
 
var dec=M+W/2;// position horizontale au centre de la boîte;
 
 
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('footer').('nul'));
 
 
//|||||||||||||||||||||||
//Déplacement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
   lf=parseInt(tab[i].style.left);
   w=tab[i].width;
   tab[i].style.left=lf+val+"px";
   if(lf>pos-w){
      tab[i].style.left=lf-pos+"px"};
   if(lf<W-pos){
      tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
 
 
//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientX : e.pageX;
 
if(el>=dec){
   delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
   delai=W/2-1-(dec-el);val=-2};// val=déplacement
}
 
 
//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;
 
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Pause / relance du script / activation des liens|
//|||||||||||||||||||||||||||||||||||||||||||||||||
c.onclick=function(){
   if(oui){clearTimeout(timer);oui=false;
      for(i in tab){
         tab[i].style.cursor="pointer"};
   }
   else{go();oui=true;
      for(i in tab){
         tab[i].style.cursor="default"};
   };
}
 
 
//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
for(i in tab){
   tab[i].onclick=function(){
      if(this.style.cursor=="pointer"){
         window.open(this.src)}
      };
}
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(document.getElementById("footer").("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
}
go();
}
</script>
</body>
</html>

J'ai mis un id à mon footer mais j'étais pas sûr de l'intégration au niveau des 2 occurences à modifier.

mon code ne fonctionne pas.
où est l'erreur ? merci encore.

12/02/2012, 08h27
NoSmoking

Citation:

Envoyé par NoSmoking

oui , l'erreur est de modifier le code qui marche très bien, document.getElementById('footer').("mess") ne veut rien dire.

je persiste et signe...

La méthode getElementById de l'objet document retourne l'élément qui possède l'ID passé en paramètre et.... c'est tout, comme l'indique son nom d'ailleurs.

document.getElementById('footer') retourne l'élément possédant l'ID 'footer', et ajouter un .('mess') ne représente plus rien et génère une ERREUR.

Pour atteindre l'élément possédant comme ID 'mess', il suffit de faire simplement document.getElementById('mess').

Pourquoi ne pas remettre entre les balises <script type="text/javascript"></script> le code ORIGINAL?

Citation:

Merci encore pour vos reponses et désolé pour mon petit niveau.

ce n'est qu'un état passager, qui ne sera que du passé après lecture de Introduction au JavaScript

Bon. Manifestement, je me suis mal fait comprendre (?!)

Voici les modifications à faire dans le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Création des images
for(i=0;i!=6;i++){
zero= (i<9)? 0 : "";
tab[i]=new Image();
tab[i].src="dossier-images/photo-"+zero+(i+1)+".jpg";
c.appendChild(tab[i]);
}
//	document.body.replaceChild(c,document.getElementById('nul')); 
// A REMPLACER PAR :
	document.getElementById('footer').replaceChild(c,document.getElementById('nul'));

// [...]

//Positionnement des images et lancement du script
onload=function(){
//	document.body.removeChild(document.getElementById("mess")); 
// A REMPLACER PAR :
	document.getElementById('footer').removeChild(document.getElementById("mess"));
	c.style.display="block";

Voici la page complète :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Faire défiler des images horizontalement</title>
 
<style type="text/css">
body{
  margin:0px
}
img{
  display:none;
  position:absolute;
}
/* propriétés de la boite à images;"position" et "overflow" sont nécessaires; */
#c {
  display:none;
  margin-top:100px;
  background-color:#ffcc00;
  position:relative;
  overflow:hidden;
 }
header, content, footer {
  clear:both;
  position:relative;
  overflow:hidden;
}
</style>
 
</head>
<body>
 
<header>
   <h1>Faire défiler des images horizontalement</h1>
</header>
 
<content>
<strong>
En passant sur la boite à images, on décide du sens et de la vitesse de défilement;<br />
En cliquant sur la zone, on stoppe le défilement et on active les liens images;</strong>
<br/>
On peut alors afficher chaque image dans une fenêtre indépendante (pas d'agrandissement ici, ce n'est pas le but);<br />
Si on re-clique dans la zone, on relance le défilement;
</content>
 
<footer id="footer">
	<h6 id="mess" style="text-align:center">Veuillez patienter...</h6>
	<div id="nul"></div> 
	<script type="text/javascript" src="./defilement-images-script.js"></script>
</footer>
 
</body>
</html>

Il semble que ce script ne fonctionne que s'il est placé APRES <div id="nul"></div> (et donc PAS dans <head>)

ICI, j'ai mis le script dans un fichier externe defilement-images-script.js :

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
/* Faire defiler des images horizontalement */
// Variables
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
 
// Variables paramétrables
var M=100;// marge de gauche de la boite à images;
var W=500;// largeur de la boite à images
// (forcément supérieure à la somme des largeurs des images);
var H=100;// hauteur de la boite à images;
var delai=Math.round(W/4);// le délai initial est d'un quart
// de la largeur de la boite;
 
//Création de la boite
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
var dec=M+W/2;// position horizontale au centre de la boite;
 
// Création des images
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   // chemin et noms des IMAGES
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
//	document.body.replaceChild(c,document.getElementById('nul')); 
// A REMPLACER PAR :
	document.getElementById('footer').replaceChild(c,document.getElementById('nul'));
 
// Déplacement des images
function go(){
for(i in tab){
lf=parseInt(tab[i].style.left);
w=tab[i].width;
tab[i].style.left=lf+val+"px";
if(lf>pos-w){
tab[i].style.left=lf-pos+"px"};
if(lf<W-pos){
tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
//Vitesse et sens
function speed(e){
el= (!e)? event.clientX : e.pageX;
if(el>=dec){
delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
delai=W/2-1-(dec-el);val=-2};// val=déplacement
}
 
// Gestionnaire de "speed"
c.onmousemove = speed;
 
// Pause / relance du script / activation des liens
c.onclick=function(){
	if(oui){
		clearTimeout(timer); 
		oui=false;
		for(i in tab){
			tab[i].style.cursor="pointer";
		}
	} else {
		go();
		oui=true;
		for(i in tab){
			tab[i].style.cursor="default";
		}
	}
}
// Lancement des liens
for(i in tab){
	tab[i].onclick=function(){
		if(this.style.cursor=="pointer"){
		window.open(this.src)}
	};
}
 
// Positionnement des images et lancement du script
onload=function(){
//	document.body.removeChild(document.getElementById("mess")); 
// A REMPLACER PAR :
	document.getElementById('footer').removeChild(document.getElementById("mess"));
	c.style.display="block";
	for(i in tab){
		tab[i].style.left=pos+"px";
		tab[i].style.top=(H-tab[i].height)/2+"px";
		tab[i].style.display="inline";
		pos+=tab[i].width;
	}
	go();
}

Sinon, on trouve aussi des scripts très intéressants,
en faisant une recherche sur : "caroussel jquery"

13/02/2012, 02h29
Vortexia

J'ai essayé le code dans mon footer, c'est bon ça marche :hola:

Merci Jreaux pour ton soutien et ton support, je suis nouveau ici mais j'apprécie dejà l'accueuil, je me sens en famille ;).

Citation:

ce n'est qu'un état passager, qui ne sera que du passé après lecture de Introduction au JavaScript

Je m'y mets dès aujourd'hui Nosmoking, je compte aussi sur la communauté pour relever mon niveau, merci encore aussi pour tes explications. :ccool:
13/02/2012, 22h09
NoSmoking
Citation:

Envoyé par Vortexia

J'ai essayé le code dans mon footer, c'est bon ça marche :hola:

...il n'était qu'à suivre les indications données ici

Citation:

Envoyé par jreaux62

Il semble que ce script ne fonctionne que s'il est placé APRES <div id="nul"></div> (et donc PAS dans <head>)

...avant de 'getter' et d'utiliser un élément il faut qu'il ait été crée dans le DOM.

Concernant la méthode removeChild il est une façon qui permet de ne pas identifier le parent
Code:

1 2 var oChild = document.getElementById('mess'); oChild.parentNode.removeChild( oChild);
...le même raisonnement peut être appliqué pour la méthode replaceChild
14/02/2012, 05h29
Vortexia

Effectivement Nosmoking, tu avais apporté une partie de la solution dans le post auquel tu me fais reference, mais le code original ne fonctionnais pas si l'on identifié pas le footer.

Tu ne m'avais pas parlais de la possibilité de remplacer l'instruction removechild et replacechild, Jreaux y a quand même pensé à l'ID même si le code pouvais être optimsé.

Peu importe, Merci encore en tout cas à tout les deux et à cette dernière explication sur l'optimisation.