Scroller toujours en bas

Version imprimable

02/02/2009, 21h21
ebocha

Scroller toujours en bas

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
02/02/2009, 22h18
Bovino

Tu peux placer une div vide sous la fenêtre du chat et appeler la méthode scrollIntoView(true) dessus
03/02/2009, 08h46
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:

1 2 3 <div id="chat" style="height:530px;overflow:auto;" class="blog_msg"> </div>
03/02/2009, 08h50
SpaceFrog

sinon

Code:

obj.scrollTop=obj.scrollHeight
03/02/2009, 09h47
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:

1 2 3 <div id="chat" style="height:530px;overflow:auto;" class="blog_msg" obj.scrollTop=obj.scrollHeight> </div>
03/02/2009, 09h58
E.Bzz

Citation:

Envoyé par ebocha

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+

voici la fonction qui rafraichit mon div

Code:

1
2
3
4
5
6
7
8
9
 
function getMessages()
{
  new Ajax.Updater( 'chat', 'messages.php', {
    onSuccess: function() { window.setTimeout( getMessages, 1000 ); }
  } );
}
getMessages();
</script>

et après avoir ajouté le code que tu m a donné voici ce que j obtien

Code:

1
2
3
4
5
6
7
8
9
10
 
function getMessages()
{
  new Ajax.Updater( 'chat', 'messages.php', {
    onSuccess: function() { window.setTimeout( getMessages, 1000 ); 
    obj.scrollTop=obj.scrollHeight;}
  } );
}
getMessages();
</script>

mais je n obtiens toujours pas le resultat cherché

03/02/2009, 10h12
E.Bzz

Citation:

Envoyé par ebocha

mais je n obtiens toujours pas le resultat cherché

Voir EDIT ci-dessus ;)

A+
03/02/2009, 10h18
ebocha
ok excuse de ne pas avoir precisé sinon j avais aussi ajouté le edit a mon code et voici ce que j ai
Code:

1 2 3 <div id="chat" style="height:530px;overflow:auto;" class="blog_msg" document.getElementById("chat")> </div>
mais le resultat est le même.

Citation:
Envoyé par ebocha
ok excuse de ne pas avoir precisé sinon j avais aussi ajouté le edit a mon code et voici ce que j ai
Code:

1 2 3 <div id="chat" style="height:530px;overflow:auto;" class="blog_msg" document.getElementById("chat")> </div>
mais le resultat est le même.
Heu ... :koi:
Oui mais non :aie:
Code:

1 2 3 4 5 6 7 8 function getMessages() { new Ajax.Updater( 'chat', 'messages.php', { onSuccess: function() { window.setTimeout( getMessages, 1000 ); document.getElementById("chat").scrollTop=document.getElementById("chat").scrollHeight;} } ); } getMessages();

03/02/2009, 10h43
ebocha

merci pour tout sa marche parfaitement
09/02/2009, 20h55
ebocha

Excusez moi si je reviens encore mais je pense que je me suis planté. Le code marche parfaitement mais le problem maintenant est qu'on ne peut plus remonter le scroller pour lire les anciens messages.

Il reviens toujours en bas. Y a t il un moyen de le maintenir a une autre position et qu il ne soit en bas que par defaut (quand on ne change pas sa position ?)

Merci de bien vouloir m aider
10/02/2009, 09h19
E.Bzz

Citation:

Envoyé par ebocha

Il reviens toujours en bas.

Ben oui : à chaque appel à getMessages() ...

Tu peux utiliser une variable booléenne pour empêcher le scroll (en fait pour ne pas modifier document.getElementById("chat").scrollTop ).
Tu pourras ainsi l'empêcher lorsque le div "chat" a le focus (onfocus) et le réactiver lorsqu'il ne l'a plus (onblur).

A+
10/02/2009, 09h40
ebocha

Pour vous dire la verité je ne comprends pas bien pouvez vous êtes plus explicite et me donnez un exemple ci possible.

Citation:

Envoyé par ebocha

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:

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

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

Code:

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

et pris en compte dans ta fonction :
Code:

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+

10/02/2009, 09h59
SpaceFrog

on pourrait aussi rajouter :

Citation:

"vous pourriez pas me filer le code tout fait ?
venir le taper sur mon clavier ?
mais eventuellement je vous demanderais de ne pas toucher mon salaire à ma place ..."
10/02/2009, 10h03
E.Bzz

Trop tard :aie:

La bonne nouvelle étant que je ne prends que 20% :mouarf:

Salut

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

Code:

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:

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 ?

10/02/2009, 10h37
ebocha
ok j ai maintenant declaré la variable dans l entete. mais le resultat est le même. Le scroller ne remonte pas
Code:

1 2 3 4 <script> var blnScroll = true; // Autorise (ou pas) le scroll auto </script>
10/02/2009, 10h52
E.Bzz

Citation:

Envoyé par ebocha

Le scroller ne remonte pas

8O

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

A+