scroller un div grace au JS

Marsh Posté le 10-08-2006 à 17:39:25

voilà, je suis sur la refonte d'un site et j'ai enlevé tous les position:absolute des div et là, surprise, le scroll JS ne fonctionne plus, j'ai tout essayé mais je m'y suis cassé les dents [:antyu] faut dire que je ne connais que très peu le JS. Bref, je me suis dit : je vais refaire une fction tte propre et toute nouvelle, j'ai donc trouvé ceci :http://www.adp-gmbh.ch/web/js/scroll.html et je l'ai adapté :

le JS

Code :

function move_up() {
mon_div.scrollTop -=2;
var timer=setTimeout('move_up();',20);
}
function move_down() {
mon_div.scrollTop +=2;
var timer=setTimeout('move_down();',20);
}

l'html

Code :

<div id="mon_div">
<div id="text"> bla bla bla</div>
</div>

et enfin le CSS :

Code :

#mon_div{
width:230px;
height:240px;
overflow:hidden;
}
#text{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #000000;
text-align: justify;
}

ça marche plutot pas mal mais le probleme (ha enfin un probleme !) c'est que je n'arrive pas a l'arreter.

voilà le dernier bout de code :

Code :

<a href="javascript:;" onMouseOut="clearTimeout(timer);" onMouseOver="move_up()"><img src="imgs/scroll_up.gif" name="up1"></a>

et le même pour le scroll down.

si quelqu'un pouvait m'aider a arreter le scroll ça serait génial, et pourquoi cette méthode ne fonctionne pas ?

merci !! :jap:

Reply

Marsh Posté le 10-08-2006 à 17:39:25

Reply

Marsh Posté le 11-08-2006 à 15:16:27

la notion de block, ça te parle ?
essaye ça :

Code :

var timer;
function move_up() {
    mon_div.scrollTop -=2;
    timer=setTimeout('move_up();',20);
}
 
function move_down() {
    mon_div.scrollTop +=2;
    timer=setTimeout('move_down();',20);
}

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris

Reply

Marsh Posté le 11-08-2006 à 16:37:32

marche po...
oui ça me parle les block, mais je vois pas en quoi ça pourrait d'aider, vais me renseigner vite fait

Reply

Marsh Posté le 11-08-2006 à 16:37:32

marche po...
oui ça me parle les block, mais je vois pas en quoi ça pourrait d'aider, vais me renseigner vite fait

edit: tiens, un ptit bug du forum hardware j'ai cliqué trop vite et pouf ! 2 messages

Message édité par bis2kt le 11-08-2006 à 16:38:26

Reply

Marsh Posté le 11-08-2006 à 18:17:14

les blocks, la porté des variables, tout ça... ici, tu redéfinis ta variable dans chaque fonction, et elle n'est pas visible de l'extérieur, donc ton clearTimeout(timer) c'est équivalent à clearTimeout(null). Il faut que ton timer soit visible sur ta page.

Et ça marche au moins avec Firefox en tout cas.

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris

Reply

Marsh Posté le 16-08-2006 à 12:39:19

effectivement, ça fonctionne très bien... sauf dans ma page.

Reply

Marsh Posté le 16-08-2006 à 13:16:25

bha fait péter ta page complète...

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris

Reply

Marsh Posté le 16-08-2006 à 14:34:39

je me suis mal exprimé, c'est à dire que ça fonctionne mais mal.
Le scroll s'arrete (merci Brissou :jap: ) mais il est très lent et la console m'affiche :

Code :

Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C document.getElementById() à la place.
Fichier source : http://www.(...).com/artiste3.php?id=7
Ligne : 22

alors que le scroll focntionne tres bien et sans message d'erreur si je fais une page test comme ça :

Code :

<html>
<head>
<script type="text/javascript">
var timer;
function move_up() {
mon_div.scrollTop -=2;
timer=setTimeout('move_up();',20);
}
function move_down() {
mon_div.scrollTop +=2;
timer=setTimeout('move_down();',20);
}
</script>
<style type="text/css">
<!--
#mon_div{
width:230px;
height:240px;
overflow:hidden;
}
#text{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #000000;
text-align: justify;
}
-->
</style>
</head>
<body>
<div id="mon_div">
<div id="text">
mon texte ... bla bla ... bla bla ... bla bla ... bla bla ... bla bla ...
</div>
</div>
<a href="javascript:;" onMouseOut="clearTimeout(timer);" onMouseOver="move_up()">UP</a>
<a href="javascript:;" onMouseOut="clearTimeout(timer);" onMouseOver="move_down()">DOWN</a>
</body>
</html>

bref... [:m1sery]

Reply

Marsh Posté le 16-08-2006 à 15:02:19

... très drôle. Je me suis dit : "tiens et si je testais sous un autre navigateur ?"
donc j'ai essayé sous mon browser préféré (Opera) et ça fonctionne très bien, puis sous le pire brower que je connaisse (IE), pareil.
Donc je me suis dit : pourquoi ça marche pas sous Firefox ???

... (période de réfléxion intense)

... [:icon3] et si je fermais la console Javascript ?? ...

c'est toujours pareil :pfff: on perd 2 jours sur un truc à la #@?!%!! ...

Message édité par bis2kt le 16-08-2006 à 15:08:54

Reply

Marsh Posté le 16-08-2006 à 15:03:33

bha il te dit de faire

Code :

document.getElementById(mon_div).scrollTop -= 2;

au lieu de

Code :

mon_div.scrollTop -= 2;

à vu de nez

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris

Reply

Marsh Posté le 16-08-2006 à 15:03:33

Reply

Marsh Posté le 16-08-2006 à 15:04:06

étrange le coup de la console...

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris

Reply

Marsh Posté le 16-08-2006 à 15:10:37

bah à mon avis c'est juste que firefox (ou le pc sur lequel je taf) sont pas assez intelligent pour faire un affichage dans la console et en même temps executer le code, donc ça lag un peu...

Reply

Marsh Posté le 16-08-2006 à 15:24:20

hum... ok ok.

Donc ça marche

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris

Reply

scroller un div grace au JS

Sujets relatifs:

Leave a Replay