menu indenté dynamiquement ?

**mariedesmet** · 07/03/2006, 16h12

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

!

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload:yourehere(1)

l'html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mariedesmet** · 07/03/2006, 16h21

d'ailleurs au fait le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

thisSec.style.textIndent = '10px';

ne fonctionne pas sur firefox !

**Matthieu2000** · 07/03/2006, 16h28

utilise les feuille de style
http://web.developpez.com/faq/html/?page=LIENS

**mariedesmet** · 07/03/2006, 16h31

oui mais je ne vais pas savoir faire ca dynamiquement même si j'utilise un style ...

**Matthieu2000** · 07/03/2006, 16h39

code javascript :0

**denisC** · 07/03/2006, 16h53

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).

**mariedesmet** · 07/03/2006, 16h55

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 !

**denisC** · 07/03/2006, 17h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mariedesmet** · 07/03/2006, 17h06

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 ...

**denisC** · 07/03/2006, 17h25

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....

**mariedesmet** · 07/03/2006, 17h35

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 ...

**denisC** · 07/03/2006, 17h42

Envoyé par mariedesmet

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

**mariedesmet** · 07/03/2006, 17h48

je te promet...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload='yourehere();'>

et enfin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[/code]

**mariedesmet** · 07/03/2006, 19h19

autant pou moi...

j'ai rajouté ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

menu indenté dynamiquement ?

JavaScript

Discussions similaires

Partager

Partager