Forum d'entraide PHPFrance

[AB]

Bonjour,

s'il nest pas trop tard, commant fait on pour calculer la largeur d'un texte

merci

Pour ne faire défiler que du texte inutile de renseigner la largeur, il suffit de suivre ce procédé

[zouetchou]

Bonjour,

Dans mon cas j'ai besoin que le cadre ai une largeur de 100%. Comment faire pour que le texte démarre complètement à droite (donc quelque soit la largeur)?

Merci,

[AB]

Dans le lien que j'ai donné ci-dessus, il me semble que mettre width:100% (à la place de width:280px) dans #cadrpg et dans #newshr devrait suffire.

[zouetchou]

le point de départ (var psinit = 280;) position le texte de façon fixe. Il faut modifier ce paramètre à chaque fois.

Il faudrait pouvoir le supprimer (comme dans la balise <marquee>) et pouvoir indiquer un sens de déplacement (de gauche à droite ou de droite à gauche).

[AB]

Ah oui j'avais oublié ce paramètre.
Tu peux calculer cette largeur avec un simple

Tout sélectionner

var psinit=document.getElementById("cadrpg").offsetWidth;

Il y a des exemples sur ce lien http://www.abciweb.net/objet-defilant.php puis code webmestre.

EDIT : Si tu as d'autres questions, ouvre plutôt un autre topic dans le forum javascript, cela permettra de ne pas trop diluer celui-ci

[zouetchou]

Après plusieurs test, voici le code que j'ai trouvé pour régler le cadre à 100% .

Tout sélectionner

#cadrpg { width:100%; margin:0 auto; border:0px;}
#newshr { position:relative; width:100%; margin:0 auto; border:0px; height:20px; overflow:hidden; }
#defile { position:absolute; margin:0 auto; border:0px; background-color:#FFFFFF}

Tout sélectionner

<script language="javascript1.1" type="text/javascript">
var cadrpg; // l'element conteneur
var defile; // l'element a deplacer dans le conteneur
var psinit; // position horizontale de depart de l'element a deplacer
var pscrnt; // position horizontale de fin de deplacement de l'element a deplacer

function texteDefile()
{
   if (!defile) defile = document.getElementById('defile');
   if (!cadrpg) cadrpg = document.getElementById('cadrpg');
   
   if (defile)
    {
      if(!psinit)
      {
         psinit = cadrpg.offsetWidth; // position horizontale de depart
         pscrnt = psinit;
      }
   
         if(pscrnt < ( - defile.offsetWidth ) ){
         pscrnt = psinit;
                } else {
         pscrnt+= -1; // pixel par deplacement
      }
         
      defile.style.left = pscrnt+"px";
   }
}
setInterval("texteDefile()",20); // delai de deplacement 
</script>

Tout sélectionner

       <div id="cadrpg">
        <div id="newshr">
         <div id="defile"><a href="index.php">Bienvenue&nbsp;sur&nbsp;ce&nbsp;site&nbsp;de&nbsp;démo...</a></div>
        </div>
      </div>

A+

[AB]

Bonjour,

Sur ce lien une version qui permet :

- De faire un défilement horizontal ou vertical.

- De faire défiler plusieurs objets dans une même page.

- De ne pas avoir toute la largeur du cadre vide en attendant le retour de boucle : la boucle est réellement continue et l'espacement du retour de boucle est paramétrable.

- De faire (en option) un aller-retour plutôt qu'une boucle continue.

- De paramétrer une pause avant le départ.

- D'arrêter le défilant on mouseover et de le reprendre onmouseout ou d'autres comportements.

- D'inverser le sens de défilement en cour jusqu'à la position initiale de départ.

[zerom]

Bonjour
Merci pour ce sript qui me semble très utile. Cependant, quand je passe mon code au validator w3c (XHTML 1.0 Transitional), ça coince sur la ligne suivante :

Tout sélectionner

 if(pscrnt < ( - defile.offsetWidth) ){

StartTag: invalid element name.
C'est le < qui pose problème

Comment résoudre ça ?

[Cyrano]

Bonjour
Merci pour ce sript qui me semble très utile. Cependant, quand je passe mon code au validator w3c (XHTML 1.0 Transitional), ça coince sur la ligne suivante :

Tout sélectionner

 if(pscrnt < ( - defile.offsetWidth) ){

StartTag: invalid element name.
C'est le < qui pose problème

Comment résoudre ça ?

Il est plus que probable que le problème est autour des balises <script>

Le XHTML est un langage XML, donc on doit utiliser ces balises de cette manière :

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

Syntaxe: [ Télécharger ] [ Afficher ]

Code html

<script type="text/javascript">/* <![CDATA[ */
//.. code JavaScript
/* ]]> */</script>

Les codes en JavaScript ne devant pas être interprétés de la même manière que le code HTML, on utilise un marquage CDATA. Avec ça, le validateur devrait moins grogner.

[zerom]

Ha oui en effet, ça passe nickel comme ça.
Merci en tout cas pour la réponse ultra rapide