Bonjour a tous,

Pour un projet d'entreprise, je dois créer un module joomla dans lequel les news défileront continuellement.

Jusque là, pas de problème. Avec jQuery, l'animation est relativement simple a réaliser. Cependant, je rencontre quelques petites difficultés.

Tout d'abord, je souhaiterais rendre le script plus performant. Je trouve qu'il est beaucoup trop gourmand et je pense que c'est ce qui provoque des petits lags de temps en temps.

Ensuite, je me rend compte qu'au chargement de la page, le texte se mets a défiler normalement, mais d'un coup, il se ralenti tout seul sans raison.

Enfin, je rencontre un drôle de comportement. Normalement, lorsque l'utilisateur passe sa souris sur une news qui l'intéresse, le texte arrête de défiler. Ça fonctionne. mais lorsqu'il repart, il repart très lentement. Difficile a expliquer comme ça, mais voici le code javascript, html et css.

Code html : 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
 
<html>
	<head>
		<link type="text/css" href="newsfeed.css" rel="stylesheet">
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	</head>
 
	<body>
		<div class="containerFeed">
			<div class="containerElemSep">
				<p class="element" id="1">
					<a href="#">18.12.2009  //   Element 1</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="2">
					<a href="#">18.12.2009  //   Element 2</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="3">
					<a href="#">18.12.2009  //   Element 3</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="4">
					<a href="#">18.12.2009  //   Element 4</a>
					<span class="separator">****</span>
				</p>
				<p class="element" id="5">
					<a href="#">18.12.2009  //   Element 5</a>
					<span class="separator">****</span>
				</p>
			</div>
		</div>
	</body>
</html>

Code javascript : 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
 
jQuery(document).ready(function () {
	nbrElement = jQuery(".element").length; /* Nombre d'element contenant du texte */
	widthContainerFeed = jQuery("div.containerFeed").width(); /* Largeur de la div principale */
 
	jQuery(".element").css({
		width : widthContainerFeed + "px",
		left : widthContainerFeed + "px"
	});
 
	widthElement = jQuery(".element").width(); /* Largeur des p après modifications */
 
	jQuery(".containerElemSep").css({
		width: (widthContainerFeed+widthElement) + "px" /* Modification de la largeur de la div contenant les elements a faire defiler */
	});
	widthContainerElemSep = jQuery(".containerElemSep").width();
	widthContainerFeed = jQuery(".containerFeed").width();
	/*function animation () {
		jQuery(".element").animate(
			{ left : "-" + widthContainerFeed * 2 + "px"}, 18000, "linear", function () {
				jQuery(this).is(":first").insertAfter(jQuery(this).is(":last"));
				animation();
			}
		);
	}*/
	function animation (idMove) {
		jQuery("#"+idMove).animate(
			{ left : "-" + widthContainerFeed + "px"}, 10000, "linear",
			function () {
				jQuery(this).css({left : widthContainerFeed + "px"});
				if (idMove == nbrElement) {
					idMove = 1;
				}
				else {
					idMove = idMove + 1;
				}
				animation(idMove);
			}
		);
	}
 
	jQuery(".element").mouseover(function () {
		idMoved = jQuery(this).focus().attr("id");
		jQuery("#"+idMoved).stop();
	});
 
	jQuery(".element").mouseout(function () {
		animation(idMoved);
	});
 
	animation(1);
});

Code css : 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
 
@CHARSET "ISO-8859-1";
 
div.containerFeed {
	width: 900px;
	height: 35px; /* default: 40px */
	overflow: hidden;
	border: 1px solid grey;
	padding-top: 5px;
	position: relative;
}
 
.containerContainer {
	height: 40px;
	position: relative;
}
 
.containerElemSep {
	height: 40px;
	position: relative;
}
 
.element,
.separator {
	margin: 0;
	padding: 0;	
	line-height: 30px;
	height: 30px;
}
 
.element {
	height: 30px;
	color: #3f7f7f;
	float: left;
	position: absolute;
}
 
.separator {
	position: relative;
	width: 50px;
	color: #9590eb;
	float: right;
	left: 30px;
}

Je continu mes recherches, mais si quelqu'un a une idée, voir même un exemple de script sur le net qui pourrait m'inspirer, je suis preneur.

Merci par avance pour votre aide,
Doki.

PS : n'oublier pas jQuery. Pour ma part je l'ai collé à la racine du site pour faciliter l'appel le temps des tests.