Scroller toujours en bas

**ebocha** · 02/02/2009, 21h21

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

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

**ebocha** · 03/02/2009, 08h46

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** · 03/02/2009, 08h50

sinon

Code :

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

obj.scrollTop=obj.scrollHeight

**ebocha** · 03/02/2009, 09h47

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** · 03/02/2009, 09h58

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+

**ebocha** · 03/02/2009, 10h08

voici la fonction qui rafraichit mon div

Code :

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

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 :

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

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é

**E.Bzz** · 03/02/2009, 10h12

Envoyé par ebocha

mais je n obtiens toujours pas le resultat cherché

Voir EDIT ci-dessus

A+

**ebocha** · 03/02/2009, 10h18

ok excuse de ne pas avoir precisé sinon j avais aussi ajouté le edit a mon code et voici ce que j ai

Code :

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

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.

**E.Bzz** · 03/02/2009, 10h24

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 :

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

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 ...

Oui mais non

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 ); 
document.getElementById("chat").scrollTop=document.getElementById("chat").scrollHeight;}
  } );
}
getMessages();

**ebocha** · 03/02/2009, 10h43

merci pour tout sa marche parfaitement

**ebocha** · 09/02/2009, 20h55

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

**E.Bzz** · 10/02/2009, 09h19

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+

**ebocha** · 10/02/2009, 09h40

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

**E.Bzz** · 10/02/2009, 09h59

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 :

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+

**SpaceFrog** · 10/02/2009, 09h59

on pourrait aussi rajouter :

"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 ..."

**E.Bzz** · 10/02/2009, 10h03

Trop tard

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

**ebocha** · 10/02/2009, 10h19

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** · 10/02/2009, 10h37

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** · 10/02/2009, 10h52

Envoyé par ebocha

Le scroller ne remonte pas

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

A+

Scroller toujours en bas

JavaScript

Discussions similaires

Partager

Partager