scroller un div grace au JS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : scroller un div grace au JS

bis2kt

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:

Publicité

brisssou

8-/

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

bis2kt

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

bis2kt

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

brisssou

8-/

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

bis2kt

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

brisssou

8-/

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

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

bis2kt

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]

bis2kt

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

brisssou

8-/

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

Publicité

brisssou

8-/

étrange le coup de la console...

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

bis2kt

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

brisssou

8-/

hum... ok ok.

Donc ça marche

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

FORUM HardWare.fr

Programmation

HTML/CSS

scroller un div grace au JS

Sujets relatifs
[JS/DOM] Bug sous IE, l'image se s'affiche pas ! [RESOLU]	Scroller la fenetre pour afficher un élement
faire scroller du text hors d'un textField ?	Impossible de scroller une div qd une image se trouve en dessous ?
tableau + scroller	[Java]Fenetre de scroll: comment scroller automatiquement vers le bas?
[FlashMX] Scroller des objets/textes/clips	[Oracle] SQL+ Impossible de scroller a droite
JAVA 2D & scroller un JPanel	Scroller automatiquement en bas une JTextArea dans un JScrollPane ?
Plus de sujets relatifs à : scroller un div grace au JS

Page générée en 0.071 secondes