menu indenté dynamiquement ?

Version imprimable

j'en reviens encore à vous ... je dois terminer un projet pour jeudi (le dernier de mon stage ... (oulala :? ) ) et j'ai un petit soucis je voudrais vraiment faire au mieux et je ne suis pas très satisfaite de ce que j'ai fait jusque là ... même si pour une fois j'ai trouvé toute seule :lol: !

voilà, le but : indenter (+ changer de couleur) le lien qui correspond à la page que je consulte...
j'ai réussi mais quand je charge ma page, il y aun décalage de 3 secondes avant l'indentation.
de plus je voudrais ne pas utiliser d'argument mais je ne sais pas si c'est possible ...

le code javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript" language="javascript"> var name = 'Template_sub_page'; function yourehere(i) { var end = 2; thisSec = document.getElementById('link' +i) var i; for (i=1; i<=end; i++){ if (thisSec.innerHTML == name) { thisSec.style.color = '#666666'; thisSec.style.textIndent = '20pt'; thisSec.style.textDecoration ='none'; thisSec.style.fontWeight ='bold'; } } } </script>
le onload :

Code:

<body onload:yourehere(1)

l'html :
Code:

1 2 3 <li><a id="link1" href="template_sub_page.html">Template_sub_page</a></li> <li><a id="link2" href="templates_questions.html">templates_questions</a></li>
si anybody has an idea ... elle est la bienvenue ...

merci encore

07/03/2006, 16h21
mariedesmet

d'ailleurs au fait le

Code:

thisSec.style.textIndent = '10px';

ne fonctionne pas sur firefox !
07/03/2006, 16h28
Matthieu2000

:idea: utilise les feuille de style
http://web.developpez.com/faq/html/?page=LIENS
07/03/2006, 16h31
mariedesmet

oui mais je ne vais pas savoir faire ca dynamiquement même si j'utilise un style ...
07/03/2006, 16h39
Matthieu2000

Citation:

<style>
a:active
{
color : #666666;
text-decoration : none ;
text-indent : 20px ;
font-weight: bold;
}
</style>

code javascript :0
07/03/2006, 16h53
denisC

Re: menu indenté dynamiquement ?

Citation:

Envoyé par mariedesmet

de plus je voudrais ne pas utiliser d'argument mais je ne sais pas si c'est possible ...

Ca c'est possible. Il suffit d'utiliser window.location.href en faisant un indexOf du href qui est dans ton lien. De cette façon, tu determines dynamiquement le lien qui correspond à la page actuelle.

Pour le décalage, le textIndent me parait très bien, et je suis fort étonné que ça ne marche pas sous Firefox.... Et pour le décalage, à mon avis tu ne pourras pas y faire grand chose (sauf à faire le traitement coté serveur, mais ça dépends de ton sujet).
07/03/2006, 16h55
mariedesmet

le décallage... c'est résolu grâce à padding-left... ca ca marche dans les deux ...

je vais tenté le a href !

mais c compliqué pour moi !

Citation:

Envoyé par mariedesmet

le décallage... c'est résolu grâce à padding-left... ca ca marche dans les deux ...

je vais tenté le a href !

mais c compliqué pour moi !

Meuh non!!!!

Juste un:
Code:

1 2 3 4 5 6 7 8 9 var container = document.getElementById('identifiant_du_container_des_liens); var ancres = container.getElementsByTagName('a'); for (var i=0;i<ancres.length;i++) { if (window.location.href.indexOf(ancres[i].href,0)>=0) { //Ce lien est le lien actuel ancres[i].style.leftPadding=... } }
Bonne chance :wink:

07/03/2006, 17h06
mariedesmet

:? oups j'ai peur de poser la question...

mais 'identifiant_du_container_des liens' je dosi le remplacer par quoi chez moi !

'link' + i ???

excuse- moi je suis perdue ...
07/03/2006, 17h25
denisC

Citation:

Envoyé par mariedesmet

:? oups j'ai peur de poser la question...

mais 'identifiant_du_container_des liens' je dosi le remplacer par quoi chez moi !

'link' + i ???

excuse- moi je suis perdue ...

Tes liens, apparement, ils sont dans une liste à puces (ul/li). Donc tu mets un id à ton ul (id="liste_de_liens") et tu utilises celui là.

C'est juste pour eviter de faire la vérification sur toutes les liens de ta page, qui à priori n'ont rien à voir dans l'histoire....
07/03/2006, 17h35
mariedesmet

oki moi comprendre...

j'ai fait tout ça! ça marche a merveille d'ailleurs (merci bcp)

mais uniquement si je click sur le lien...
et moi j'ai besoin du lien indenté au moment ou la page est chargée ...

tu vois quand je fais un F12 de ma page ... les liens sont affichés normalement... pour que l'identation se fasse il faut que je clique sur le link. ... (plaire à mon chef de stage !):)

oulala ... j'en ai encore des choses à apprendre ...
07/03/2006, 17h42
denisC

Re: menu indenté dynamiquement ?

Citation:

Envoyé par mariedesmet

<body onload='yourehere()'>

Ca fait pas effet ça? C'est quoi cette histoire d'il faut clicquer 8O

je te promet...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript" language="javascript">
 
function yourehere(){
	var container = document.getElementById('liste_de_liens');
	var ancres  = container.getElementsByTagName('a');
		for (var i=0;i<ancres.length;i++) {
			if (window.location.href.indexOf(ancres[i].href,0)>=0) {
					//Ce lien est le lien actuel
					 ancres[i].style.paddingLeft= '10px';
					 ancres[i].style.color = '#666666';
					 ancres[i].style.textDecoration ='none';
					 ancres[i].style.fontWeight ='bold';
					}
				}
			}
 
</script>

Code:

<body onload='yourehere();'>

et enfin

Code:

1
2
3
4
5
6
 
<ul id="liste_de_liens">
<li><a href="untitled-1.html">First link</a><br /><br /></li>
<li><a href="templates_questions.html">Second link</a><br /><br /></li>
<li><a href="#">Third link</a><br /><br /></li>
</ul>

et je suis obligée de clicker sur le premier lien pour que ça fonctionne !

:cry: [/code]

07/03/2006, 19h19
mariedesmet
autant pou moi...

j'ai rajouté ça
Code:

1 2 if (window.location.href.toLowerCase().indexOf(ancres[i].href.toLowerCase(),0)>=0) {
j'avais écris mon avec une minuscule et le titre de mon fichier avec une majuscule ...
et donc impossible de comparer

voilà

encore un tout tout grand merci ... :)