Scrolling

Répondre
KiwiSlice
le 20/10/2005 à 21:02
KiwiSlice
Svp quelqu'un pourrais m'aider je trouve rien qui répond à mes besoins sur le net.

Je veut simplement faire un défilement de texte de haut en bas à l'aide d'un onmouseover sur 2 boutons ( up et down )

Exemple :

Bouton Up

Texte ici
Texte ici
Texte ici
Texte ici

Bouton Down

et je voudrais ne voir que 4 lignes à la fois comme dans mon exemple
KiwiSlice - The fruity taste of kiwi
Bzh
le 20/10/2005 à 23:46
Bzh
Tu peux le faire en simple html avec css, sans javascript !!!!


entre <head> et </head>
<script language="javascript">

var Timer;
var Pas = 3;

function moveLayer(Sens)
{
if(document.getElementById)
Objet = document.getElementById("Contenu");
else
Objet = document.all["Contenu"];
if(parseInt(Objet.style.top) + (3*Sens) > 0)
Objet.style.top = "0px";
else
Objet.style.top = (parseInt(Objet.style.top) + (3*Sens)) + "px";
Timer = setTimeout("moveLayer(" + Sens + ");", 50);
}
</script>


entre &lt;body&gt; et &lt;/body&gt;
<div id="Support" style="position:relative;width:250;height:150px;overflow:hidden;border:1px solid #000000">
<div id="Contenu" style="position:absolute;width:250;height:150px;left:0;top:0">

bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>

</div>
</div>
<a href="" onmouseover="javascript:moveLayer(1);" onmouseout="javascript:clearTimeout(Timer);">Haut</a>
<a href="" onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);">Bas</a>


Bye...
Meeper
le 29/10/2005 à 12:12
Meeper
salut j'ai testé ton script ca marche bien mais je me pose une question la variable "pas" elle sert a quoi ??
LA GLOBULE
le 29/10/2005 à 13:37
LA GLOBULE
Tu peux le faire en simple html avec css, sans javascript !!!!


Premiere ligne du code source :

<script language="javascript">


...
Bzh
le 30/10/2005 à 21:10
Bzh
Nan !!! Ce que je voulais dire c' est qu' il y a deux façons de le faire : javascript ou css (quoi que, maintenant que j' y réfléchie, ch' ui moin sur...) !!!! smiley Et puis vous aviez bien compris ce que je voulais dire...

Sinon, oui il y a une petite erreur =>
<script language="javascript">

var Timer;
var Pas = 3;

function moveLayer(Sens)
{
if(document.getElementById)
Objet = document.getElementById("Contenu");
else
Objet = document.all["Contenu"];
if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
Objet.style.top = "0px";
else
Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
Timer = setTimeout("moveLayer(" + Sens + ");", 50);
}
</script>



Voili, voilou... Ciao...
Bzh
le 23/12/2005 à 20:59
Bzh
Heu !!! Pour le pas, c'est le nombre de pixel de déplacement à chaque incrémentation ! smiley Enfin, je me comprends...

Ciao...
totototo
le 12/11/2006 à 16:26
totototo
salut,

merci bcp pour le script, c'est exactement ce qu'il me faut :)

Juste un petit detail que je trouve genant. Autant lorsque l'on appuye sur le bouton "haut" le scrolling s arrete bien a la premiere ligne, autant lorsque l'on appuye su le bouton "bas", le scrolling continue a l'infini et affiche du blanc apres le texte.

Y a t il un moyen de bloquer le scrolling a la derniere ligne du texte ?

merci d'avance pour vos reponses

S
webandgie
le 27/02/2009 à 16:36
webandgie
Merci pour tout Bzh

Avec mon collgue, on a trouv un moyen d'arrter le dfilement du texte par la taille du contenu par rapport au contenant :

dans le

<head><script language="javascript">

var Timer;
var Pas = 8;

function moveLayer(Sens)
{
if(document.getElementById)
Objet = document.getElementById("Contenu");
else
Objet = document.all["Contenu"];
if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
{
Objet.style.top = "0px";
}
else if(parseInt(Objet.style.top) + (Pas*Sens) < -428)
{
Objet.style.top = "-428px";
}
else
Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
Timer = setTimeout("moveLayer(" + Sens + ");", 50);
}
</script></head>


et pour un dplacement non pas par mouvement de la souris mais par clic sur bouton flche haut et flche bas :

flche haut :
<a href="javascript:" onfocus="this.blur()" onmousedown="javascript:moveLayer(1);" onmouseup="javascript:clearTimeout(Timer);"><img src="images/texte_fleche_haut.gif" width="12" height="12" hspace="22" border="0" /></a>


votre texte (dans le <script> dans le <head>, il est prcis que mon texte fait environ (500px-la taille de contenant, d'o -428px):
<div id="Support" style="position:relative;width:542px;height:150px;overflow:hidden;border:0px solid #000000">
<div id="Contenu" style="position:absolute;width:542px;height:150px;left:0;top:0">
<p>blablablabla</p>
</div>
</div>


flche bas :
<a href="javascript:" onfocus="this.blur()" onmousedown="javascript:moveLayer(-1);" onmouseup="javascript:clearTimeout(Timer);"><img src="images/texte_fleche_bas.gif" width="12" height="12" hspace="22" border="0"/></a>


... texter
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours