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;
}