[SRC] Défilement de textes et d'images

Version imprimable

06/05/2008, 13h59
Auteur

2 pièce(s) jointe(s)

[SRC] Défilement de textes et d'images
Voici deux exemples de diaporamas avec un défilement alterné.

Citation:

Source : Diaporama avec un défilement horizontal (textes et images)
Pièce jointe : diaporamaH2.zip
Commentaires :
- Le code est commenté.
- Le défilement du texte et des images est alterné (de la droite vers la gauche puis de la gauche vers la droite).
- Les images sont cliquables (modifier la fonction clicSurImage(objCellule)). Si vous ne voulez pas gérer les clics, laissez la fonction vide.
- Vitesse de défilement : pour l'augmenter il faut augmenter la valeur de la variable pas ou diminuer la valeur de tempo (qui est une chaine de caractères).
Ces variables sont déclarées dans la partie "//***** Fonctions du diaporama *****//"

- Code valide XHTML 1.1

/!\ Pour les dimensions des composants utilisez le pixel comme unité !! (pas le % - bug)

Citation:

Source : Diaporama avec un défilement vertical (textes et images)
Pièce jointe : diaporamaV.zip
Commentaires :
- Le code est commenté.
- Le défilement du texte et des images est alterné (du bas vers le haut puis du haut vers le bas).
- Les images sont cliquables (modifier la fonction clicSurImage(objCellule)). Si vous ne voulez pas gérer les clics, laissez la fonction vide.
- Vitesse de défilement : pour l'augmenter il faut augmenter la valeur de la variable pas ou diminuer la valeur de tempo (qui est une chaine de caractères)
Ces variables sont déclarées dans la partie "//***** Fonctions du diaporama *****//"

- Code valide XHTML 1.1

/!\ Pour les dimensions des composants utilisez le pixel comme unité !! (pas le % - bug)
- Les codes fonctionnent sous IE7, FF, Konqueror.
- Les codes n'ont pas été testés sous IE6, Opéra, Safari (à vérifier donc ;)).
[Bug]
Dans les codes sources : remplacez

Code:

var chemin = "images\\";

(=> Konqueror n'accepte pas cette syntaxe)
par

Code:

var chemin = "images/";

[/Bug]

Citation:

Source : Défilement de texte horizontalement ou comment réinventer la balise marquee :aie:
Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title>Défilement de texte</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<style type="text/css">
<!--
.conteneur{
  width: 400px;
  border: 5px #DDDDDD ridge;	/* bordure du conteneur */

  overflow: hidden;	/* on cache les barres de défilement */
  padding-left: 0px;      /* /!\ pas de padding-left ni de padding right /!\ */
  padding-right: 0px;  
  padding-top: 15px;          /* padding-top et padding-bottom pour un centrage vertical */
  padding-bottom: 15px;
}

/* style du texte qui doit défiler */
.aspectTexte{
 font-size: 20pt;
 font-family: Comic Sans MS;
 color: #0000FF;
}
-->
</style>
 
<script type="text/javascript">
<!--
// Texte à faire défiler :
var texte = "Ceci est le texte qui doit défiler...................";

var vitesse = "10";     //vitesse de défilement (en ms)
var pas = 2;            //pas de défilement (en px)
var sens = 1;  //1=> de la droite vers la gauche (par défaut)
               //-1=> de la gauche vers la droite

// Fonctions du diaporama               
var conteneur , chrono, X;

function creationDiaporama()
{
  var noeudDiv, noeudTxt, crlf, noeudSpan;
  
  conteneur = document.getElementById("conteneur");
  
  noeudDiv = document.createElement("div");
  noeudSpan = document.createElement("span");
  crlf = document.createElement("nobr");
  noeudTxt = document.createTextNode(texte);
  
  
  crlf.appendChild(noeudTxt);
  noeudSpan.appendChild(crlf);
  noeudDiv.appendChild(noeudSpan);
  conteneur.appendChild(noeudDiv);
  
  noeudDiv.style.textAlign = "center";
  noeudDiv.style.padding = "0px";
  noeudDiv.style.margin = "0px";
    
  noeudSpan.className = "aspectTexte";

  if (noeudSpan.offsetWidth<conteneur.scrollWidth)
    noeudDiv.style.width = conteneur.scrollWidth*3+"px";
  else
    noeudDiv.style.width = noeudSpan.scrollWidth*3+"px";

  if (sens!=-1 && sens!=1)
    sens = 1;
  
  if (sens==1)  
    X = 0; 
  else
  {
    conteneur.scrollLeft = conteneur.scrollWidth;  
    X = conteneur.scrollLeft;
  } 
  
  chrono = setTimeout("defile()",vitesse);
}

// Défilement du texte
function defile()
{
  X = X + (sens)*pas;
  conteneur.scrollLeft = X;
  
  if (sens==1)
  {
    if (conteneur.scrollLeft<X)
      X = 0;
    chrono = setTimeout("defile()",vitesse); 
  }
  else
  {
    if (conteneur.scrollLeft==0)
    {
        conteneur.scrollLeft = conteneur.scrollWidth;
        X = conteneur.scrollLeft;
    }
    chrono = setTimeout("defile()",vitesse);
  }
}

// Arret du défilement lorsque l'on ferme la page
function stopDiaporama()
{
  clearTimeout(chrono);
}
 
//-->
</script>
 
</head>
 
<body onload="creationDiaporama()" onunload="stopDiaporama()">
 
<div id="conteneur" class="conteneur">
</div>

 
</body>
 
</html>

Commentaires :
- Défilement du texte de la gauche vers la droite ou de la droite vers la gauche
=> variable sens :

sens = 1 de la droite vers la gauche (par défaut)

sens = -1=> de la gauche vers la droite

- Variable vitesse : vitesse de défilement en ms
- Variable pas : pas du défilement en px
- Variable texte : contient le texte qui doit défiler
- Code valide XHTML 1.1

Le code fonctionne sous IE7 et FF.
Le code n'a pas été testé sous IE6, Opéra, Konqueror, Safari (à vérifier donc ;)).

Citation:

Source : Défilement de texte verticalement
Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<style type="text/css">
<!--
.conteneur{
  width: 400px;     /* /!\ ne pas oublier de renseigner la hauteur et la largeur /!\ */
  height: 100px;  
  border: 5px #DDDDDD ridge;	/* bordure du conteneur */
  
  overflow: hidden;	/* on cache les barres de défilement */
  padding-top: 0px;    /* /!\ pas de padding-top ni de padding-bottom /!\ */
  padding-bottom: 0px;  
  padding-left: 15px;       /* padding-left et padding-right pour un centrage horizontal */
  padding-right: 15px;
}

/* style du texte qui doit défiler */
.aspectTexte{
 text-align: center;
 font-size: 20pt;
 font-family: Comic Sans MS;
 color: #0000FF;
}
-->
</style>
 
<script type="text/javascript">
<!--
// Texte à faire défiler :
var texte = "Ceci est le texte qui doit défiler...................";

var vitesse = "20";     //vitesse de défilement (en ms)
var pas = 2;            //pas de défilement (en px)
var sens = 1;  //1=> de la bas vers le haut (par défaut)
               //-1=> de la haut vers le bas

// Fonctions du diaporama               
var conteneur , chrono, X;

function creationDiaporama()
{
  var elTable, elLigne, elCell, elTxt;
  
  conteneur = document.getElementById("conteneur");
   
  elTable = document.createElement("table");
  elLigne = elTable.insertRow(-1);
  elCell = elLigne.insertCell(0);
  
  elTxt = document.createTextNode(texte);
  elCell.appendChild(elTxt);
  
  elTable.cellpadding = "0";
  elTable.cellspacing = "0";
  
  elTable.style.verticalAlign = "middle";
  elTable.className = "aspectTexte";
  
  conteneur.appendChild(elTable);
  
  if (elTable.offsetHeight<conteneur.offsetHeight)
    elTable.style.height = conteneur.offsetHeight*3 + "px";
  else
    elTable.style.height = elTable.offsetHeight*3 + "px";  
  
  if (sens!=-1 && sens!=1)
    sens = 1;
  
  if (sens==1)  
    X = 0; 
  else
  {
    conteneur.scrollTop = conteneur.scrollHeight;  
    X = conteneur.scrollTop;
  } 
  
  chrono = setTimeout("defile()",vitesse);
}

// Défilement du texte
function defile()
{
  X = X + (sens)*pas;
  conteneur.scrollTop = X;
  
  if (sens==1)
  {
    if (conteneur.scrollTop<X)
      X = 0;
    chrono = setTimeout("defile()",vitesse); 
  }
  else
  {
    if (conteneur.scrollTop==0)
    {
        conteneur.scrollTop = conteneur.scrollHeight;
        X = conteneur.scrollTop;
    }
    chrono = setTimeout("defile()",vitesse);
  }
}

// Arret du défilement lorsque l'on ferme la page
function stopDiaporama()
{
  clearTimeout(chrono);
}
 
//-->
</script>
 
</head>
 
<body onload="creationDiaporama()" onunload="stopDiaporama()">
 
<div id="conteneur" class="conteneur">
</div>

 
</body>
 
</html>

Commentaires :
- Défilement du texte du haut vers la bas ou du bas vers le haut
=> variable sens :

sens = 1 du bas vers le haut (par défaut)

sens = -1=> du haut vers le bas

- Variable vitesse : vitesse de défilement en ms
- Variable pas : pas du défilement en px
- Variable texte : contient le texte qui doit défiler
- Code valide XHTML 1.1

Le code fonctionne sous IE7 et FF.
Le code n'a pas été testé sous IE6, Opéra, Konqueror, Safari (à vérifier donc ;)).

Citation:

Source : "Simple" diaporama
Code :

Code HTML :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<style type="text/css">
<!--
.conteneur{
  text-align: center;
  width: 300px;
}
 
.bouton{
  text-align: center;
  width: 50px;
  height: 30px;
}
 
.image{
  width: 80px;
}
 
 
.listeVignettes{
  border: ridge #AAAAAA 5px;
  overflow: auto;
  width: 300px; 
  height: 100px;
  background-color: #000000;
  padding: 0px;
}
 
.vignettes{
  width: 40px;
  margin: 4px;
  background-color: #FFFFFF;
  border: ridge #FFFFFF 2px;
  cursor: pointer;  
}
-->
</style>
 
<script type="text/javascript" src="diaporama.js"></script> 
 
</head>
 
<body onload="afficheVignettes(); defileImage(null)">
 
<div class="conteneur">
  <img src="" id="idImage" class="image" alt="image" /><br />
  <input class="bouton" id="btn1" type="button" value=" |&lt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn2" type="button" value=" &lt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn3" type="button" value=" &gt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn4" type="button" value=" &gt;| " onclick="defileImage(this)"/>
</div>
 
<div>
  <br/><br/><br/>
</div>
 
<div id="Cvignettes" class="listeVignettes">
</div>
 
</body>
 
</html>

Code 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
 
var chemin = "images/"; // dossier contenant les images
var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif");
var i;
 
 
function defileImage(arg)
{
  if (!isNaN(arg) && arg!=null)
  {
    i = arg;
  }
 
  if (arg==null)
    i = 0;
  else
  {  
    switch (arg.id)
    { 
      case "btn1":    // id du bouton "première image"
          i = 0;
          break;
      case "btn2":    // id du bouton "image précédente"
          i--;
          break;
      case "btn3":    // id du bouton "image suivante"
          i++;
          break;
      case "btn4":    // id du bouton "dernière image"
          i = tabImg.length-1;
          break;
      /*default:
          i=0;*/
    }  
  }
 
  document.getElementById("btn1").disabled = (i==0);
  document.getElementById("btn2").disabled = (i==0);    
 
  document.getElementById("btn3").disabled = (i==tabImg.length-1);
  document.getElementById("btn4").disabled = (i==tabImg.length-1); 
 
  document.getElementById("idImage").src = chemin + tabImg[i];
}
 
function afficheVignettes()
{
  var j, objImg;
  var c;
 
  c = document.getElementById("Cvignettes");
 
  for (j=0; j<tabImg.length; j++)
  {
    objImg = document.createElement("img");
    objImg.src = chemin + tabImg[j];
    objImg.className="vignettes";
 
    objImg.n = j;
    objImg.onclick = function(){defileImage(this.n)}
 
    c.appendChild(objImg); 
  }
}

Commentaires :
- Il faut simplement préciser le dossier des images (variable chemin) et le nom des images (variable tableau tabImg).

- J'ai dû sortir le code JS de la page HTML pour une validation XHTML 1.1.
- C'est un simple diaporama avec les boutons "premier", "suivant", "précédent" et "dernier".
- La fonction afficheVignettes() permet d'afficher les vignettes du diaporama. On peut cliquer sur les vignettes en question pour un affichage direct. La fonction defileImage() gère le tout en fonction du type de l'argument (null, un nombre qui correspond à l'index de l'image dans le tableau tabImg, ou un bouton cliqué).
- Le code fonctionne sous IE 7 et FF (pas testé sous IE 6, Opera et Konqueror).

Citation:

Source : Défilement alterné de textes

Commentaire :
J'ai simplement repris le script diaporamaH2.html du premier post. Je l'ai modifié pour qu'il ne fasse défiler que du texte (j'ai supprimé les variables liées aux images, c'est tout :aie:).
:arrow: les commentaires que j'ai fait pour diaporamaH2.html et diaporamaV.html sont valables pour ce script.

Code :
DiaporamaH3.html :

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title>Défilement alterné de texte</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<style type="text/css">
<!--
/* div conteneur et cellule du tableau de même longueur */
.conteneur, .cellule{
	width: 400px;	/* valeur modifiable ;-) /!\ entrer une valeur en pixel /!\ */
}

/* Le conteneur s'adapte en hauteur (height). Il n'est pas nécessaire de préciser sa hauteur */
.conteneur{
	border: 5px #AAAAAA ridge;	/* bordure du conteneur */
	overflow: hidden;						/* on cache les barres de défilement */
	padding: 0px;								/* pas de marge intérieure */
}

/* proprités de la cellule (contient le texte) */
.cellule{
	text-align: center;					/* alignement des composants dans la cellule */	
	vertical-align: middle;
	border: none;
	cursor: pointer;						/* curseur en forme de main */
	
	/* propriétés du texte dans la cellule */
	color: #000000;								
	font-family: Comic Sans MS;
	font-size: 12pt;
	background-color: #DDDDDD;
}
 
-->
</style>
 
<script type="text/javascript">
<!--

var tabTxt = new Array("Commentaire 1", "Voici un long, terriblement long et ennuyeux commentaire 2", "Commentaire 3", "Coucou", "Un dernier commentaire pour la route :D");

var attente = "3000"; //délai d'affichage du texte en ms

// Action à réaliser lors du clic sur une cellule. 
// id est de la forme "celluleX" avec X compris entre 0 et tabTxt.length-1
function clicSurTexte(objCellule)
{
	//alert(objCellule.id);
  
	switch (objCellule.id)
	{
		case "cellule0" : 	//action a réaliser lors du clic sur la cellule 0
				alert("coucou");
				break;
		case "cellule1" :		//action a réaliser lors du clic sur la cellule 1
				alert("bonjour :-)");
				break;
		case "cellule2" :		//action a réaliser lors du clic sur la cellule 2
				alert("hello");
				break;
	}  
}

/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "1";
var pas = 2;
var chrono;
var posFin, conteneur, sens;

// Ajout du texte dans le div conteneur
function creationDiaporama()
{
	var i;
	var txtDiapo;
	var conteneur = document.getElementById("conteneur");
	
	// Création du tableau contenant les élements
	var elTable = document.createElement("table");			
	// Ajout d'une ligne dans ce tableau
	var elLigne = elTable.insertRow(-1);
	var elCell;
		
	elTable.style.width = parseInt(conteneur.clientWidth * tabTxt.length) + "px";
	elTable.cellSpacing = "0";
	elTable.cellPading = "0";
	
	for (i=0; i<tabTxt.length; i++)
	{	
		// Création du noeud texte
		txtDiapo = document.createTextNode(tabTxt[i]);
		
		// Création de la cellule contenant les objets
		elCell = elLigne.insertCell(i);
		elCell.className = "cellule";
		elCell.id = "cellule"+i;
		elCell.objetCellule = elCell;
		elCell.onclick = function(){clicSurTexte(this.objetCellule);}
		
		// Ajout des éléments dans la cellule
		elCell.appendChild(txtDiapo);
	}
	
	// Ajout du tableau dans le div conteneur
	conteneur.appendChild(elTable);
	chrono = setTimeout("deroule()",attente);
} 

// Détermination du sens de défilement du texte et des distances à parcourir
function deroule()
{
	var distance;

	conteneur = document.getElementById("conteneur");
	distance = conteneur.scrollWidth / tabTxt.length;
	
	if (conteneur.scrollLeft + distance >=conteneur.scrollWidth)
	{
		sens = -1;
	}

	if (conteneur.scrollLeft<distance)
	{
		sens = 1;
	}
	
	posFin = conteneur.scrollLeft + sens * distance;
	chrono = setTimeout("defileTexte()", tempo);
}

// Défilement du texte
function defileTexte()
{
	conteneur.scrollLeft = conteneur.scrollLeft + sens * pas;	
	
	if (sens == 1)
	{
		if (conteneur.scrollLeft<posFin)
			chrono = setTimeout("defileTexte()", tempo);
		else
			chrono = setTimeout("deroule()",attente);
	}
	else
	{
		if (conteneur.scrollLeft>posFin)
			chrono = setTimeout("defileTexte()", tempo);
		else
			chrono = setTimeout("deroule()",attente);
	
	}


	// Pour debugage ;-)
	/*document.getElementById('idTest').innerHTML=conteneur.scrollLeft + " / " + posFin;*/

}

// Réinitialisation du diaporama lors de la fermeture de la page
function stopDiaporama()
{
	clearTimeout(chrono);
	document.getElementById("conteneur").scrollLeft = 0;
}

 
//-->
</script>
 
</head>
 
<body onload="creationDiaporama()" onunload="stopDiaporama()">
 
<div class="conteneur" id="conteneur">
 
</div>

<!-- pour debugage  
<div id="idTest"></div>
 -->
 
</body>
 
</html>

28/02/2009, 18h50
Auteur

Citation:

Diaporama avec un défilement horizontal alterné des textes et d'images (2).

J'ai repris le script de défilement horizontal du 1er message de cette discussion (diaporamaH2.zip).

Je l'ai modifié pour réaliser des défilements par groupe de N images. Cf. cette discussion.
Le script est dans la pièce jointe diaporamaH4.zip de cette discussion.

Les commentaires pour diaporamaH2.zip s'appliquent à diaporamaH4.zip
30/04/2009, 00h05
Auteur
:!: :!: :!: :!:

J'ai testé les scripts ci-dessus avec IE7 => Pas de problèmes.

J'ai testé les scripts ci-dessus avec IE8 :
- Pour les scripts à défilement vertical, il n'y a pas de soucis.
- Par contre les scripts à défilement horizontal ne fonctionnent pas avec IE8. et je ne sais pas pourquoi. :oops:
30/04/2009, 06h43
Bovino

Quelle version d'IE8 ?
Car celle livrée avec Seven est la beta et aux dernières nouvelles, tu ne peux pas passer à la finale, or il y a des différences de rendu entre les deux.
30/04/2009, 12h06
Auteur

Citation:

Envoyé par Bovino

Quelle version d'IE8 ?
Car celle livrée avec Seven est la beta et aux dernières nouvelles, tu ne peux pas passer à la finale, or il y a des différences de rendu entre les deux.

J'ai installé la version proposée hier par le Window Update de Vista. J'ignore si c'est une version bêta ou non.
Comme elle a été proposée lors de la mise à jour Vista je ne pense pas que cela soit une version bêta, si ?

Je vérifierai ce détail....
03/05/2009, 12h37
Auteur

visiblement c'est la version finale :
8.0.6001

Sans doute un problème javascript ou CSS :?
Visiblement c'est la taille du conteneur qui est mal ajustée (sa longueur doit être égale à la la longueur d'un élément qui défile). Sous IE 8 tous les objets qui doivent défiler sont affichés.
19/02/2011, 12h54
Auteur
Citation:

Envoyé par Auteur

# Par contre les scripts à défilement horizontal ne fonctionnent pas avec IE8. et je ne sais pas pourquoi.

Bug trouvé :yaisse3: (oui, je sais j'ai mis le temps :aie:)

Dans la fonction creationDiaporama() vous avez cette ligne de code :
Code:

1 2 elTable.style.width = parseInt(conteneur.clientWidth * tabImg.length / coef) + "px";
Or il s'avère que sous IE 8, conteneur.clientWidth retourne 0.

Remplacez donc conteneur.clientWidth par la largeur que vous avez défini dans la CSS.
Code:

1 2 3 4 5 /* div conteneur et cellule du tableau de même longueur */ .conteneur, .cellule{ width: 600px; /* valeur modifiable ;-) /!\ entrer une valeur en pixel /!\ */ }
Ce qui devient :
Code:

1 2 elTable.style.width = parseInt(600 * tabImg.length / coef) + "px";
[Edit]

J'en profite pour insérer le lien vers la contribution de kimjoa :
Marquee compatible Mootools, Jquery, Prototype et sans librairie

[/Edit]
19/02/2011, 13h48
laurentSc

Bien vu ; nickel :ccool: :ccool:
19/02/2011, 15h32
NoSmoking
Citation:

Envoyé par Auteur

Remplacez donc conteneur.clientWidth par la largeur que vous avez défini dans la CSS.

dommage d'imposer une contrainte, si clientWidth vaux 0 au début, que vaut il une fois la table insérée.
Peut être faudrait-il
1. Insertion table
2. Recupération largeur conteneur
3. Réajustement des TD
Une autre piste est de récupérer la largeur via un getComputedStyle ou autre currentStyle si la valeur vaux 0.

PS: pas testé, pas installé IE8
19/02/2011, 16h17
Auteur
Citation:

Envoyé par NoSmoking

dommage d'imposer une contrainte, si clientWidth vaux 0 au début, que vaut il une fois la table insérée.

la largeur du conteneur est fixée dans la feuille de style
Code:

1 2 3 4 .conteneur, .cellule{ width: 600px; /* valeur modifiable ;-) /!\ entrer une valeur en pixel /!\ */ }
donc en toute logique conteneur.clientWidth doit retourner 600. C'est la valeur que j'obtiens sous IE 7 et Firefox.
19/02/2011, 16h32
NoSmoking

je ne saurais dire comment IE8 gère dans le flux un élément vide, ayant de plus un overflow: hidden, apparemment de manière différente des autres. Chacun ses priorités il semble!

essaies de voir en mettant un

Code:

alert( conteneur.currentStyle['width']);