Discussion :

[ebocha]

SAlut a vous

j'ai un soucis et toutes mes recherches dans les forums ont été sans succès. j ai fais un chat et j affiche les message dans une balise div. mis mon problème est que je voudrais maintenir le scroller de cette balise div toujours en bas pour que l utilisateur puisse voir les dernier messages.

merci de bien vouloir m aider

[Bovino]

Tu peux placer une div vide sous la fenêtre du chat et appeler la méthode scrollIntoView(true) dessus

[ebocha]

Salut

j'ai fais ce que tu m a demandé mais le resultat est toujours le même. En fait ce que je ve c est que le scroller de la balise div qui affiche les messages soit toujours en bas. Voici le code que j utilise

Code :

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

1
2
3
 
<div id="chat" style="height:530px;overflow:auto;" class="blog_msg">
</div>

[SpaceFrog]

sinon

Code :

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

obj.scrollTop=obj.scrollHeight

[ebocha]

excusez, vous ne m avez pas dis ou je dois mettre ce code. Sinon voici ce que j ai fais et je n ai aucun resultat

Code :

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

1
2
3
 
<div id="chat" style="height:530px;overflow:auto;" class="blog_msg" obj.scrollTop=obj.scrollHeight>
</div>

[E.Bzz]

excusez, vous ne m avez pas dis ou je dois mettre ce code.

A priori à la fin de la fonction qui rafraichit le contenu de ta div "Chat" ...

EDIT : et dans ton code, "obj" => document.getElementById("chat")

A+

[E.Bzz]

j ai fais un chat et j affiche les message dans une balise div.

Et pour ce faire, tu appelles périodiquement (toutes les quelques secondes, je suppose) la fonction getMessages().
Ton problème étant que c'est cette même fonction qui replace le scroller en bas (comme tu nous l'avais demandé ).

Je te proposais donc, en variable globale

Code :

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

var blnScroll = true;  // Autorise (ou pas) le scroll auto

gérée au niveau du div "chat" :

Code :

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

<div id="chat" ... onfocus="blnScroll=false;" onblur="blnScroll=true;"

et pris en compte dans ta fonction :

Code :

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

1
2
3
4
5
6
7
8
function getMessages()
{
  new Ajax.Updater( 'chat', 'messages.php', {
    onSuccess: function() { window.setTimeout( getMessages, 1000 ); 
if (blnScroll)  // Ne positionne le scroll en bas que lorsque le div "chat" n'a pas le focus
document.getElementById("chat").scrollTop=document.getElementById("chat").scrollHeight;}
  } );
}

A+

[ebocha]

Salut

j ai fais comme vous me l avez dit mais sa ne fonctionne pas bien. Voici la balise div

Code :

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

1
2
3
 
<div id="online" style="height:20px;overflow:hidden;" class="blog_msg">
</div>

et voici le script de rafraichissement tel que vous me l avez donné

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script>
function getMessages()
{
  new Ajax.Updater( 'chat', 'messages.php', {
    onSuccess: function() { window.setTimeout( getMessages, 1000 ); 
if (blnScroll)  // Ne positionne le scroll en bas que lorsque le div "chat" n'a pas le focus
document.getElementById("chat").scrollTop=document.getElementById("chat").scrollHeight;}
  } );
}
getMessages();
</script>

ai je oublié quelque chose ?

[ebocha]

ok j ai maintenant declaré la variable dans l entete. mais le resultat est le même. Le scroller ne remonte pas

Code :

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

1
2
3
4
 
<script>
var blnScroll = true;  // Autorise (ou pas) le scroll auto
</script>

[E.Bzz]

Le scroller ne remonte pas

Ne te reste plus qu'à relire tout ça ... à tête reposée

A+