Overflow-y et scrolltop=scrollheight

**xxkirastarothxx** · 05/12/2008, 16h20

Bonjour, ou rebonjour

Y'a un truc qui me prends la t�te depuis pas mal de temps:
Dans une de mes pages j'ai un div en overflow-y:auto;
le truc c'est que je voudrais qu'au chargement de la page l'ascenseur se trouve en bas du div.
j'ai essay� beaucoup de fa�on, mais �a ne veux pas marcher:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
function load()
{
	var elt = document.getElementById("chat_message");
	elt.scrollTop=elt.scrollHeight;
}
window.onload=load()
-------------------------------------------------------------------
window.onload=function(){document.getElementById("chat_message").scrollTop=document.getElementById("chat_message").scrollHeight;}
-------------------------------------------------------------------
window.onload= document.getElementById("chat_message").scrollTop=300;

et autre...
Y'a bien une fa�on qui fonctionne, c'est de metre un setTimeout(refresh, 2000); mais y'a deux probl�me avec cette solution:
1 => je voudrais que l'ascenceur ne soit en bas qu'au chargement de la page, pas qu'il redescende toute les Xsec
2 => je suis obliger d'attendre les premi�res Xsec avant que le scroll ne se decide � descendre.

Merci a tous d'avance

Pr�cisions et code compl�mentaire:
Ma page est bien complexe, car le div que j'essaye de descendre contient du php inclue par de l'ajax afin de pouvoir actualiser la page sans rafraichir,
Comme un exemple vaut mieux qu'un long discours, voici ma page:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
        if ($_GET['option'] == 'channel')
        {
                require('channel.php');
        }
        else
        {
        if ($_SESSION[CONFIGNAME]['channel'] == NULL AND $_GET['channel'] == NULL)
        {
                $_SESSION[CONFIGNAME]['channel'] = 1;
        }
        if ($_GET['channel'] != NULL)
        {
                $_SESSION[CONFIGNAME]['channel'] = $_GET['channel'];
        }
        $url = "composants/chat/chat.php?channel=".$_SESSION[CONFIGNAME]['channel']."&pseudo=".$_SESSION[CONFIGNAME]['pseudo']."&time=";
?>
		<script type="text/javascript">
			function chat()
			{
			var xhr_object = null; 
			if(window.XMLHttpRequest) // Firefox 
			   xhr_object = new XMLHttpRequest(); 
			else if(window.ActiveXObject) // Internet Explorer 
			   xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   return; 
			} 
			var time_stamp = new Date();
			xhr_object.open("GET", "<?php echo $url;?>"+time_stamp, true); 
			xhr_object.onreadystatechange = function() { 
			if(xhr_object.readyState == 4) document.getElementById( 'message' ).innerHTML = xhr_object.responseText; 
			} 	 
			xhr_object.send(null);
			}
			function load()
			{
				var elt = document.getElementById("chat_message");
				elt.scrollTop=elt.scrollHeight;
			}
			function refresh()
			{
				chat();
				setTimeout(refresh, 2000);
			}
			window.onload=load();
		</script>
		<?php echo "<link href='composants/chat/chat.css' rel='stylesheet' type='text/css' />"; ?>
			<div id='chat_top_menu'>
				<a href='index.php?com=chat&channel=1'>General</a>
				<a href='index.php?com=chat&channel=private'><?php echo PRIVAT; ?></a>
				<a href='index.php?com=chat&channel=3'>Spam</a>
			</div>
			<div id='chat_corps'>
				<div id='chat_message' style='overflow-y: auto;'>
					<div id="message"></div>
				</div>
	            <div id='chat_module'> 
					<?php require "modules.php"; ?>
				</div>
				<div id='chat_footer'> 
					<?php require "form.php"; ?>
				</div>
		        <ul>
					<li><?php echo CHAT_PUBLIC_MESSAGE;?></li>
					<li style='color:#666666'><?php echo CHAT_PUBLIC_MESSAGE_AUTH;?></li>
					<li style='color:#0000FF'><?php echo CHAT_PRIVATE_MESSAGE_AUTH;?></li>
					<li style='color:#FF0000'><?php echo CHAT_PRIVATE_MESSAGE_DEST;?></li>
				</ul>
				</div>
			</div>
        <script type="text/javascript">
            refresh();//On appelle la fonction refresh() pour lancer le script
        </script>
<?php } ?>

**javatwister** · 05/12/2008, 19h45

essaie de lancer load() � la fin de chat() plut�t que sur onload;

**xxkirastarothxx** · 06/12/2008, 00h04

Merci, mais nan �a marche pas, puisque chat() est ex�cut� dans refresh()
Mais bon s'pas grave je crois que je vais laisser comme �a, y'a d'autres probl�mes qui mes sont apparus ^^
genre si un nouveau message arrive dans ma page chat.php, le div de message s'actualisera mais le scroll ne descendra pas si je trouve le moyen de n'ex�cuter load() qu'une seule fois et non a tout les refresh.
Je voulais que �a evite de redescendre toutes les 2sec mais j'aurais �galement aim� que le scroll descende tout de m�me au nouveaux messages.
Donc apr�s plus mure r�flexion, vu mon niveau de connaissance actuel de l'ajax, je pense que le script est au meilleur rapport "qualit�/prise de t�te" ^^

Merci quand m�me

**javatwister** · 06/12/2008, 09h14

l'astuce pour les "chat html" est de n'actualiser l'interface que si des nouveaux messages sont vraiment arriv�s; test c�t� serveur du nombre de messages et comparaison avec l'ancien;
un autre truc consiste � fixer un maximum de messages visibles, qui vaz te permettre d'avoir une fen�tre sans scroll; les pr�c�dents messages sont par exemple consultables via un clic "archives", dans la m�me fen�tre;

**le_chomeur** · 06/12/2008, 11h09

sinon .... une m�thode un peu barbare :

tu appels une m�thode avec un set interval ultra court en faisant ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById('contenu_message').scrollTop +=1500000;

contenu_message est ta div qui scroll

**xxkirastarothxx** · 08/12/2008, 08h53

Envoy� par javatwister

l'astuce pour les "chat html" est de n'actualiser l'interface que si des nouveaux messages sont vraiment arriv�s; test c�t� serveur du nombre de messages et comparaison avec l'ancien;
un autre truc consiste � fixer un maximum de messages visibles, qui vaz te permettre d'avoir une fen�tre sans scroll; les pr�c�dents messages sont par exemple consultables via un clic "archives", dans la m�me fen�tre;

Ohh pas b�te ^^
Surtout que dans mon chat.php je test d�j� s'il y a des nouveaux messages pour jouer un petit son, faudrait que je place la commande js ici.
Le soucis c'est que mon javascript est dans la page m�re, et ce n'est pas consid�r� comme une frame donc j'arrive pas a faire passer le javascript.
J'ai essay� avec un parent.load() mais �a marche pas.
Je vais aussi essay� de placer le div scoll� dans chat.php au lieu de la page m�re, �a peut marcher.
( l'archive je l'ai d�j�, j'ai aussi une plusieurs channel, et �galement une partie priv�e ^^ Mais comme j'affiche quand m�me 25messages je pr�f�rais l'id�e du scroll)
Je test �a (si �a marche j'�diterais ^^)

**xxkirastarothxx** · 08/12/2008, 09h30

Ah bah non �a marche pas si je le met dans chat.php => a chaque refresh le scroll remonte automatiquement.
Il me faudrait un �quivalent de parent.fonction() mais qui passe dans ma fonction ajax.

document.getElementById('contenu_message').scrollTop +=1500000;

Bah j'avais quelques chose d'equivalent (present dans mon code):

window.onload= document.getElementById("chat_message").scrollTop=300

j'avais �galement essay� sans window.onload, et avec et sans le += mais �a ne fonctionne pas :S

**Matthieu2000** · 08/12/2008, 09h50

mets le script � la fin de la page!
et utilise

out.flush()

**xxkirastarothxx** · 08/12/2008, 10h23

Hmmm
dans ma page chat.php ?

j'ai essay� de mettre �a a la fin de page (sachant que le div chat_message est plac� sur mon index.php:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
function load()
{
	var elt = document.getElementById("chat_message");
	elt.scrollTop=elt.scrollHeight;
	out.flush();
}
load();
</script>

j'ai aussi essay� de le placer dans l'index, mais pas de diff�rence :S
Je dois peut �tre placer la function dans mon index et l'appeler du chat.php ?
Je vais faire plusieurs test en attendant une r�ponse

Merci de vous int�resser � moi, �a me fais bien avancer

**xxkirastarothxx** · 08/12/2008, 11h27

Ah du nouveau:

si je laisse mon javascript dans l'index.php:

et que dans mon chat.php je met un

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<input type='button' onclick='javascript:load();' value='test'/>

Au clic la fonction s'execute, j'ai mon alert qui fonctionne, et le scroll qui descend, donc pas besoin de "parent" ou quoi que ce soit d'autre.
Par contre si j'appelle simplement ma fonction:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<script type='text/javascript'>load();</script>

au m�me endrois, bah �a marche pas...
Un id�e ?

**Matthieu2000** · 08/12/2008, 15h20

out.flush()

c'est du php

**xxkirastarothxx** · 08/12/2008, 15h38

avec un out. ?
J'ai rien trouver dans le manuel php la dessus, m'enfin ^^

j'ai donc essay� (� la fin de mon index.php)

j'ai aussi essay� de mettre <?php out.flush();?> avant le javascript, mais le probl�me reste toujours le m�me, et de m�me si je le place dans chat.php.

si je place un <input onclick='javascript:load();' /> dans mon chat.php au clic tout fonctionne, j'ai mon alert et mon scroll qui descend, mais si je l'ex�cute "directement" ( <script type='text/javascript'>load();</script> l� �a marche pas.
(j'ai aussi essay� chacun des cas avec flush() et ob_flush())

**le_chomeur** · 08/12/2008, 16h57

une solution plut�t sympa : http://radio.javaranch.com/pascarell...837038219.html

**xxkirastarothxx** · 10/12/2008, 10h55

Rohhh mais c'est space tout �a :S
Que je le mette dans index.php en fin de page, ou dans chat.php n'importe ou, si je met un onclick='load()' �a fonctionne, mais si je met avec un onload, il se passe rien

s'pas normal quand m�me si ? oO

Je vais all� voir comment est fais le script (du lien) que tu as post�, �a a l'ai interessant, mais je pense que le probl�me serra le m�me :S
J'vais voir �a

Merci

Edit: Arg, j'avais pas fait attention, mais si dans mon chat.php je met un petit:
<script type='text/javascript'>alert('arg');</script>
juste apr�s l'ouverture de session, �a ne marche m�me pas (alors qu'un onclick='alert("arg")' fonctionne toujours aussi correcement... :S
J'y comprends rien

Overflow-y et scrolltop=scrollheight

JavaScript

Discussions similaires

Partager

Partager