Bonjour les zér0s,

alors voilà, j'ai fait un petit tchat Ajax, et il fonctionne très bien, seulement il y a un petit truc qui commence à devenir gênant.

J'ai réussi jusqu'alors à faire rafraîchir le contenu (ça va là), ensuite à faire que le scroll aille tout en bas de la div de contenu (merci Google :D) mais j'ai dû faire une fonction pour mettre en pause l'actualisation afin de pouvoir voir les messages précédents.

Car oui : impossible de se balader avec le scroller, on revient toujours en bas.
D'un autre côté c'est logique : c'est rafraîchi et c'est configuré pour retourner en bas.

Mais voilà, c'est quand même énervant de devoir cliquer sur un petit bouton pour mettre en pause, regarder puis recliquer pour ré-actualiser.

C'est pourquoi, j'aimerais savoir si vous connaissez un moyen, à la façon des célèbres ShoutBox PhpBB/MyBB & Co, de pouvoir continuer à actualiser les messages mais permettre de naviguer dans les messages sans être embêté par l'actualisation ?

Salut,

Faudrait voir ton code entier de ton tchat pour pouvoir t'aider parce que là, à vue de nez je ne vois pas .

Voici la structure du Tchat

<div id="Tchat">
 <div id="tchat_bar"></div>
 <div id="content-tchat"><!-- Ici les messages sont affichés --></div>
 <div id="add_msg"></div>
</div>

Et voici le code qui actualise les messages :

function affiche_msg()
 {
	var xdr = getXDomainRequest();
	var salon = (!getCookie('saloon')) ? 'general' : getCookie('saloon');
	
	xdr.onload = function() {
		document.getElementById('content-tchat').innerHTML=xdr.responseText;
			var objDiv = document.getElementById("content-tchat");
	objDiv.scrollTop = objDiv.scrollHeight;
	actualize = setTimeout(affiche_msg, 1000);
	}
	
	xdr.open('GET', 'http://webitchat.s-p.fr.nf/webimsg.php?v=1.2&salon='+salon);
	xdr.send();

Ce que je peux te suggérer, c'est d'ajouter un évènement onmousedown sur ta div.

Dans cet event, tu checkes si la position de la souris correspond à la zone de scroll, si oui, tu mets une variable à true.

Au onmouseup, tu mets cette variable à false.

Enfin, lors de ton "refresh", si ta variable est à false, tu scrolles vers le bas.

Ah oui pas idiot du tout, penses-tu que je peux ajouter à cela un onmouseover sur la div entière, car j'aimerais également que quand la personne s'est baladée sur les messages, qu'elle puisse si elle le désire faire des copier, sélections etc.

Pour checker la position de la souris par rapport à la zone de scroll, je ne comprends pas trop, pourrais-tu m'éclairer ?

Oui, bien entendu, le onmouseover est faisable

Ben, tu récupères la position de la souris, tu connais la position et dimensions de ta div et tu peux très aisément savoir la largeur de la scrollbar, donc, je vois pas ce que tu comprends pas.

Ah oui pas bête du tout, je vais aller me renseigner sur les coordonnées de souris

Bon et sinon même si je pense que c'est oui, je demande quand même x')
Puis-je mettre un onmouseover et un onmousedown sur la même div ?

Ben, encore heureux...

Entendu, je me disais aussi

Bien, merci à toi, je vais me lancer là-dedans et donnerai quelques nouvelles en espérant que j'annonce la réussite de ce petit code

Bon amusement

Ton objDiv.scrollTop = objDiv.scrollHeight;, faudrait essayer de le mettre dans une conditionnelle pour qu'il ne se fasse que si le scrollTop en cours n'est pas égal au scrollHeight.

Avec ça, en théorie, ça évitera le retour en bas systématique.

Edit: je ne vois pas du tout l'intérêt d'avoir la position de la souris là...

La raison est pourtant évidente, s'il y a un nouveau message, scrollTop !== scrollHeight,

D'où l'intérêt de savoir ce que fait l'user, par la position de la souris.

Rebonjour,

finalement, j'ai pensé à une alternative, car ça me semble assez casse-tête de mettre en place le système dont nous parlions :
Serait-il codable de faire en sorte que le Tchat ne s'actualise que lorsque le scroll est tout en bas (objDiv.scrollTop = objDiv.scrollHeight), de cette façon, si on veut se balader dans les messages, ça ne s'actualise plus et on peut copier-coller etc ?

C'est faisable, oui, mais (ce n'est que mon avis), disons que ce n'est pas un comportement "naturel", pour l'utilisateur.

C'est à dire ?

Car si j'avais à faire le système énoncé précédemment, je devrais contrôler si la position de la souris est dans la zone de scroll, et lorsque le scroll n'est pas tout en bas contrôler si la souris est dans la div de contenu, et gérer ensuite que si la souris sort de la zone de contenu du tchat ou que le scroll redescend tout en bas on réactualise le Tchat

Par pas "naturel", j'entends le fait que ce n'est pas un comportement habituel, sur un chat... et quand on dérange les pitites habitudes de l'user, ça fait toujours des râleurs

Ben, au pire, joue juste avec onmouseover et onmouseout.

Tu veux dire que quand la souris est sur la zone où sont affichés les messages arrêter l'actualisation ?

Oui c'est plus simple, j'ai essayé avec if(objDiv.scrollTop == objDiv.scrollHeight) etc mais ça ne marche pas, je vais essayer avec ta proposition

Non, non, je ne dis pas de sauter l'actualisation mais le scroll vers le bas.

Oula !
Je vais essayer ça, là j'ai réussi à mettre en place onmouseover : stop actualisation

Edit : j'ai essayé ta méthode, ça fonctionne quand on bouge le scroller, malheureusement si on relâche ça redescend, et on ne peut pas faire de copier-coller

Surtout ton système de rafraîchissement qui est mal conçu à la base, tu devrais utiliser les fonctions permettant la manipulation du DOM (createElement, appendChild, ...) pour gérer l'insertions des messages au fur et à mesure. Ça t'évitera de perdre ton copié/collé et tu pourras gérer facilement le scrolling (sans arrêter le rafraîchissement).

M. Drake > +1

C'est en effet la meilleure méthode je pense, la plus maniable, malheureusement avec les outils cités je ne sais que créer des blocs et leur ajouter du contenu, et des évènements.

Je vais aller lire le tuto sur le DOM pour en savoir un peu plus, mais en attendant j'ai pris la solution onmouseover/onmouseout

Merci à vous de votre attention

De rien, c'est toujours chouette d'aider quelqu'un qui suit les conseils

Héhé

Etant donné que je ne connais pas trop trop ce domaine, serait-il possible de m'orienter un peu vers les outils à utiliser ?

Voici la procédure que je compte faire :

- Afficher les 20 messages, du plus ancien au plus récent, et placer le scroll en bas.
- Appeler une fonction qui sera mise en setTimeout()
- Dans cette fonction vérifier si xdr.responseText est différent de content-tchat.innerHTML
- Si oui, supprimer les X premiers div de content-tchat.innerHTML et rajouter X div récupérées dans xdr.responseText

Il me semble que je devrais utiliser createElement, appenChild, createTextNode etc mais je n'en suis pas trop sûr

C'est bien cela... à quelques détails près...

1) pas besoin de supprimer ce qui est côté client, laisse-lui le loisir de relire ce qui est déjà chargé.

2) vérifie juste s'il y a des nouveaux messages, plutôt que de faire une comparaison (c'est Über lourd)

1)Dac' bon de toute façon j'ai des modérateurs en permanence sur le Tchat, donc si y a trop de trucs hop nettoyage

2)Là je te suis pas... Pour vérifier si il y a quelque chose de nouveau, je dois bien voir si quelque chose a changé comparé à ce qui est déjà chargé non ?
(PS : je comptais faire ça avec un innerHTML|xdr.responseText .length / Non ne me frappez pas x') )

1) à la place, mets plutôt un bouton de nettoyage que l'utilisateur pourra utiliser pour ne nettoyer que chez lui. (même si je pense que c'est vraiment inutile)

2) mais non, voyons, tu stockes l'id du dernier message chargé en session

1)Encore une fois je ne comprends pas comment réaliser cela x') Les messages sont affichés depuis le serveur, je les stocke pas sur l'ordi du client, donc je pourrais bien faire un clean avec innerHTMl="", mais ça réapparaîtrait au prochain rafraîchissement de page ?

2)D'accord, je pense faire ça :
j'envoie en get l'id stocké au préalable dans un cookie, le serveur vérifie si le dernier id de message correspond à celui envoyé en GET, si ça correspond je renvoie une erreur que du côté client le tchat n'interprétera pas, le cas échéant j'ajoute les messages dont l'id est supérieur à celui de la variable get ?
Sinon pour garder le scroll en bas quand on le garde en bas et qu'il y a de nouveaux messages, j'utilise ceci ?

var objDiv = document.getElementById('content-tchat');
if(objDiv.scrollTop == objDiv.scrollHeight) objDiv.scrollTop = objDiv.scrollHeight

1) non, puisque tu ne charges que les nouveaux messages... mais, franchement, pas besoin de cette fonctionnalité, si l'utilisateur ne veux plus voir les plus anciens messages, il ne scrollera tout simplement pas si haut.

2) c'est exactement cela mais stocke en session, pas en cookie (ça t'évitera des vérifications pour s'assurer que c'est bien un entier positif et que cet id existe bien dans ta bdd.

3) pas besoin de contrôler la position du scroll:

onmouseover? -> pas de scroll vers le bas
onmouseout || par défaut? -> scroll vers le bas

1) Oui c'est vrai tu as raison, je laisse tomber pour ça, au contraire si le scroll ne redescend pas tout seul ça peut être bénéfique de pouvoir naviguer paisiblement

2) Ah oui je ne l'ai pas précisé mais le Tchat est une extension de navigateur, ce qui veut dire qu'il est généré intégralement par un fichier JS, donc pas la possibilité de créer de session sur le site :/

3) En effet vu comme ça c'est plus simple

On se rapproche, il ne reste que le 2) à élucider