11548 sujets

JavaScript, DOM et API Web HTML5

Lien actif pour page courante

Bonjour à tous.

EDIT : Pour illustrer mes propos, j'ai mis une ébauche de mon site en ligne : www.2buzzy.fr

Me voici confronter à un problème que malheureusement je n'arrive pas à résoudre.
Je suis en train de développer mon site perso, j'ai réussi à charger mes différentes pages dans un même div afin de ne pas avoir à recharger tout le design, mais voilà que le menu (deux images cliquables) reste en mode "inactif" quand je suis sur une page spécifique.
Exemple : Je clique sur mon image "Travaux", le contenu de travaux se charge sur ma page, mais l'image "Travaux" reste la même. J'aimerais charger l'image "Travaux2" quand on est sur la page "travaux.php".
Je ne sais pas si je suis clair.
Voici un bref aperçu de mes deux liens menu :
Le HTML :
<div id="contact">
 <a href="contact.php"></a>
 </div>
  <div id="travaux">
  <a href="travaux.php"></a>
 </div>


Le CSS :
#contact a{
	position:absolute;
	margin-left:180px;
	margin-top:118px;
	background: url(img/contact1.png);
	background-repeat:norepeat;
	width:142px;
	height:129px;
}

#contact a:hover{
	position:absolute;
	margin-left:180px;
	margin-top:118px;
	background: url(img/contact2.png);
	background-repeat:norepeat;
	width:142px;
	height:129px;
}

#contactactif a{
	position:absolute;
	margin-left:177px;
	margin-top:118px;
	background: url(img/contact3.png);
	background-repeat:norepeat;
	width:142px;
	height:129px;
}

#travaux a{
	position:absolute;
	margin-left:24px;
	margin-top:149px;
	background: url(img/travaux1.png);
	background-repeat:norepeat;
	width:138px;
	height:125px;
}

#travaux a:hover{
	position:absolute;
	margin-left:24px;
	margin-top:149px;
	background: url(img/travaux2.png);
	background-repeat:no-repeat;
	width:138px;
	height:125px;
}

#travauxactif a{
	position:absolute;
	margin-left:24px;
	margin-top:143px;
	background: url(img/travaux3.png);
	background-repeat:no-repeat;
	width:138px;
	height:125px;
}


En gros quand je suis sur la page "travaux.php", j'aimerais que mon div "travaux" devienne "travauxactif".

L'URL de ma page "travaux.php" chargée retournée par mon navigateur est : /index.php#travaux

Merci d'avance, je suis un peu débutant en javascript, et j'ai hâte d'en apprendre davantage.

Cordialement,

Julien
Modifié par 2buzzy (21 Jul 2011 - 16:16)
Rebonjour,
je pense avoir avancé dans mon débogage, cependant je rencontre encore quelques difficultés.
J'ai enlevé mes background-image dans mes div, afin de gérer le rollover avec le javascript. (donc j'insère mes images directement dans les div). J'ai également modifier ma fonction qui gère l'affichage de mon contenu en dynamique comme suit : (ici on s'intéresse à mon div #contact)

$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('#contact a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #page';
			$('#page').load(toLoad)
		}											
	});

	$('#contact a').click(function(){					  
		var toLoad = $(this).attr('href')+' #page';
		$('#page').hide('fast',loadpage);
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		//MODIFICATION
document.getElementById("travaux").innerHTML  = "<a href=\"travaux.html\" title=\"Mes réalisations\" ><img src=\"img/travaux1.png\" onmouseover=\"javascript:this.src='img/travaux2.png';\" onmouseout=\"javascript:this.src='img/travaux1.png';\" name=\"travaux\"></a>";
		document.getElementById("contact").innerHTML  = "<a href=\"contact.html\" title=\"Contactez-moi\" ><img src=\"img/contact3.png\" name=\"contact\"></a>";
		//FIN MODIFICATION
function loadpage() {
			$('#page').load(toLoad,'',showNewpage())
		}
		function showNewpage() {
			$('#page').show('normal');
		}
		return false;
		
	});

});


Maintenant le problème est que la fonction marche très bien UNE fois, ensuite mon affichage dynamique fonctionne une fois sur deux. (au deuxième clic on est amené sur 2buzzy.fr/contact.html au lieu de 2buzzy.fr/#contact)

Je vous laisse constater l'étendue des dégâts : www.2buzzy.fr
Bonjour,

Au moment du chargement de contenu, il suffit de modifier l'élément de ton menu et de lui rajouter une class (ou de redéfinir directement l'élément, mais c'est moins souple).
Merci de ta réponse.
Cependant avec mon innerHTML, n'est-ce pas ce que je fais ? (j'entends par là, modifier l'élément de mon menu).
Et pourtant ça ne fonctionne qu'une seule fois...
Pourrais-tu expliciter ?
Sans le code HTML de base, difficile de répondre précisément. Mais à priori pas de raison que ça ne fonctionne pas (ça complique juste beaucoup le code JS).
Il suffisait de demander. ^^
Mon menu (composé de deux images)
	<div id="contact">
        <a href="contact.html" title="Contactez-moi" ><img src="img/contact1.png" OnMouseOver="javascript:this.src='img/contact2.png';" OnMouseOut="javascript:this.src='img/contact1.png';" name="contact"></a>
 		</div>
  		<div id="travaux">
        <a href="travaux.html" title="Mes réalisations" ><img src="img/travaux1.png" onmouseover="javascript:this.src='img/travaux2.png';" onmouseout="javascript:this.src='img/travaux1.png';" name="travaux"></a>
 		</div>


et mes deux fonctions de chargement de page (une quand on clique sur l'image Contact et une quand on clique sur l'image Travaux) :

$(document).ready(function() {
						
	var hash = window.location.hash.substr(1);
	var href = $('#contact a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #page';
			$('#page').load(toLoad)
		}											
	});

	$('#contact a').click(function(){
		document.title = "2buzzy | Contact";
		if((window.location.hash)=='#travaux') 
	document.getElementById("travaux").innerHTML  = "<a href=\"travaux.html\" title=\"Mes réalisations\" ><img src=\"img/travaux1.png\" onmouseover=\"javascript:this.src='img/travaux2.png';\" onmouseout=\"javascript:this.src='img/travaux1.png';\" name=\"travaux\"></a>";
		var toLoad = $(this).attr('href')+' #page';
		$('#page').hide('fast',loadpage);
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadpage() {
			$('#page').load(toLoad,'',showNewpage())
		}
		function showNewpage() {
			$('#page').show('normal');
		}
		document.getElementById("contact").innerHTML  = "<a href=\"contact.html\" title=\"Contactez-moi\" ><img src=\"img/contact3.png\" name=\"contact\"></a>";
		return false;
		
	});

});


$(document).ready(function() {
	
	var hash = window.location.hash.substr(1);
	var href = $('#travaux a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #page';
			$('#page').load(toLoad)
		}											
	});

	$('#travaux a').click(function(){
		document.title = "2buzzy | Travaux";
		if((window.location.hash)=='#contact')
		document.getElementById("contact").innerHTML  = "<a href=\"contact.html\" title=\"Contactez-moi\" ><img src=\"img/contact1.png\" OnMouseOver=\"javascript:this.src='img/contact2.png';\" OnMouseOut=\"javascript:this.src='img/contact1.png';\" name=\"contact\"></a>";
		var toLoad = $(this).attr('href')+' #page';
		$('#page').hide('fast',loadpage);
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadpage() {
			$('#page').load(toLoad,'',showNewpage())
		}
		function showNewpage() {
			$('#page').show('normal');
		}
		document.getElementById("travaux").innerHTML  = "<a href=\"travaux.html\" title=\"Mes réalisations\" ><img src=\"img/travaux3.png\" name=\"travaux\"></a>";
		return false;
		
	});

});


Sur le papier ça devrait marcher, je ne comprend pas pourquoi ça marche une seule fois pour chaque lien, et ensuite ça ne fonctionne plus.
Tu peux aussi te rendre compte des erreurs directement sur le site que j'ai mis en ligne pour résoudre ce problème : www.2buzzy.fr
Sujet clos
Aller à