Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance

Vers le contenu

» Masquer les résultats de la recherche

Recherche dynamique PHPfrance

  1. Effectuez une recherche, les résultats s'afficheront dynamiquement ici.

Défillement de texte de gauche à droite

Questions concernant le HTML, HTML5, xHTML et les CSS.

Défillement de texte de gauche à droite

Messagepar zobmac 01 Fév 2006, 17:26

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

<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>
Dernière édition par zobmac le 02 Fév 2006, 16:02, édité 1 fois.
zobmac
Embryon
 
Messages: 10
Inscription: 01 Fév 2006, 17:16

Messagepar Cyrano 01 Fév 2006, 20:11

Tiens, essaye ça :
Syntaxe: [ Télécharger ] [ Masquer ]
Code php
<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.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:
Avatar de l’utilisateur
Cyrano
Ganesha
 
Messages: 19567
Inscription: 07 Fév 2005, 15:27
Localisation: Paris XIII

Messagepar albat 01 Fév 2006, 21:03

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:
Avatar de l’utilisateur
albat
Administrateur PHPfrance
Administrateur PHPfrance
 
Messages: 11331
Inscription: 07 Fév 2005, 18:17
Localisation: "Si sur ta piste tu enlèves un caillou, tu l’enlèves aussi pour ceux qui suivent."

Messagepar albat 01 Fév 2006, 21:09

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...
Syntaxe: [ Télécharger ] [ Masquer ]
Code php
pscrnt += -1; // pixel par deplacement
Ça abîme tout, hein ?... :(
Une écriture "moins moche" serait :
Syntaxe: [ Télécharger ] [ Masquer ]
Code php
pscrnt -= 1;
Mais le fin du fin :
Syntaxe: [ Télécharger ] [ Masquer ]
Code php
pscrnt--;
C'est tout de même plus beau, non ? ;)

En tout cas, chapeau ! :merci:
Avatar de l’utilisateur
albat
Administrateur PHPfrance
Administrateur PHPfrance
 
Messages: 11331
Inscription: 07 Fév 2005, 18:17
Localisation: "Si sur ta piste tu enlèves un caillou, tu l’enlèves aussi pour ceux qui suivent."

Messagepar starkeus 01 Fév 2006, 21:26

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:
Futures Stars par ici >> www.apel-doorn.com
fan d'info et du ... PSG !! :D
Apprendre, comprendre et maîtriser telle est ma devise!
Fan inconditionnel de netvibes
starkeus
Eléphanteau
 
Messages: 441
Inscription: 19 Fév 2005, 09:29
Localisation: Versailles

Messagepar starkeus 01 Fév 2006, 21:30

Syntaxe: [ Télécharger ] [ Masquer ]
Code php

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";

   }

}
Futures Stars par ici >> www.apel-doorn.com
fan d'info et du ... PSG !! :D
Apprendre, comprendre et maîtriser telle est ma devise!
Fan inconditionnel de netvibes
starkeus
Eléphanteau
 
Messages: 441
Inscription: 19 Fév 2005, 09:29
Localisation: Versailles

Messagepar zobmac 01 Fév 2006, 23:36

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
<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
zobmac
Embryon
 
Messages: 10
Inscription: 01 Fév 2006, 17:16

Messagepar Cyrano 01 Fév 2006, 23:56

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.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:
Avatar de l’utilisateur
Cyrano
Ganesha
 
Messages: 19567
Inscription: 07 Fév 2005, 15:27
Localisation: Paris XIII

Messagepar zobmac 02 Fév 2006, 14:12

Cyrano ton code marche pas sur ma page
Dernière édition par zobmac le 02 Fév 2006, 14:38, édité 1 fois.
zobmac
Embryon
 
Messages: 10
Inscription: 01 Fév 2006, 17:16

Messagepar zobmac 02 Fév 2006, 14:36

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"

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

      <a href="/fr/start.html">Retour &agrave; l&rsquo;accueil</a></p>
    <p align="center" class="Style1">ESTA PAGINA NO EXISTE EN NUESTRO SITIO

      <a href="/es/start.html">Volver al principio</a></p>
    <p align="center" class="Style1">THIS PAGE DOES NOT EXIST IN OUR SITE

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

</p>
</body>
</html>
zobmac
Embryon
 
Messages: 10
Inscription: 01 Fév 2006, 17:16

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

Messagepar zeus 02 Fév 2006, 14:54

zobmac a écrit: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:
Connaître son ignorance est la meilleure part de la connaissance
Pour un code lisible : n'hésitez pas à sauter des lignes et indenter

twitter - site perso - Github - Zend Certified Engineer
Avatar de l’utilisateur
zeus
Administrateur PHPfrance
Administrateur PHPfrance
 
Messages: 13159
Inscription: 22 Avr 2005, 11:11
Localisation: Lyon

Messagepar Cyrano 02 Fév 2006, 15:17

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:
Syntaxe: [ Télécharger ] [ Masquer ]
Code php
<!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>
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:
Avatar de l’utilisateur
Cyrano
Ganesha
 
Messages: 19567
Inscription: 07 Fév 2005, 15:27
Localisation: Paris XIII

Messagepar zobmac 02 Fév 2006, 15:20

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]
zobmac
Embryon
 
Messages: 10
Inscription: 01 Fév 2006, 17:16

Messagepar Cyrano 02 Fév 2006, 15:28

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:.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:
Avatar de l’utilisateur
Cyrano
Ganesha
 
Messages: 19567
Inscription: 07 Fév 2005, 15:27
Localisation: Paris XIII

Messagepar zobmac 02 Fév 2006, 15:41

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..
zobmac
Embryon
 
Messages: 10
Inscription: 01 Fév 2006, 17:16

Suivante

Retourner vers HTML, HTML5, CSS

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 3 invités