Discussion :

[Esp010]

Bonjour,
Je découvre le language javascript au lycée. Je dois faire un tchat avec les éléments que notre professeur nous a donné (fonction de réception et envoi des messages, réception et envoi des pseudos). Mon tchat est complet, les différentes fonctionnalités sont opérationnelles, tous les éléments (champs de textes, boutons, div, rafraichissement automatique de la liste des messages et des connectés) sont présents dans un tableau. J'ai défini une largeur et une hauteur maximale pour les cellules du tableau, il me faut donc une scroll bar pour voir tous les messages du tchat présents dans la div. Cette scroll bar est constamment descendue pour afficher le dernier message. La scroll bar est rafraichie en même temps que la div pour que lorsqu'un nouveau message apparait, la scroll bar descende et que le nouveau message soit visible par l'utilisateur du tchat.
Je suis conscient que les explications ci-dessus doivent vous paraitre évidentes, je vais donc passer à mon problème.
Imaginons que je veuille regarder un message déjà posté depuis un moment, je remonte la scroll bar. Sauf que la scroll bar se réactualise toutes les secondes donc descend au dernier message toutes les secondes. Je pense que vous imaginez mon problème à lire les anciens messages.
J'ai demandé à mon professeur s'il y avait moyen de bloquer le rafraichissement de la scroll bar par un onClick mais apparement ce n'est pas possible car la scroll bar n'est pas considérée comme un objet.
Je m'en remets donc à vous en espérant avoir des bout de codes pas trop compliqués (ou si possible expliqués pour ne pas copier bêtement du code) sachant que c'est ma première année d'informatique en première grâce à la réforme.
Merci par avance pour votre aide.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var xhr4=(window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
 
	xhr4.onreadystatechange=function()
	{
		if(xhr4.readyState == 4) document.getElementById("msg").innerHTML=xhr4.responseText;
	}
 
	function receptmsg()
	{
		xhr4.open("GET","site créé pour le tchat");
		xhr4.send(null);
		document.getElementById('msg').scrollTop = document.getElementById('msg').scrollHeight;
	}
 
function update()
	{
	nametimer=setInterval("receptname();",1000);
	msgtimer=setInterval("receptmsg();",1000);
	}
// receptmsg et update sont exécutés lorsque l'utilisateur clique sur un bouton Charger qui envoi le pseudo saisi auparavant à une page php.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<table border="1">
<tr>
<td>
	<div id="listemsg">Liste des messages :</div>
	<div id="msg"></div>
</td>
 
</tr>
<tr>
<td>
	<input type="text" id="ecriremsg" placeholder="Entrer votre message">
	<input type="button" value="Envoyer" id="envoimsg" onclick="envoimsg();">
</td>
</tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#msg{width:475px; height:200px; overflow:auto;}

[Bovino]

Avant tout, tu ferais mieux de modifier les callbacks de tes timers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
nametimer=setInterval(receptname,1000);
msgtimer=setInterval(receptmsg,1000);

Voir Les fonctions de rappel (callback) ou les utilisations cachées de eval() pour les explications.

Ensuite, tu ne peux effectivement pas bloquer les scrollbars pour les raisons évoquées par ton professeur : elles sont des éléments du navigateur et non de la fenêtre du navigateur et ne correspondent donc pas à un objet JavaScript.
De toute façon, il te serait impossible de déterminer facilement la raison pour laquelle la scrollbar n'est pas tout en bas.

La solution la plus simple est déjà de forcer le repositionnement en bas du cadre uniquement si de nouveaux messages arrivent. Pour cela et d'après ce que je crois comprendre de ton code, ton appel AJAX devra ne te retourner que les nouveaux messages : s'il n'y en a pas, tu ne fais rien, s'il y en a, tu les ajoutes à ton container puis tu repositionnes la scrollbar.
Bien sûr, cela implique, côté serveur, la sauvegarde des messages déjà affichés (par exemple via un système d'identifiant dans ta BDD).

[Esp010]

Merci pour votre réponse.
Il y a effectivement une sauvegarde des messages déjà affichés sur le serveur. En lisant votre réponse, j'ai pensé à utiliser une fonction qui va compter le nombre de <br> qui séparent les messages : document.getElementById("").innerHTML.split("<br>").length
ce serait stocker dans une variable et à chaque fois que cette dernière augmente cela éxecute la fonction de la réception des messages et du scroll en bas. Mais je viens de me rendre compte que le serveur a une limite de messages (les 30 derniers), je ne peux donc pas compter les <br> car leur nombre sera toujours le même. Je vais réfléchir à une autre solution.

[SpaceFrog]

Avec une formule du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

scrollTop= 30 * hauteur d'une ligne - scrollHeight