Réglage overflow

Salut, j'y connais rien en développement mais c'est la détection d'évènement via javascript qui te sera utile à mon avis.

Tu as un screen de ton soucis? du code css/html?

Bonsoir à vous,

Voici une image schématisant ce que je souhaiterais :

Ensuite, voici le bug en 3 images :

• 
  Alors voilà, ça c'est le tchat sans nouveau message, avec le scrollbar en bas après l'avoir descendu avec la molette. Je voudrais que le scrollbar soit toujours en bas, qu'il s'y mette automatiquement.
• 
  Là on remarque qu'a la réception d'un nouveau message, la scrollbar reste sur le dernier et cache le nouveau, il faudrait qu'elle se mette automatiquement sur le nouveau.
• 
  Enfin, voilà le résultat après être descendu avec la souris.

Au niveau du code, lequel désire tu ? Tout les fichiers du tchat ? On peut peut être se contacter par mail ?

Ca serait sympa que tu fasse un tuto là dessus avec jQuery par exemple Creatiq. J'en ai trouvé mais ils sont en Anglais et j'y comprend pas grand chose, surtout que le JS c'est pas ce que je préfère ^^ Merci pour ton aide :)

Ps : on se moque pas du thème de mon site svp :D

Hello, il faut plutôt faire ça en JavaScript.

Imaginons que "history" contient tous tes évènements. (par exemple, dans ton cas: tous les messages)

document.getElementById("history").scrollTop = document.getElementById("history").scrollHeight;

Il faut placer cette ligne de code: au chargement de page et à chaque évènements (que ce soit les tiens ou ceux des autres)

Par contre, tu auras un petit soucis:
Si une personne remonte la scrollbar pour relire la discussion et qu'il y a un nouvel évènement, la scrollbar se mettra automatiquement en bas. (Ce qui peut être gênant si tu as un grand publique :))

Voilà :)

Merci d'avoir répondu :)

Si j'ai bien compris je dois placer ceci dans la page tchat.php qui gère le tchat ?

Car je me suis inspiré du tuto proposé par le site pour développer mon tchat.

En fait je n'ai pas compris, history est un div ou est-ce l'id de mon message ?

C'est l'id qui contient tous les messages.
Je ne sais pas comment tu as construit ton code html mais par exemple:

<div id="history">
  <p>
    <span>19:20</span>
    <span>John:</span>
    <span>Salut comment ça va?</span>
  </p>
  <p>
    <span>19:20</span>
    <span>John2:</span>
    <span>Très bien & toi?</span>
  </p>
</div>

hum, j'ai suivi ce que tu as dit et ça ne fonctionne pas :/

Ça devrait fonctionner pourtant. As-tu bien mis la propriété overflow-y à scroll/auto? (Pour l'id qui englobe tes messages)

Exemple:

<style type="text/css">
#history {
  overflow-y: auto;
  height: 300px;
}
</style>
...
<div id="history">
  ...
  <p>
    <span>12:23</span>
    <span>Jean:</span>
    <span>Salut</span>
  </p>
  ...
<div>
...
<script>document.getElementById("history").scrollTop = document.getElementById("history").scrollHeight;</script>

En effet j'avais oublié de mettre overflow-y: auto;

J'avais juste mis overflow: auto; bref. Erreur corrigé ! Merci :)

En revanche le problème persiste au niveau de la réception d'un nouveau message en ajax...

Dois je mettre la fonction dans la page qui j'ai tout le javascript ? Soit cette page :

var url="tchatAjax.php";
var lastid=0;
var timer = setInterval(getMessages,5000);
$(function(){
    $("#tchatForm form").submit(function(){
        clearInterval(timer)
        showLoader("#tchatForm");
        var message = $("#tchatForm form textarea").val();
        $.post(url,{action:"addMessage",message:message},function(data){
            if(data.erreur=="ok"){
                getMessages();
                $("#tchatForm form textarea").val("");
            }
            else{
                alert(data.erreur);
            }
            timer = setInterval(getMessages,5000);
            hideLoader();
        },"json");
        return false;
    })
});

function getMessages(){
    $.post(url,{action:"getMessages",lastid:lastid},function(data){
            if(data.erreur=="ok"){
                $("#tchat").append(data.result);
                lastid=data.lastid;
            }
            else{
                alert(data.erreur);
            }
        },"json");
        return false;
}
function showLoader(div){
    $(div).append('<div class="loader"></div>');
    $(".loader").fadeTo(500,0.6);
}

function hideLoader(){
    $(".loader").fadeOut(500,function(){
        $(".loader").remove();
    });
}

Merci :)

Super ça marche ! Merci pour tout :)