Page 1 sur 2

Défillement de texte de gauche à droite

Posté : 01 févr. 2006, 17:26
par zobmac
Merci pour ce code qui marche très bien mais comment faire pour un défilement de gauche à droite.
Je suis "hyper archi nul sous-sous-débutant sous sous néophyte" en java, j'ai déjà du mal à copier coller aux bons endroits, mais j'ai quand même essayé de modifier le code en mettant des
"+" à la place des "-" et vice versa mais bien sûr ça marche pas et je ne comprend pas le java, ni le javanais d'ailleurs.
Bref merci à qui me dira comment défiler de gauche à droite.
merci à tous de vous pencher sur mes ptites misère
CyberCiao
ZM

Code : Tout sélectionner

<script type="text/javascript"> var defile1;// l'element a deplacer var psinit = 580; // position horizontale de depart var pscrnt = psinit; function textedefile() { if (!defile) defile = document.getElementById('defile'); if (defile) { if(pscrnt < ( - defile.offsetWidth) ){ pscrnt = psinit; } else { pscrnt+= -1; // pixel par deplacement } defile.style.left = pscrnt+"px"; } } setInterval("textedefile()",20); // delai de deplacement </script>

Posté : 01 févr. 2006, 20:11
par Cyrano
Tiens, essaye ça :
<script type="text/javascript">
/* <![CDATA[ */
var defile;// l'element a deplacer
var psinit = -170; // position horizontale de depart
var pscrnt = psinit;
function texteDefile()
{
    if (!defile)
    {
        defile = document.getElementById('defile');
    }
    if (defile)
    {
        if(pscrnt > (defile.offsetWidth + 410) )
        {
            pscrnt = psinit;
        }
        else
        {
            pscrnt+= 1; // pixel par deplacement
        }
        defile.style.left = pscrnt+"px";
    }
}
setInterval("texteDefile()",20); // delai de deplacement
/* ]]> */
</script>
Il faudra peut-être ajuster selon la longueur de ton texte :
- ici : var psinit = -170; : c'est la gauche du texte au point de départ : donc si ton texte dépasse au départ, rallonge la valeur;
- ici aussi : if(pscrnt > (defile.offsetWidth + 410) ) : en principe ici tu n'auras pas besoin de modifier, c'est le point où le texte disparait vers la droite.

Posté : 01 févr. 2006, 21:03
par albat
J'étais tout disposé à répondre à ta demande quand j'ai vu que tu mélangeais Java et Javascript. :shock:
C'est une confusion que j'estime impardonnable. Plus encore quand je vois ça ! :tir2:

Posté : 01 févr. 2006, 21:09
par albat
En terminale, j'ai eu la chance d'avoir un excellent prof de maths
(que 17 ans après mon bac, je vénère encore !) :agenouille:
Il nous avait appris que les maths (mais c'est valable pour tout le reste)
sont un jeu où il faut savoir être "simple", mais aussi... "élégant" !

Ce script est simple, tout en étant parfaitement opérationnel et valide xHTML.
C'est une réussite que je salue sans détour.
Mais son auteur a malheureusement manqué d'un peu d'élégance...
pscrnt += -1; // pixel par deplacement 
Ça abîme tout, hein ?... :(
Une écriture "moins moche" serait :
pscrnt -= 1;
Mais le fin du fin :
pscrnt--;
C'est tout de même plus beau, non ? ;)

En tout cas, chapeau ! :merci:

Posté : 01 févr. 2006, 21:26
par starkeus
Merci Lareine!!
Et sinon tu as une version avec un texte défilant du bas vers le haut?
sinon je vais essayer de le faire.
:wink:

Posté : 01 févr. 2006, 21:30
par starkeus
var defile;// l'element a deplacer
var pyinit = 580; // position horizontale de depart
var pxinit = 100; // position verticale de depart
var p_y = pyinit;
var p_x = pxinit;      
//défilement horizontale   
function texteDefileH() {
   if (!defile) defile = document.getElementById('defile');
   if (defile) {
      if(p_y < ( - defile.offsetWidth) ){
         p_y = pyinit;
                } else {
         p_y+= -1; // pixel par deplacement
      }
      defile.style.left = p_y+"px";
   }
}
//défilement verticale
function texteDefileV() {
   if (!defile) defile = document.getElementById('defile');
   if (defile) {
      if(p_x < ( - defile.offsetHeight) ){
         p_x = pxinit;
                } else {
         p_x+= -1; // pixel par deplacement
      }
      defile.style.top = p_x+"px";
   }
}

Posté : 01 févr. 2006, 23:36
par zobmac
Bon rien n'a fonctioné pour moi et je ne comprends rien
Ni d'ailleurs cette histoire de confusion java/javascript
le code commence par

Code : Tout sélectionner

<script type="text/javascript">
j'ai bo ne rien connaître au javanais c'est comme le port-salut c'est écrit dessus: JAVASCRIPT
donc je vois pas bien où j'ai confondu quoi
j'ai jamais parlé de JAVA
Ceci-dit messieurs les pros moi je n'y comprend rien mais je fais de mon mieux et pour l'instant ça marche pas de gauche à droite.....
J'ai total respect pour vous tous sur les forums car grace à vous on peut parfois apprendre et c'est bô de partager sa science et de prendre le temps d'aider les crétins comme moi.
ceci-dit je comprends pas le 1/4 du tiers du dixième de tout ça et si je m'y met c'est parce que je prépare un site pour essayer de promouvoir mon travail à mondre coût. et oui je suis pas informaticien, mais un pôvre artiste qui crève de faim et essaye de faire un site bô pour vendre son art et s'en sortir avant dêtre à l'armée du salut.


allez, merci quand même et bonne bourre à tous
ZM

Posté : 01 févr. 2006, 23:56
par Cyrano
On peut difficilement t'aider à corriger sans voir le code que tu as testé. Si ça ne fonctionne pas, c'est parce que tu as omis un détail. Le code que je t'ai indiqué est parfaitement fonctionnel chez moi, il n'y a pas de raison pour que ça ne fonctionne pas chez toi.


Au passage, j'ai déménagé le sujet sur le forum approprié pour ne pas pourrir le forum des développeurs.

Posté : 02 févr. 2006, 14:12
par zobmac
Cyrano ton code marche pas sur ma page

Posté : 02 févr. 2006, 14:36
par zobmac
Bon en fait CYRANO ton code marche très bien tout seul mais pas avec un autre.
je m'explique j'ai 2 textes à défiler "defile1" et "defile2" qui défilent de droite à gauche mais je voudrais que defile2 aille de gauche à droite et defile1 reste de droite à gauche.
Quand je met ton code sur une page vierge ça marche, mais si je le met avec defile1 ça bloque. je joint donc le code intégral de la page. Si tu vois la lumière je te lèche les pieds d'avance.
merci
ZM

(pour info c'est la page "erreur 400" de mon site en préparation"

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>ERRARE HUMANUM ESTE</title> <style type="text/css"> <!-- #defile1 { position:absolute; left:228px; top:101px; width:381px; height:36px; z-index:4; } #defile2 { position:absolute; left:257px; top:350px; width:382px; height:38px; z-index:3; } #global { position:relative; width:700px; height:400px; z-index:1; background-color: #FFFFCC; margin: auto; top: 50px; } #Layer1 { position:absolute; width:700px; height:135px; z-index:2; top: 149px; left: 3px; } .Style1 { font-size: 18px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; color: #999999; } body { background-color: #000000; } #global #Layer1 .Style1 a { color: #FF0000; text-decoration: underline; } .Style3 { font-size: 36px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; text-decoration: none; } .Style5 {color: #FF0000; font-style: italic; font-family: Arial, Verdana, Helvetica, Sans-serif; font-size: 24px; font-weight: bold; } #Layer2 { position:relative; width:311px; height:53px; z-index:5; margin: auto; top: 30px; } --> </style> <script type="text/javascript"> var defile1;// l'element a deplacer var psinit = 580; // position horizontale de depart var pscrnt = psinit; function textedefile1() { if (!defile1) defile1 = document.getElementById('defile1'); if (defile1) { if(pscrnt < ( - defile1.offsetWidth) ){ pscrnt = psinit; } else { pscrnt+= -1; // pixel par deplacement } defile1.style.left = pscrnt+"px"; } } setInterval("textedefile1()",20); // delai de deplacement </script> <script type="text/javascript"> var defile2;// l'element a deplacer var psinit = 580; // position horizontale de depart var pscrnt = psinit; function textedefile2() { if (!defile2) defile2 = document.getElementById('defile2'); if (defile2) { if(pscrnt < ( - defile2.offsetWidth) ){ pscrnt = psinit; } else { pscrnt+= -1; // pixel par deplacement } defile2.style.left = pscrnt+"px"; } } setInterval("textedefile2()",20); // delai de deplacement </script> <script type="text/javascript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> </head> <body> <div id="global"> <div class="Style5" id="defile1">ERRARE HUMANUM ESTE </div> <div class="Style5" id="defile2">PERSEVERARE DIABOLICUM</div> <div id="Layer1"> <p align="center" class="Style1">CETTE PAGE N'EXISTE PAS SUR NOTRE SITE<br /> <a href="/fr/start.html">Retour &agrave; l&rsquo;accueil</a></p> <p align="center" class="Style1">ESTA PAGINA NO EXISTE EN NUESTRO SITIO<br /> <a href="/es/start.html">Volver al principio</a></p> <p align="center" class="Style1">THIS PAGE DOES NOT EXIST IN OUR SITE<br /> <a href="/en/start.html">Back to starting point</a></p> </div> <div id="Layer2"><a href="http://www.monsite.org" class="Style3">www.monsite.org</a></div> <div align="center"></div> </div> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><br /> </p> </body> </html>

Re: et pour un défilement vers la droite???

Posté : 02 févr. 2006, 14:54
par zeus
Je suis "hyper archi nul sous-sous-débutant sous sous néophyte" en java
;)

Pour un développeur, tu aurais été exécuté à vue, mais si tu es un artiste, je prendrais ta défense. Mais je reconnais que nous, modérateur, on a tendance à ouvrir rapidement le feu sur ceux qui font cette confusion :oops:

Posté : 02 févr. 2006, 15:17
par Cyrano
Tiens l'artiste, tu as oublié une chose... ou plutôt, tu ne dois carrément pas le savoir: affecter une valeur une seconde fois à une variable écrase la valeur précédente. Tu a simplement dupliqué la fonction sans tenir compte de ce détail complètement : donc il y avait conflit. Correction:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ERRARE HUMANUM ESTE</title>
<style type="text/css">
<!--
#defile1 {
   position:absolute;
   left:228px;
   top:101px;
   width:381px;
   height:36px;
   z-index:4;
}
#defile2 {
   position:absolute;
   left:257px;
   top:350px;
   width:382px;
   height:38px;
   z-index:3;
}
#global {
   position:relative;
   width:700px;
   height:400px;
   z-index:1;
   background-color: #FFFFCC;
   margin: auto;
   top: 50px;
}
#Layer1 {
   position:absolute;
   width:700px;
   height:135px;
   z-index:2;
   top: 149px;
   left: 3px;
}
.Style1 {
   font-size: 18px;
   font-weight: bold;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #999999;
}
body {
   background-color: #000000;
}
#global #Layer1 .Style1 a {
   color: #FF0000;
   text-decoration: underline;
}
.Style3 {
   font-size: 36px;
   font-weight: bold;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FF0000;
   text-decoration: none;
}
.Style5 {color: #FF0000; font-style: italic; font-family: Arial, Verdana, Helvetica, Sans-serif; font-size: 24px; font-weight: bold; }
#Layer2 {
   position:relative;
   width:311px;
   height:53px;
   z-index:5;
   margin: auto;
   top: 30px;
}
-->
</style>
<script type="text/javascript">
var defile1;// l'element a deplacer
var psinit = 580; // position horizontale de depart
var pscrnt = psinit;       
function textedefile1() {
   if (!defile1) defile1 = document.getElementById('defile1');
   if (defile1) {
      if(pscrnt < ( - defile1.offsetWidth) ){
         pscrnt = psinit;
                } else {
         pscrnt+= -1; // pixel par deplacement
      }
      defile1.style.left = pscrnt+"px";
   }
}
setInterval("textedefile1()",20); // delai de deplacement
</script>
<script type="text/javascript">
/* <![CDATA[ */
var defile2;// l'element a deplacer
var psinit2 = -170; // position horizontale de depart
var pscrnt2 = psinit2;
function texteDefile2()
{
    if (!defile2)
    {
        defile2 = document.getElementById('defile2');
    }
    if (defile2)
    {
        if(pscrnt2 > (defile2.offsetWidth + 410) )
        {
            pscrnt2 = psinit2;
        }
        else
        {
            pscrnt2 += 1; // pixel par deplacement
        }
        defile2.style.left = pscrnt2+"px";
    }
}
setInterval("texteDefile2()",20); // delai de deplacement
/* ]]> */ 
</script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="global">
  <div class="Style5" id="defile1">ERRARE HUMANUM ESTE </div>
  <div class="Style5" id="defile2">PERSEVERARE DIABOLICUM</div>
  <div id="Layer1">
    <p align="center" class="Style1">CETTE PAGE N'EXISTE PAS SUR NOTRE SITE<br />
      <a href="/fr/start.html">Retour à l’accueil</a></p>
    <p align="center" class="Style1">ESTA PAGINA NO EXISTE EN NUESTRO SITIO<br />
      <a href="/es/start.html">Volver al principio</a></p>
    <p align="center" class="Style1">THIS PAGE DOES NOT EXIST IN OUR SITE<br />
      <a href="/en/start.html">Back to starting point</a></p>
  </div>
  <div id="Layer2"><a href="http://www.monsite.org" class="Style3">www.monsite.org</a></div>
  <div align="center"></div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br />
</p>
</body>
</html>

Posté : 02 févr. 2006, 15:20
par zobmac
zobmac a écrit:
Je suis "hyper archi nul sous-sous-débutant sous sous néophyte" en java
C'est donc ça ma confusion!!!!???
là je ris les mecs.
Je parlait de javascript depuis le début et j'ai dit "java" dans un commentaire sur ma nullité.
Et vous vous dites cinématographe, Vous allez au cinématographe voir des film, vos copines vont jamais chez le gyné, et vous avez un ordinateur pas un ordi?????.......
J'ai rien confondu j'ai abrégé dans un commentaire, et je viens seulement de comprendre la raison (vraiment pas de quoi) de la hire de mes doctes ainées (un chouilla secteux).
Mais au fait le problème demeure en javascript ou en javanais......
donc comment mettre les 2 script un vers la droite et un vers la gauche dans la même page?
Bien à vous en THAILANDAIS
ZM
[/quote]

Posté : 02 févr. 2006, 15:28
par Cyrano
Le problème, c'est que Java est déjà un langage en soi, JavaScript est un langage différent : j'ai laissé un Post-It là-dessus pour bien différencier les deux:
- Java a été développé par Sun;
- JavaScript a été développé à l'origine par Netscape;
Ce sont deux langages qui n'ont aucun raport entre eux et utiliser "Java" en abbréviation de "javascript" est un abus de langage et une erreur, c'est pour ça que tu as été repris.

Et non, je ne vais pas au cinématographe, je vais au cinéma, mais dans ce cas, il n'y a pas abus de langage, on parle bien de la même chose inventée par les frères Lumière :langue:.

Posté : 02 févr. 2006, 15:41
par zobmac
Tiens l'artiste, tu as oublié une chose... ou plutôt, tu ne dois carrément pas le savoir: affecter une valeur une seconde fois à une variable écrase la valeur précédente. Tu a simplement dupliqué la fonction sans tenir compte de ce détail complètement : donc il y avait conflit. Correction:

CYRANO JE TE BAISE LES PIEDS JE M'INCLINE, JE ME PROSTERNE ET JE TE LOUE TOI ET TA DESCENDANCE SUR 758422158 GÉNÉRATIONS
CA MARCHE!!!

T'as tout compris j'ai copier collé et j'ai seulement compris que la première var (defile en l'occurence) c'est le nom de l'élément sur lequel ça agit et qu'il faut le différencier pour chaque éléments.

Y a 2 jour je parlais pas le javatruc, mais là grande leçon et je commence à comprendre.
J'avais (je suis pas trop con et j'aime la logique) quand même repéré les psinit et pscrnt comme étant des positions ps en abrégé et la je viens de comprendre que il faut aussi les différencier. je croyais que les positions étaient relatives à la première variable "var defile" et donc étaient la position de lcelle-ci.

UN GRAND MERCI A VOUS TOUS
car maintenant quand je vois du javatruc je me sens moins seul. Je commencve à capter quelque truc, mais encore une fois j'y connais rien.
par contre si vous avez besoin d'une traduction (ANGLAIS, CATALAN, ESPAGNOL) faites moi signe, ça j'le cause.
Et si je peux me permettre plus vous gueller sur un débutant, mins il comprends, plus il (moi) stress et plus ça bug.
Bien a vous en Thailandais et en javanais
ZM
Le sage montre la lune, l'imbécile regarde le doigt.
Et si le sage virer un peu des fois ses paluches on verrait mieux la lune..