Ancre avec javascript

Version imprimable

15/10/2016, 13h33
MR-SMOOT

Ancre avec javascript
Bonjour,

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

voici mon code.
Code:

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:

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.
15/10/2016, 16h22
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

Quel est le comportement de :

Code:

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

15/10/2016, 21h58
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:

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.
16/10/2016, 10h36
sekaijin

Citation:

Envoyé par 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.
...

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

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

Code:

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:

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