11548 sujets

JavaScript, DOM et API Web HTML5

Problème - Href

Salut tous le monde,

Voilà çà fais un petit moment que je galère, j'ai d'abord fais une Nav à l'aide de CSS et de Javascript que vous pouvez voir ici sur votre gauche :

http://imp3rium.free.fr/test/

Puis j'ai intégrer une feuille de Javascript pour créer un effet de slide lors d'un clique sur la Nav. Cependant, depuis les liens URL en "_blank" ne fonctionne plus alors qu'ils fonctionnaient avant l'effet slide ... Donc je ne sais pas trop comment je peux m'y prendre.

Mon code de base:
<ul id="navigation">
            <li><a href="#home" title="Home">HOME</a></li>
            <li><a href="#about" title="About">ABOUT</a></li>
            <li><a href="#folio" title="Folio">FOLIO</a></li>
            <li><a href="#cv" title="CV">CV</a></li>
            <li><a href="mailto:x._imp3rium_.x@hotmail.fr" title="Contact">CONTACT</a></li>
            <li class="tumblr"><a href="http://imp3rium.tumblr.com/" target="_blank" title="Tumblr"></a></li>
            <li class="facebook"><a href="http://www.facebook.com/Imp3RiuM" target="_blank" title="Facebook"></a></li>
            <li class="xbox"><a href="http://live.xbox.com/fr-FR/profile/profile.aspx?pp=0&amp;GamerTag=xxImp3RiuMxx" target="_blank" title="XBOX"></a></li>
        </ul>


ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 25%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
	display: block;
	margin-left: -2px;
	width: 150px;
	height: 50px;
	background-color:#111;
	background-repeat:no-repeat;
	background-position:center center;
	-khtml-border-bottom-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
    -moz-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
	font-family: "Intro";
	font-size: 22px;
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
}

ul#navigation li a:hover{
	    background-color: #F06;
}

ul#navigation .tumblr a:hover {
	    background-color: #2c4762;
}

ul#navigation .facebook a:hover {
	    background-color: #3b5998;
}

ul#navigation .xbox a:hover {
	    background-color: #6C0;
}

ul#navigation .tumblr a{
    background-image: url(../img/nav/tumblr.png);
}

ul#navigation .facebook a{
    background-image: url(../img/nav/facebook.png);
}

ul#navigation .xbox a{
    background-image: url(../img/nav/xbox.png);
}


 <script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-135px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-135px'},200);
                    }
                );
            });
        </script>


L'effet slide en Javascript que j'ai ajouté après:
$(document).ready(function(){
	
$('#navigation li a').click(function() {
	var elementClicked = $(this).attr("href");
	var destination = $(elementClicked).offset().top;
	$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-0}, 1500 );		   
	return false;
});	

});


Merci d'avance.
Salut

Ton problème est dû à ça: 
return false;

dans ta fonction que tu as attribué à tous les éléments "#navigation li a" y compris tes éléments avec l'attribut target="_blank"; alors par conséquence une fois cliqué ta fonction sur click s’exécute et interdit aucune autre action par défaut du navigateur par le "return false;"

Alors ce que je te propose c'est de distinguer tes 4 premiers éléments par un sélecteur quelconque, soit par une classe, soit en les spécifiant à l'aide de ce qui est déjà existant, par exemple $('#navigation li a[href="#home"] , #navigation li a[href="#about"] , ...') , et tu diriges ton événement clique qui anime la ScrollBar sur cette sélection:


$(document).ready(function(){
$('#navigation li a[href="#home"] , #navigation li a[href="#about"] , #navigation li a[href="#folio"] ,#navigation li a[href="#cv"]').click(function() {
	var elementClicked = $(this).attr("href");
	var destination = $(elementClicked).offset().top;
	$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-0}, 1500 );		   
	return false;
});	
});


J'espère que ça ira
Merci c'est génial, j'ignorais justement comment faire çà avec du Javascript, j'en ai encore appris ce soir Smiley cligne Merci encore pour la rapidité.
Sujet clos
Aller à