Discussion :

[tifabulous]

Bonjour,

J'ai une page qui est compos�e de plusieurs vues, que l'on peut atteindre de deux mani�res, par un click ou en scrollant.

L'objectif est de cr�er un code javascript qui va "�couter" les �v�nements de la page pour d�clencher une action, l'affichage de la vue dans la console du navigateur.
Seulement je ne maitrise pas du tout cette partie de javascript.

Le code html :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
<ul id="panel-nav" style="margin-top: -145px;">
    <li style="cursor: pointer;" class="nav-news"><a data-id="news1" href="#scroll-to-news1" class=""><span>Go to the top</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="servicealaclicquot" href="#scroll-to-servicealaclicquot" class="selected"><span>Service à la Clicquot</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="naturallyclicquot3" href="#scroll-to-naturallyclicquot3" class=""><span>Naturally Clicquot </span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="carnet2015" href="#scroll-to-carnet2015" class=""><span>Vendanges Clicquot 2015</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="DiscoverWeAreClicquot" href="#scroll-to-DiscoverWeAreClicquot" class=""><span>Découvrez We Are Clicquot</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="rich" href="#scroll-to-rich" class=""><span>Veuve Clicquot Rich</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="Expression" href="#scroll-to-Expression" class=""><span>Rosé Expression</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="ClicquotMail" href="#scroll-to-ClicquotMail" class=""><span>Clicquot Mail</span></a></li>
    <li class="" style="cursor: pointer;"><a data-id="prix" href="#scroll-to-prix" class=""><span>Le Prix de la femme d'affaires 2014</span></a></li>
</ul>

Jai cr�� un premier code javascript qui me premet de r�cup�rer le nom de la vue, mais je dois lancer le code pour que l'action soit effectu�e.

code javascript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var a = document.getElementsByClassName("selected");
var child = a [0].firstChild;
var txt = child.firstChild.data;
console.log(txt);

Je pense que pour l'ex�cution automatique du code � chaque fois que l'utilisateur change de vue par un scroll ou un clic, je dois utiliser l'�l�ment focus et faire appel � la m�thode addEventListener.
Seulement je ne sais pas si je suis sur la bonne voie et comment m'y prendre.

Une �me charitable peut elle m'aiguiller s'il vous pla�t ?

[steven78700]

Hello,

D�j� pour le lancement de ton code je le mettrais dans le onLoad() de ta page. Comme �a d�s que ta page est charg� ton script se lance.

Ensuite � l'int�rieur je mettrais tous les �couteurs !


Bon courage.

[tifabulous]

Bonjour,

justement je dois r�ussir � cr�er un code qui s'ex�cute de lui m�me uniquement quand l'�v�nement changement de bloc/vue s'effectue par un click ou un scroll sans modifier la partie html.

[tifabulous]

j'ai cr�� un deuxi�me code qui fonctionne � moiti�, le voici :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
window.nomvue = function () {
var a = document.getElementsByClassName("selected");
var child = a [0].firstChild;
var txt = child.firstChild.data;
console.log(txt);
}
 
window.addEventListener("click", nomvue);

il y a deux probl�mes premi�rement il me donne le nom du bloc/vue au moment du click et non celui qui est actif apr�s le click et ensuite j'aimerais que la fonction se d�clenche avec l'�v�nement click mais aussi le scroll.

Merci d'avance pour votre aide

[tifabulous]

Bonjour,

J'ai r�ussis � faire fonctionner comme je le voulais pour le click avec le code suivant :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
window.nomvueclick = function () {
var a = document.getElementsByClassName("hover");
var b = a [0].firstChild;
var c = b.firstChild;
var d = c.firstChild.data;
console.log(d);
}
window.addEventListener("click", nomvueclick);

Pour le scroll j'ai fais �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
window.nomvuescroll = function () {
var a = document.getElementsByClassName("selected");
var b = a [0].firstChild;
var c = b.firstChild.data;
console.log(c);
}
window.addEventListener("scroll", nomvuescroll);

Mais �a ne fonctionne pas.

Quelqu'un pour m'aiguiller s'il vous plait ?

[danielhagnoul]

Exemple (l'�v�nement focus se produit avant l'�v�nement click) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
var nodes = document.querySelectorAll( "#panel-nav a" );
 
for ( var i = 0; i < nodes.length; i++ ){
  nodes[i].addEventListener( "click", function( e ){
    console.log( e.type, e.currentTarget.href, e.currentTarget.dataset.id );
  }, false );
  nodes[i].addEventListener( "focus", function( e ){
    console.log( e.type, e.target, e.currentTarget );
  }, false );
}

C'est plus simple en jQuery :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
$( "a", "#panel-nav" ).on( "click focus", function( e ){
  console.log( e.type, e.currentTarget.href, e.currentTarget.dataset.id );
});