11548 sujets

JavaScript, DOM et API Web HTML5

Arrêter la rotation au click

Bonjour,
J'ai ENCORE une problème de rotation dans l'un de mes script.
Sur la page d'accueil de mon site il y a un système de "news" qui défilent. Normalement lorsque l'on clique dans la boîte de la news, le défilement arrête. Sauf que ce n'est pas ce qu'il se passe.

La rotation arrête si l'on clique d'abord dans les miniatures, mais pas si on laisse la défilement se faire puis qu'ensuite on clique dans la boîte.

Pourtant dans mon script c'est bien indiquer...

Voici la page en question

Mon script:
$(document).ready(function(){
	$("#newsChange ul a[href='#n1']").parent("li").addClass("thumbHover");
	$("#container").css("height","420px");
	$("#left .news").css("position","absolute").hide();
	$("#left .news:eq(0)").show().addClass("active");
	
	$("#left .news").click(function(){
		clearInterval(auto);
	});
	$("#newsChange ul a").click(function(){
        clearInterval(auto);
                
		$("#left .news").fadeOut().removeClass("active");
		$(this.hash).fadeIn().addClass("active");
		
		$("#newsChange li").removeClass("thumbHover");
		$(this).parent("li").addClass("thumbHover");
		return false;
	});
	$("#newsChange .browse").click(function(){ 
		return false; 		//on annule la réécriture de la barre de menu
	});
	
	$(".scrollable").scrollable({
		"circular":true,
		"keyboard":false
	});
        
	var auto = setInterval('changerDeNews()', 10000);
	
});



Et là en écrivant ce post, je viens d'avoir un "flash". J'ai récemment combiner plusieurs script dans un seul fichier. Ce pourrait-il qu'il y est un conflit avec un autre scritp?
Bonjour,

Peut-être que je mi prend mal mais je n'ai aucun problème. Quel navigateur utilise-tu ? J'ai essayer avec opera, firefox et rekonq.

Par contre le js peut être amélioré :
var auto = setInterval('changerDeNews()', 10000);

C'est laid et utilise inutilement eval, ce qui peut empêcher certaines optimisations de l'analyseur js (setInterval).
var auto = setInterval(changerDeNews, 10000);


Il y a 4 appel à $("#left .news"), Utilise une variable, ça sera plus rapide et moins consommateur de mémoire (même si ce n'est pas énorme)

	var $news = $("#left .news"), auto;

	$news.css("position","absolute").hide()
	.click(function(){
		clearInterval(auto);
	})
	.eq(0).show().addClass("active");

	//Je pense qu'il serais mieux de faire aussi une variable pour le li active (mais ne sachant pas ce qu'est this.hash et n'eyant pas regarder la structure html je ne m'avance pas trop [smile])
	$("#newsChange ul a").click(function(){
		clearInterval(auto);

		$news.fadeOut().removeClass("active");
		$(this.hash).fadeIn().addClass("active");
		$("#newsChange li").removeClass("thumbHover");
		$(this).parent("li").addClass("thumbHover")
		return false;

	});


Pour chipoter pendant que j'y suis Smiley lol :
jQuery() supporte un contexte pour la recherche d'élément. D'ailleurs, les gens ne l'utilise pas assez et l'on voit souvent $(this).find(…) au lieu de $(…, this)

//sans context
$("#newsChange ul a")
//…
$("#newsChange ul a[href='#n1']")
//…
$("#newsChange li")
//…
$("#newsChange .browse")
//…

//avec context
var newsChange = document.getElementById("newsChange") //ou $.find("#newsChange") je crois
$("ul a", newsChange)
//…
$("ul a[href='#n1']", newsChange) //on peux aussi utiliser [url=http://api.jquery.com/filter/].filter[/url] du match précédant ($("ul a", newsChange).click(/**/).filter("[href='#n1']" ) ou "[href='#n1']", je ne sais pas [ohwell])
//…
$("li", newsChange)
//…
$(".browse", newsChange)
//…
Merci pour ta réponse,
Mais là j'avoue que tu m'as perdu!

L'erreur se produit sur tous les navigateurs. Pour le reproduire, il faut laisser tourner les news, sans toucher au thumbnails juste en dessous. Ensuite, il y a une vidéo à la 2e news par exemple, si je clique dessus, la vidéo joue... et puis la news change au boue de 10 sec comme prévue... mais comme j'ai cliqué dans la boîte de news, normalement la rotation aurait dû s'arrêter.

J'ai tenté de faire les modifications dont tu parles, mais je ne suis pas sûr de l'avoir fait correctement et le bug est toujours là.

Voilà le code avec les modif...
$(document).ready(function(){
	var newsChange = document.getElementById("newsChange");
	$("ul a[href='#n1']", newsChange).parent("li").addClass("thumbHover");
	$("#container").css("height","420px");
	
	var $news = $("#left .news"), auto;
	$news.css("position","absolute").hide().click(function(){
		clearInterval(auto);
	}).eq(0).show().addClass("active");
	
	$("ul a", newsChange).click(function(){
        clearInterval(auto);
                
		$news.fadeOut().removeClass("active");
		$(this.hash).fadeIn().addClass("active");
		
		$("li", newsChange).removeClass("thumbHover");
		$(this).parent("li").addClass("thumbHover");
		return false;
	});
	$(".browse", newsChange).click(function(){ 
		return false; 		//on annule la réécriture de la barre de menu
	});
	
	$(".scrollable").scrollable({
		"circular":true,
		"keyboard":false
	});
        
	var auto = setInterval(changerDeNews, 10000);
	
});


Le "this.hash" sert à cibler l'élément cliquer si je me souvient bien.
Bon finalement je suis revenue à mon ancien code parce que la rotation n'arrêtait plus du tout, même au clique d'un thumbnail. Cette partie-là était correct avant les modif.
Sujet clos
Aller à