Sujet Précédent Sujet Suivant

Texte qui DEVRAIT faire le tour de la fenêtre

Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009 - 3 juil. 2006 à 13:51
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 5 juil. 2006 à 16:02
Voila, je cherche à faire un script qui permettrait à un paragraphe de faire le tour de sa fenêtre du navigateur. Pour l'instant, il sagit d'un simple "brouillon" que je travaille phase par phase et qui est intégré à la page html. J'en suis à la 1ère phase, le déplacement de gauche à droite, et déjà je bute sur plusieurs difficultés. Voici ma page :

<html>
  <head>
    <title>Création d'un site web en html et javascript</title>
    <style>
      <!--
        #texte{
          position: absolute;
          top: 100px;
          left: 50px;
          font-size: 30px;
          font-family: arial;
          font-weight: bold;
        }
      //-->
    </style>
    <script language="Javascript">
      isNetscape4 = document.layers;
      isNetscape6 = document.getElementById && !document.all
      dhtml = document.getElementById || document.all || document.layers;
      abscisse = 50;
      ordonnee = 100;
      function getStyle(nom) {
        if (isNetscape6)
          var style = document.getElementById(nom).style;
        else if (isNetscape4)
          var style = document.layers[nom];
        else
          var style = document.all[nom].style;
         return(style)
        }
      function largeur() {
        retourLigne = "
";
        temp = "";
        indmax = 0;
        indice = texte.indexOf(retourLigne);
        while(indice != -1){
          if indice > indmax indmax = indice;
          temp = texte.substr(indice + retourLigne.length);
          indice = temp.indexOf(retourLigne);
          }
        indice = texte.lasIndexOf(retourLigne);
        temp = text.substr(indice + retourLigne.length);
        if temp.length > indmax indmax = temp.length;
        return(indmax);
        }
      function moveText() {
        if (!dhtml)
          return;
        var absmax = screen.availWidth - largeur() * getStyle('texte').font-size);
        while (getStyle('texte').left < absmax) {
          abscisse ++;
          setTimeout("getStyle('texte').left = abscisse",500);
          }
        abscisse = 500;
        getStyle('texte').left = abscisse;
        moveText();
        }
    </script>
  </head>
 
   

      Ce site sans theme particulier est un exercice et un

      entraînement à la production en javascript. Toutes vos

      idées pour son développement sont les bienvenues.
   

 
</html>

Mes problémes sont les suivants :
- Je ne sais pas comment désigner la chaîne de caractère contenue entre les balises

, que j'ai ici nommée simplement texte ("texte.indexOf(retourLigne)" par exemple).
- Je ne sais pas s'il existe un moyen plus simple d'obtenir la largeur d'une chaine en pixels.
-Le navigateur qui lit cette page me déclare une erreur à la ligne 60 "" en signalant qu'un objet est attendu. J'ai déjà rencontré cette erreur en oubliant de fermer des parenthèses, des guillemets, une balise ou encore des accolades, mais après plusieurs vérifications, je ne trouve pas ici quelle en est la cause.

  En vous remerciant par avance de votre aide

Nitruk

30 réponses

  • 1
  • 2
Réponse 1 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 juil. 2006 à 14:43
bonjour,

   des erreurs de syntaxe :

   if a==1 s'écrit if ( a==1 ) 
   lasindexOf=lastIndexOf
   font-size=fontSize ...

   le contenu du div : document.getElementById("texte").innerHTML.

   getStyle quasi inutile
      document.getElementById('texte').style.fontSize ça baigne pour presque tout

bref, avec FireFox : regarder la console JavaScript,
      avec Internet Explorer : activer le debogger
ça donne toutes ( ou presque ) les erreurs.

sans préjuger de la logique du script...

cordialement   Bul
Site
0
Réponse 2 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
3 juil. 2006 à 18:21
Merci infiniment. Je sais maitenant ce qui me manquait, mais je ne trouve toujours pas pourquoi le navigateur déclare une erreur à ce qui est devenu la ligne 51 de ma page qui donne maintenant :

<html>
  <head>
    <title>Création d'un site web en html et javascript</title>
    <style>
      <!--
        #texte{
          position: absolute;
          top: 100px;
          left: 50px;
          font-size: 30px;
          font-family: arial;
          font-weight: bold;
        }
      //-->
    </style>
    <script language="Javascript">
      isNetscape4 = document.layers;
      isNetscape6 = document.getElementById && !document.all;
      dhtml = document.getElementById || document.all || document.layers;
      abscisse = 50;
      ordonnee = 100;
      function largeur() {
        retourLigne = "
";
        temp = "";
        indmax = 0;
        indice = document.getElementById("texte").innerHTML.indexOf(retourLigne);
        while(indice != -1){
          if(indice > indmax) indmax = indice;
          temp = document.getElementById("texte").innerHTML.substr(indice + retourLigne.length);
          indice = temp.indexOf(retourLigne);
          }
        indice = document.getElementById("texte").innerHTML.lastIndexOf(retourLigne);
        temp = document.getElementById("texte").innerHTML.substr(indice + retourLigne.length);
        if(temp.length > indmax) indmax = temp.length;
        return(indmax);
        }
      function moveText() {
        if (!dhtml)
          return;
        var absmax = screen.availWidth - largeur() * document.getElementById('texte').style.fontSize);
        while (getStyle('texte').left < absmax) {
        abscisse ++;
        setTimeout("document.getElementById('texte').style.left = abscisse",500);
        }
      abscisse = 50;
      document.getElementById('texte').style.left = abscisse;
      moveText();
      }
    </script>
  </head>
 
   

      Ce site sans theme particulier est un exercice et un

      entraînement à la production en javascript. Toutes vos

      idées pour son développement sont les bienvenues.
   

 
</html>

Nitruk
0
Réponse 3 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 05:16
le debugger n'est toujours pas activé (ie) ?
et que dit la console javascript (ff,opera) ?

        var absmax = screen.availWidth - largeur() * document.getElementById('texte').style.fontSize);

le ) est en trop, ou alors il manque une (.

il restera à régler les problèmes de logique
( et c'est plus difficile ! )

cordialement   Bul   
Site
0
Réponse 4 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 10:39
Quand je dis que le navigateur me déclare un objet attendu à la ligne 41, c'est bien du debugger d'internet explorer qu'il s'agit. Merci en tout cas pour cette correction supplémentaire.

Nitruk
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 11:10
Suite à votre question j'ai téléchargé et installé firefox dont la console javascript me déclare :
1- Erreur : Sélecteur attendu.  Jeu de règles ignoré suite à un mauvais sélecteur.
    Fichier source : [file:///C:/projet/index.html                                Ligne file:///C:/projet/index.html                                Ligne] : 14
2- Erreur : Fin de fichier inattendue durant la recherche de Fermeture } d'un jeu de règles invalide.
     Fichier source : [file:///C:/projet/index.html                               Ligne file:///C:/projet/index.html                               Ligne] : 15

         Ces 2 premières erreurs concernent la déclaration du style de #texte :

    <style>
      <!--
        #texte{
          position: absolute;
          top: 100px;
          left: 50px;
          font-size: 30px;
          font-family: arial;
          font-weight: bold;
          }
      //-->
    </style>

Apparemment le navigateur ne trouve pas l'accolade de fermeture.

3- Erreur : too much recursion
     Fichier source : [file:///C:/projet/index.html                                Ligne file:///C:/projet/index.html                                Ligne] : 40

Celle-ci désigne la ligne :
        var absmax = screen.availWidth - largeur() * document.getElementById('texte').style.fontSize;
mais je ne comprends pas pas ce que la console entend par là

Nitruk
0
Réponse 6 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 11:20
en CSS, les commentaires c'est /*commentaires*/
pas <!-- -> qui est un commentaire en html.
( pas d'erreur avec IE, mais FF n'aime pas )

Erreur : too much recursion ( avec FF )
entre d'autres temps on aurait dit : boucle do infernale.
( une boucle dont on ne sort jamais,
   je parlais de régler les problèmes de logique )

cordialement   Bul   
Site
0
Réponse 7 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 12:03
au fait...
>>Suite à votre question j'ai téléchargé et installé firefox
   ma question ne valait que si vous testiez sous FF !
   mais ça ne fait pas de mal d'y tester ses script.
cordialement   Bul   
Site
0
Réponse 8 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 13:33
Merci encore, mais la ligne concernée n'appartient pas à un boucle. Par contre, une boucle while commence à la ligne suivante, mais je ne vois pas en quoi  elle est infernale :

var absmax = screen.availWidth - largeur() * document.getElementById('texte').style.fontSize; -> ligne concernée par l'erreur
while (document.getElementById('texte').style.left < absmax) {
  abscisse ++;
  setTimeout("document.getElementById('texte').style.left = abscisse",500);
  }

Nitruk
0
Réponse 9 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 13:36
En ce qui concerne le commentaire, il s'agit d'une précaution pour la compatibilité internavigateurs. Elle est inutile dans ce cas ci car ma page n'a pas de raison d'être sans le dhtml, mais pour un navigateur qui ne comprend pas les css, une balise commentaire permet d'eviter les erreurs de lecture, tandis les commentaires html sont ignorés par les autres navigateurs.

Nitruk
0
Réponse 10 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 13:45
>>mais la ligne concernée n'appartient pas à un boucle



ben si : function moveText() {... moveText(); }
   et on en sort quand ?
>>il s'agit d'une précaution pour la compatibilité internavigateurs
ben non, pas pour FF : c'est une balise html et FF n'aime pas ça en CSS
cordialement   Bul   Site
0
Réponse 11 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 13:56
en cas de grosses difficultés pour déboguer un script
le debogger IE permet de faire du pas à pas, de visualiser
les variables... et d'autres choses. j'ai mis dans les
tutoriaux un début d'explication pour l'utiliser.
sinon, parsemer le script de alert( variable ); pour voir
ce qui se passe, comment ça se déroule...        
Bon amusement, car c'est là l'aspect intéressant de la programmation.
cordialement   Bul   
Site
0
Réponse 12 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 14:02
il fallait lire l'un des aspects intéressants
et pas l'aspect intéressant
cordialement   Bul   Site
0
Réponse 13 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 15:45
Justement je ne veux pas qu'on en sorte, puis qu'en finale le texte devra faire le tour de la fenêtre à l'infini.

Nitruk
0
Réponse 14 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 15:53
en ne laissant jamais la main à rien ( système, utilisateur ... ) ?
> "boucle do infernale" et ça plante ( et encore heureux, avec
   certains systèmes/langages il faudrait arrêter et relancer 
   totalement la machine )

il faut au moins temporiser :
relancer la fonction après un certain temps,
du style : setTimeout("fonction();",délai en milli secondes);
( ou setInterval )

à propos : je n'ai pas vérifié si on sort effectivement du while !

cordialement   Bul   
Site
0
Réponse 15 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 16:12
Oh les alert(variable) j'en ai utilisé. Seulement moi je ne suis qu'un modeste débutant et je commence à être vraiment dépassé. J'ai supprimé pour l'instant la boucle et j'obtiens ce code :


<html>
  <head>
    <title>Création d'un site web en html et javascript</title>
    <style>
        #texte{
          position: absolute;
          top: 100px;
          left: 50px;
          font-size: 30px;
          font-family: arial;
          font-weight: bold;
          }
    </style>
    <script language="Javascript">
      abscisse = 50;
      ordonnee = 100;
      function largeur() {
        retourLigne = "
";
        temp = "";
        indmax = 0;
        indice = document.getElementById("texte").innerHTML.indexOf(retourLigne);
        while(indice != -1){
          if(indice > indmax) indmax = indice;
          temp = document.getElementById("texte").innerHTML.substr(indice + retourLigne.length);
          indice = temp.indexOf(retourLigne);
          }
        indice = document.getElementById("texte").innerHTML.lastIndexOf(retourLigne);
        temp = document.getElementById("texte").innerHTML.substr(indice + retourLigne.length);
        if(temp.length > indmax) indmax = temp.length;
        return(indmax);
        }
      function moveText() {
        var absmax = screen.availWidth - largeur() * document.getElementById('texte').style.fontSize;
        while (document.getElementById('texte').style.left < absmax) {
        abscisse ++;
        setTimeout("document.getElementById('texte').style.left = abscisse",500);
        }
      }
    </script>
  </head>
 
   

      Ce site sans theme particulier est un exercice et un

      entraînement à la production en javascript. Toutes vos

      idées pour son développement sont les bienvenues.
   

 
</html>

Là, Firefox ne déclare plus d'erreur, mais me place directement le texte 10 fois plus loin que l'extrémité droite de ma page, alors que le but était qu'il se déplace en douceur jsuqu'à cette extrémité (à 2 pixels par seconde). Quant à Internet Explorer, il plante complètement ainsi que le reste de la machine.




Nitruk
0
Réponse 16 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 16:33
et qui a-t-il dans document.getElementById('texte').style.left  ?
et dans absmax ?
est-ce que document.getElementById('texte').style.left
devient un jour = absmax ?
puisqu'on a ce test :   while (document.getElementById('texte').style.left < absmax)
cordialement   Bul   
Site
0
Réponse 17 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 16:43
sous windows, en désespoir de cause, quand un programme boucle :
Ctrl+Alt+Del ==> affiche le Gestionnaire des tâches
et on peut tuer le processus.
cordialement   Bul   
Site
0
Réponse 18 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 16:45
dans document.getElementById('texte').style.left   ? 




la distance du texte par rapport au bord 
                                                      gauche de la fenêtre ouverte





dans absmax ? 

la distance à ne pas dépasser = espace disponible enlargeur dans la fenêtre - 


                              (nombre de caractères dans la ligne la plus longue du texte * hauteur/largeur en pixel d'un caractère
                              désigné par cette id
est-ce que document.getElementById('texte').style.left devient un jour = absmax ?  normalement
   puisque document.getElementById('texte').style.left est indirectement incrémenté à chaque i
tération de la boucle :
        abscisse ++;
        setTimeout("document.getElementById('texte').style.left = abscisse",500);


(je rappelle qu'à l'origine abscisse 50 et document.getElementById('texte').style.left 50)

Nitruk
0
Réponse 19 / 30
Nitruk Messages postés 128 Date d'inscription lundi 8 août 2005 Statut Membre Dernière intervention 20 juillet 2009
4 juil. 2006 à 16:46
Merci je suis peut être débutant en javascript mais je sais quand meme me servir de windows. Mais le gestionnaire de tâches s'ouvre dans ce cas précis en 5mn, c'est pourquoi je dis que la machine elle meme plante. Merci quand meme du conseil.

Nitruk
0
Réponse 20 / 30
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
4 juil. 2006 à 16:53
faire des alert... et surprise ?
cordialement   Bul   
Site
0

Discussions similaires

coder un Tchat comme roulettechat.fr/chat/texte.php
samote152 -
samote152 -

2 réponses
Texte aléatoire
sebchr -
rene38 -

5 réponses
Text Aleatoire
ideosphere -
BruNews -

3 réponses
souligner texte sous illustrator 10
cs_linsay -
linsay -

3 réponses
Zone de texte dans un canvas
_Moise_ -
_Moise_ -

4 réponses
Rejoignez-nous