11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'aurais besoin que sur mon site à page unique, le menu fixe qui mène à des ancres, soit graphiquement repérable. Comme si le lien restait à son statu "hover" une fois cliqué dessus.

site : (supprimé)

Idéalement je souhaiterais que même sans cliquer sur les liens mais simplement en scrollant jusqu'à "about" et "contact" que le soulignement des liens change en fonction d'où on se trouve sur la page (en fonction des ancres)

D'avance merci.
Modifié par josquin (25 Feb 2013 - 08:56)
Re,



La logique de la chose doit être comme ceci :

onclick du lien 1{
$(‘#id_truc_1’).css(‘souligner : true’);
$(‘#id_truc_2’).css(‘souligner : false);
$(‘#id_truc_3’).css(‘souligner : false);
}
onclick du lien 2{
$(‘#id_truc_1’).css(‘souligner : false);
$(‘#id_truc_2’).css(‘souligner : true);
$(‘#id_truc_3’).css(‘souligner : false);
}

etc...



je suis pas un amateur de javascript, mais je pence que l'algo est correct.

EDIT : Après le problème avec ça c'est si l'utilisateur se trouve dans une autre "zone" d'ancre, celle ci ne sera pas soulignée, car il n'y a pas eu de clic effectué, et se sera l'autre 'ancre' qui sera souligner.
La solution à se problème suivant est trop complex pour moi.

tu peux t'aider de ce site http://www.provence-pad.com/dap/ pour le menu. si tu clic dessus ça le met en surbrillance mais si tu défile, sa change pas la surbrillance, est ce vraiment génant? a toi de voir.
Modifié par JuseN (15 Feb 2013 - 16:09)
Merci beaucoup pour ces pistes.
Le lien que tu donnes est effectivement assez proche. Bien qu'ayant une connaissance proche de 0 en javascript j'ai l'impression que les 3 scripts du site sont pour le défilement de la page (j'ai à peu près les mêmes sur mon site). Je vais regarder de plus prés.

Par contre effectivement le menu ne change pas tout seul en fonction de la zone d'ancre où se trouve le visiteur. Sur un plan ergonomique c'est vraiment embêtant (on a le lien contact qui est en avant tout en se trouvant sur une autre "rubrique" par exemple).
J'ai trouvé ce que je voulais : http://haatchcreative.com
C'est apparemment on.scroll.js et jquery-1.7.2.min.js qui seraient concernés.

En les utilisant dans ma page ainsi que son CSS, ça ne fonctionne pas.

Quelqu'un aurait une idée?
Modifié par josquin (16 Feb 2013 - 14:12)
Super, merci beaucoup. Je pense que cet exemple sera effectivement beaucoup plus simple à comprendre.
Je vais regarder ça en détail.

Si javascript est désactivé (je ne savais pas que c'était possible) il n'y aura plus de scroll automatique entre les rubriques et effectivement peut-être plus non plus d'état actif sur le menu.. A vérifier.
Encore merci.
Bonjour,

Cette question a déjà été posée sur ce forum.
Ceci devrait t'inspirer : LIEN,
ou bien le dernier post de cette page Smiley smile .

N.B.: il restera peut-être le cas du js désactivé ...

Cordialement,
Lddsoft