11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je monte mon site perso et mon menu principal repose sur le plug-in jquery lavalamp. Il me permet de slider sur une énorme div qui contient toutes mes pages. En gros le code html donne :


<div id="menu">
<ul class="nav_ul">
<li id="nav_apropos"><a title="A propos" rel="tag" href="#content_apropos" class="active">A propos</a></li>
<li id="nav_services"><a title="Services" rel="tag" href="#content_services">Services</a></li>
<li id="nav_portfolio"><a title="Portfolio" rel="tag" href="#content_portfolio">Portfolio</a></li>
<li id="nav_contact"><a title="Contact" rel="tag" href="#content_contact">Contact;</a></li>
</ul>
</div>

<div id="content">
<div id="content_apropos"></div>
<div id="content_services"></div>
<div id="content_portfolio"></div>
<div id="content_contact"></div>
</div>


Jusqu'ici tout va bien.

La ou ça se corse (pour moi en tout cas) c'est lorsque j'ai un lien croisé situé dans <div id="content_services"> qui doit rediriger vers <div id="content_contact">.

J'arrive à correctement me déplacer sur ma div mais j'aimerai que l'élément en mouvement de lavalamp qui indique la page en cours dans le menu principal "nav_ul" vienne se caler automatiquement sur "contact" comme lorsque l'on a cliqué directement dessus.

J'ai regardé du côté des différentes propositions de simulation de click que l'on trouve sur les forums mais je ne parviens pas à les mettre en oeuvre.

Mon code javascript donne ça :


$("#nav_apropos a").click(function () {$(".nav_ul li a").removeClass("active");$(this).addClass("active");});
	$("#nav_services a").click(function () {$(".nav_ul li a").removeClass("active");$(this).addClass("active");});
	$("#nav_portfolio a").click(function () {$(".nav_ul li a").removeClass("active");$(this).addClass("active");});
	$("#nav_contact a").click(function () {$(".nav_ul li a").removeClass("active");$(this).addClass("active");});
	$(".nav_ul").lavaLamp({ fx: "backout", speed: 700 });
	$(".contact-lien").click(function () {window.location.href = document.getElementById("#nav_contact a").href;});


.contact-lien étant la class de mon lien croisé dans le contenu et window.location.href = document.getElementById("#nav_contact a").href; une de mes nombreuses tentatives.

En gros je souhaiterai que le click du lien croisé soit répercuté sur le lien de la navigation principale, pour que l'élément en mouvement de lavalamp se cale sur le lien de destination, le lien "#nav_contact a". Mais est-ce que c'est possible ?

J'utilise la version 2 de lavalamp.

J'espère être compréhensible Smiley smile