Scroll automatique d'un div

Version imprimable

19/08/2006, 17h24
keisuke

Scroll automatique d'un div

Bonjour,
Voilà, je voudrais savoir, comment, faire pour, que la barre de défilement, d'un div, soit toujours en bas.( la position du scroll en bas du div).
Je me fais peut-être pas comprendre par, tous, alors, si c'est le cas, merci, de me demander, ce que vous ne comprenez pas.
D'avance Merci,

Cordialement,
Keisuke
19/08/2006, 17h55
FremyCompany

Code:

Div.srollTo(0, Div.offsetHeigth * 1.5)

?
19/08/2006, 18h16
keisuke

J'te remercie, d'avoir répondu, mais pourrais tu m'éxpliqué comment, tu l'applique ?

Merci quand meme

Cordialement,
Keisuke

comme tu veux, sur setInterval, ca ma parait simple... dans ton HTML tu mets cela :
Code:

1 2 3 4 5 <script type="text/javascript"> setInterval(function() { document.getElementById("ID").scrollTo[...] }, 1000) </script>

19/08/2006, 19h05
keisuke
désolé, je suis débutant, en javascript, et j'ai toujours pas réussi:
Code:

1 2 3 4 5 <script language="javascript" type="text/javascript"> setInterval(function() { document.getElementById("list_message").scrollTo[...] }, 1000) </script>
je voudrais que la fonction s'éxécute toute seul, toutes les 5 seconde(par exemple), et pour infos, l'id de mon div, c'est "list_message".

D'avance Merci

Cordialement,
Keisuke
19/08/2006, 20h36
FremyCompany

le [...] était à remplacer par

Code:

(0, document.getElementById("ID").offsetHeight * 1.5)

:?

Alors, j'ai testé en mettnt ça:
Code:

1 2 3 4 5 <script language="javascript" type="text/javascript"> setInterval(function() { document.getElementById("list_message").scrollTo(0, document.getElementById("list_message").offsetHeight * 1.5) }, 1000) </script>
Mais rien, la scroll bar, reste toujours en haut du div. Elle ne descend pas.
Merci quand meme
Si tu peux me faire un exemplesur une page html, que tu m'envoie, ça serais super sympa, mais bon, si quelqu'un a une autre solution, je suis preneur.

Cordialement,
Keisuke

bonjour,

Pour un petit défilement avec redémarrage (si tu veux que le défilement ne redémarre pas enlève la condtion else de la fonction défile).

Code:

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
 
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
#idDiv{
overflow: auto;
width: 200px;
height: 100px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var chrono;
var htDiv;
var offsetDiv;
var elDiv;
var pas=2;
function initVar()
{
  elDiv =document.getElementById("idDiv");
  htDiv = elDiv.scrollHeight;
  offsetDiv = elDiv.offsetHeight;
  demarre();
}
 
function demarre()
{
   elDiv.scrollTop = 0;
   chrono=setInterval("defile()",100);
}
function defile()
{
  if (elDiv.scrollTop+offsetDiv<htDiv)
     elDiv.scrollTop +=pas;
  else
  {
      clearInterval(chrono);  //redémarrage
      setTimeout("demarre()",5000); //5 secondes
  }
}
 
 
//-->
</script>
 
 
</head>
 
<body onload="initVar()" onbeforeunload="clearInterval(chrono)">
<div id="idDiv">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla<br><br>
</div>
 
</body>
 
</html>

Pour avoir le scroll en bas à l'ouverture de la page :

Code:

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#idDiv{
overflow: auto;
width: 200px;
height: 100px;
}
 
//-->
</style>
<script type="text/javascript">
<!--
function scrollEnBas()
{
 var elDiv =document.getElementById("idDiv");
 elDiv.scrollTop = elDiv.scrollHeight-elDiv.offsetHeight;
}
 
//-->
</script>
 
</head>
 
<body onload="scrollEnBas()">
<div id="idDiv">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla<br><br>
</div>
 
</body>
 
</html>

21/08/2006, 15h41
FremyCompany

Son but est seulement de faire un effet "Console" (le scroll bar est toujours en bas)
21/08/2006, 19h32
Auteur
Citation:

Envoyé par FremyCompany

Son but est seulement de faire un effet "Console" (le scroll bar est toujours en bas)

d'accord. Dans ce cas :
Code:

1 2 3 4 5 6 function scrollEnBas() { var elDiv =document.getElementById("idDiv"); elDiv.scrollTop = elDiv.scrollHeight-elDiv.offsetHeight; }
suffit ? Non ? Le scroll reste en bas, même lors d'un ajout (il suffit de rappeler la fonction).

Pour ce qui est du scrollTo() ou du scrollBy(), curieusement j'ai une erreur lors de l'appel. J'ai fait quelques recherches : j'ai l'impression que ces fonctions ne s'appliquent qu'à objet window.
21/08/2006, 20h00
FremyCompany

Citation:

Envoyé par Auteur

Pour ce qui est du scrollTo() ou du scrollBy(), curieusement j'ai une erreur lors de l'appel. J'ai fait quelques recherches : j'ai l'impression que ces fonctions ne s'appliquent qu'à objet window.

Oui, tu as raison ;)

Voila pourquoi mon code ne marchait pas ;)
Dans ce cas, il a une méthode très simple :
(le *2 est juste une mesure preventive)

Code:

obj.scrollTop=(obj.offsetHeigth*2)
21/08/2006, 23h22
Auteur
Citation:

Envoyé par FremyCompany

Code:

obj.scrollTop=(obj.offsetHeigth*2)

euh sans vouloir être désagréable :oops: , je crois que tu n'as pas lu mon bout de code :
Code:

1 2 3 var elDiv =document.getElementById("idDiv"); elDiv.scrollTop = elDiv.scrollHeight-elDiv.offsetHeight;
:lol:

scrollTop : position du curseur ;
+ offsetHeight : hauteur affichée de l'élement ;
= scrollHeight : hauteur totale de l'élement.
22/08/2006, 10h35
FremyCompany

Si si, j'avais lu... mais je dois dire que j'avais pas percu le principe ;)
22/08/2006, 11h50
keisuke

Franchement, merci !!!
Je vous remerci, mais j'aurais d'autre question.
Je ne sais pas, si je commence un nouveau topic, ou pas ?
Mes questions, son toujours a propos d'un div:
- comment rafraichir un div automatiquement
- comment inséré du text dans un div, soit par un input, soit par une requête sql ?
22/08/2006, 11h54
FremyCompany

Si tu as besoin du serveur pour mettre ta DIV à jour, tu dois passer par AJAX

Pour ce qui est de rajouter du texte à une div :

Code:

div.innerHTML+="Du <b>html</b>."

ou (mieux)

Code:

div.appendChild(document.createTextNode("Du Texte (éèêë)"))
22/08/2006, 12h03
keisuke

merci de ta réponse très rapide.
Est-ce que tu sais comment, faire en AJAX pour rafraichir ?
Merci encore
22/08/2006, 12h06
FremyCompany

Oui, mais je te conseille de lire un tutoriel ;)
22/08/2006, 12h09
keisuke

merci, encore...
Et escuse moi de t'avoir embêté avec mes questions....

Cordialement,
Keisuke