Discussion :

[MR-SMOOT]

Bonjour,

j'ai un �v�nement qui sert afficher plus d'article quand on clique sur bouton plus.

voici mon code.

Code :

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

1
2
3
4
5
var plus = document.querySelector('.plus');
var row2 = document.querySelector('.row2');
plus.addEventListener('click',function(e) {
    row2.style.display = 'block';
},false);

la classe row2 est un bloc au debut il a un display : none quand je clique sur le bouton plus il s'affiche tout fonctionne bien jusqu'a maintenant.

ma question c'est que je veux ajouter un autre evenement en meme temps quand je clique sur plus il affiche le row2 et en meme temps le scroll descend vers le bas

J'ai test� cela mais sa ne fonctionne pas.

Code :

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

1
2
3
plus.addEventListener('click',function() {
        window.scrollTo(0,document.body.scrollHeight);
    },false);

mais quand j'ai rajout� setTimeout() a la fonction windows.scrollTo() sa fonctionne bien.

donc je veux savoir si c'est possible de faire cela sans mettre un temp manuellement et merci.

[sekaijin]

normal

lorsque tu click le div n'est pas affich� le scroll s'ex�cute donc jusqu'au bas de la page qui ne contient pas le div.

peut �tre par l�
https://davidwalsh.name/detect-node-insertion
A+JYT

[danielhagnoul]

Quel est le comportement de :

Code :

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

1
2
3
4
plus.addEventListener('click',function(e) {
  row2.style.display = 'block';
  window.scrollTo(0,document.body.scrollHeight);
},false);

[MR-SMOOT]

@sekaijin
je sais mais moi je cherche une solution pour ne pas donner un timeout manuellement le syst�me d�tecte si y'a le div ou pas.

@danielhagnoul
Le row2 s'affiche mais le scroll ne descend pas il reste fix
mais si je fais cela

Code :

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

1
2
3
4
plus.addEventListener('click',function(e) {
  row2.style.display = 'block';
  setTimeout(function(){ window.scrollTo(0,document.body.scrollHeight); }, 10);
},false);

le scroll descend apr�s 10ms.

[sekaijin]

@sekaijin
je sais mais moi je cherche une solution pour ne pas donner un timeout manuellement le syst�me d�tecte si y'a le div ou pas.
...

le lien que je t'ai donn� traite justement de la detection du changement dans le DOM
en clair il r�agit lorsque le DOM est modifi� I.E. le DIV est ajout�.

le principe est comme toujours avec le DOM la programmation �v�nementielle.
lorsque l'utilisateur clique sur faire ceci
lorsque le DOM est modifi� faire cela
ect.

A+JYT

[MR-SMOOT]

j'ai pas bien compris le tuto
j'ai test� cela mais sa ne fonctionne pas
mon js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var row2 = document.querySelector('.row2');
plus.addEventListener('click',function(e) { 
    row2.style.display = 'block';
},false);
 
var insertListener = function(e){
	if (e.animationName == "nodeInserted") {
		 window.scrollTo(0,document.body.scrollHeight);
	}
}
 
document.addEventListener("webkitAnimationStart", insertListener, false);

mon css

Code css :

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

1
2
3
4
5
6
.row2
{
    display: none;
    animation-duration: 2s;
    animation-name: nodeInserted;
}