11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
j'ai réalisé un petit script en js avec jquery, tout fonctionne correctement mis à part un petit bug.
Mon anim est simple : j'ai 6 liens sur une image et lorsque je clique sur un des liens sur la droite un div est affiché et il change pour chaque lien.


<div id="liens"> 
       <a href="#slide1" id="slide1">slide1</a>
       <a href="#slide2" id="slide2" >slide2</a>
       <a href="#slide3" id="slide3">slide3</a>
</div


$(document).ready(function(){
	var lien = $("#container a");
	
		$("#container a:first").addClass("active"); 
		$("#slide-panel .slide").hide();
		$("#slide-panel .slide:first").show();
		
		lien.click(function(){
			var current = $("a.active").attr("href"); //on recupere la valeur du href
			lien.removeClass("active");	
			$(this).addClass("active");	
			var target = $(this).attr("href"); 
			if(target == current ){ return false; }; //stop l'anim lorsque l'on est deja sur le lien
			$(".slide").fadeOut(400);
			$(target).fadeIn(400); 
		});
});


Mon bug, lorsque je clique sur un lien mon navigateur vient se mettre a la hauteur du div, il ne reste pas tout en haut de la page.
Il considère mon lien comme une ancre et va se positionner à l'endroit de cette ancre.
je n'arrive pas à trouver comment régler se problème. Je pense que le problème vient de ma fonction js lorsque je selectionne mon lien et que je le mets dans la variable current, mais je n'arrive pas à trouver comment m'en sortir.

Merci à tous
j'ai embêté la communauté pour rien, j'ai trouvé le problème tout seul, après 48 h d'acharnement.
Il suffit d'utiliser la fonction preventDefault(); cela permet d'éviter que le navigateur suive les liens.
La fonction preventdefault() permet d'annuler l'action par défaut d'un evenement.

J'ai trouvé cette astuce dans le tuto suivant sur alsa : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

Voici donc le code pour ceux que ca peut aider :

$(document).ready(function(){ 
    var lien = $("#container a"); 
     
        $("#container a:first").addClass("active");  
        $("#slide-panel .slide").hide(); 
        $("#slide-panel .slide:first").show(); 
         
        lien.click(function(e){ 
           e.preventDefault();
            var current = $("a.active").attr("href"); //on recupere la valeur du href 
            lien.removeClass("active");     
            $(this).addClass("active");     
            var target = $(this).attr("href");  
            if(target == current ){ return false; }; //stop l'anim lorsque l'on est deja sur le lien 
            $(".slide").fadeOut(400); 
            $(target).fadeIn(400);  
        }); 
}); 




Merci à tous,