11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Hum, dans la même idée que ce post , j'ai trouvé une autre source qui fonctionne à peu près correctement à quelques points près ..
Voici le code de la page "index.php" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>Texte Defilant</title>        
      <meta name="robots" content="all">    
      <meta name="description" content="Texte Défilant">
      <meta name="keywords" content="voir,défiler,slide">                
      <meta http-equiv="Content-Type" content="text/html;charset=windows-1252;">
      <meta http-equiv="Content-Language" content="fr">  
      <script language="javascript" type="text/javascript" src="textDef.js"></script>
   </head>
   <body style="background-color:white;" onload="transfert()">
      <div style="border:solid #000000 1px; background-image:url(../images/tb_main.png); height:150px; width:150px;">
         <div id="texteDefil" style="position:relative; border:solid #000000 1px; background-image:url(../images/tb_main.png); height:150px; width:150px;">
            <?php
                define('DB_SERVER', 'localhost');
                define('DB_SERVER_USERNAME', 'root');
                define('DB_SERVER_PASSWORD', '******');
                define('DB_DATABASE', '*******');
                $connect = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD) or die('Impossible de se connecter : ' . mysql_error());
                mysql_select_db(DB_DATABASE, $connect);
                $sql = 'SELECT pseudo_guestbook,message_guestbook,date_guestbook FROM '.DB_DATABASE.'.guestbook;';
                 $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
                 mysql_close();
                 while($data = mysql_fetch_assoc($req))
                 {
              ?>
              <p style="font-size:12px; font-weight:bold; margin:0px; padding:0px;"><?php echo $data['pseudo_guestbook']; ?></p>
              <p style="font-size:10px;font-style:italic; margin:0px; padding:0px;"><?php echo $data['date_guestbook']; ?></p>
              <p style="font-size:12px; margin:0px; padding:0px;"><?php echo $data['message_guestbook']; ?></p>
              <hr/>
              <?php
                 }
              ?>
           </div>
        </div>
   </body>
</html>


Maintenant, le code du script javascript que j'utilise, j'ay connais rien mais il ne m'a pas l'air bien compliqué ^^ lol Smiley biggrin


var y = 0;
var temps = 10;
function transfert()
{
   minuteur=setInterval('defil()',temps);
}
function defil()
{
   document.getElementById('texteDefil').style.top = y--;    
}


Vous pouvez voir ce que ça donne à cette adresse .

Ce que je ne comprends pas, c'est pour quoi les données ne défilent pas QUE dans la "boîte" ? pourquoi je suis obligé d'appeler la fonction dans le <body> et non dans le <div> où je voudrais qu'elles défilent (voir le lien ci-dessus) !?

Et une autre petite chose, serait-ce compliqué d'ajouter une boucle dans le script pour faire boucler le tout ... j'y connais vraiment rien en javascript Smiley ohwell Smiley confus

Et bien, merci d'avance à tous les insomniacs Smiley cligne
Modifié par tcyrill2 (15 Oct 2007 - 23:59)
Bonjour,

je pense qu'il manque un truc dans ce genre là (attribut overflow):

<div style="border:solid #000000 1px; background-image:url(../images/tb_main.png); height:150px; width:150px;overflow:hidden">

...

</div>



EDIT: il serait peu être mieux d'utiliser un CSS externe couplé avec des classes. Cela te permettrait d'avoir un code plus propre et donc plus facile à maintenir ainsi qu'un code réutilisable facilement.
Modifié par Francois44 (15 Oct 2007 - 09:40)
Merci beaucoup Francçois44 ... Smiley cligne
Ta solution a résolu un de mes problèmes avec brio Smiley smile

PS : J'ai bien noté ta note sur l'utilisation de classe. Pour te rassurer, j'utilise bien des classes en temps normal, j'ai juste mis directement mon code entre balises <div style=""> pour ne pas faire référence à un autre fichier... Smiley cligne

Il ne me manque plus qu'une petite chose, comment faire boucler l'affichage ??? Smiley ohwell

Je pense que ça va pas être très simple (enfin je dis ça, j'y connais rien en javacript) .. mais vu que je fais du select en bdd et que la table est appelée a grandir, comment detecter la fin de texte, comment detecter quand cette fin de texte est rendue en haut de la fenêtre d'affichage (défilement bas vers haut) et comment faire la condition de boucle ??? (comme je viens de le dire, j'y connais rien en Javascript) Smiley confus


Merci d'avance ...
Modifié par tcyrill2 (15 Oct 2007 - 16:36)
Hello,

Il te faut d'abord trouver la taille de ton élément qui contient le texte (obj.offsetHeight), puis à chaque tour de ta boucle vérifier qu'il n'est pas complétement sorti de son cache et à ce moment, le remettre tout en bas.

Pour tester s'il est pas complétement sorti, compare son style.top à la hauteur que tu a trouvée Smiley smile

Voila, quelques pistes sans code, juste l'idée générale, hésite pas si tu bloques sur un point particulier.
tcyrill2 a écrit :

Il ne me manque plus qu'une petite chose, comment faire boucler l'affichage ??? Smiley ohwell

Je pense que ça va pas être très simple (enfin je dis ça, j'y connais rien en javacript) ...


Euhh lOl Smiley biggrin ...
c'est à dire que je bute sur le premier truc en fait, javascript tout court Smiley lol

Mais euhh, je cherche la complication ... ya pas une instruction "loop" en Javascript, je sais pas !? ou faire une boucle du style "while true; do; done" !? Smiley ohwell
Modifié par tcyrill2 (15 Oct 2007 - 23:29)
Francois44 a écrit :
Bonjour,

je pense qu'il manque un truc dans ce genre là (attribut overflow):

<div style="border:solid #000000 1px; background-image:url(../images/tb_main.png); height:150px; width:150px;overflow:hidden">
...
</div>


Euhh Ouep, ça marche nikel sous FireFox ... merciii
Mais pas sous Smiley fache IE Smiley fache Smiley ohwell ///

T'as pas un tuyau à ce niveau Smiley smile
Modérateur
bonsoir ,

Je réponds a ta demande d'aide quand le but du forum n'est pas de "faire pour vous".

Un marquee , n'est pas valide , probablement du fait que ce n'est pas de la mise en forme pure , que ça n'a semantiquement aucune valeur pertinente , sinon , "voici une boite qui defile et qui enerve" (sourir).

Le marquee ne fonctionne bien a priori que dans IE (... enfin faut-il encore ne pas trop chercher a mettre en forme la zone concerné).

Le marquee a aussi la particularité de ce figé au survol de la souris (par defaut).

... il y a risque de lassé ou d'ennuyé le visiteur , une page web qui defilent de partout peut devenir trés vite desagréable , marquee ? pourquoi pas , mais alors avec discretion Smiley smile .

ton bout de code repris avec les directives de Tymlis peuvent donc te donner une solution (intermediaire) , c'est pourquoi , finalement je met ce bout de code assez simpliste et comprehensible pour un debutant .
(une recherche dans google sur setIntervall(); va deja t'aider a decrypter ce qui se passe ).
Ce bout de code est un peu commenté , en esperant qu'il t'aide un peu a comprendre et te motive a creuser de toi même la suite ou tes prochains js.
  var y        = 150;
  var temps    = 50;
 // on declare les variables  auxquelles on donnera leurs valeurs aprés le chargement de la page
  var hauteur;
  var limite;
  var hopla; 
  function transfert()
  { 

// Cette fonction est appelé aprés le chargement de la page , on peut donc initialiser nos variables (dans body onload="")

// on recupere la hauteur du div defilant
 hauteur= document.getElementById('texteDefil').offsetHeight;
// on determine la hauteur de reinitialisation  (2 fois la hauteur )
 limite= hauteur*2;
// on determine une valeur negative hauteur - 2 fois sa valeur
 hopla =hauteur-limite; 
//on prend soin de passr la variable a la fonction appelé recursivement par le setinterval
     minuteur=setInterval('defil(hopla)',temps);
  }
  function defil(hopla)
  {
  
 // on test si y et hopla on la même valeur , si oui , c'est que le texte a completement defiler et n'est deja plus visible 
 //on reinitialise donc y a sa valeur par defaut qui est 150 ici , et c'est reparti pour un tour 
 
  if (y == hopla){y=150; }	
  
  //On applique un deplacement visuel de la boite defilante , demmarage a 150 et a chaque tour on enleve 1 a y (y--)
    document.getElementById('texteDefil').style.top = y--; 
  }  


Tu parle aussi de code valide , peut-etre peut tu aussi creuser vers les doctypes et passer a un xhtml transitionnal .

Cela aura l'avantage de te sensibiliser au xhtml , qui dans sa version strict impose quelques règles qui ne sont pas insurmontables.

Pour info , ton doctype de page test n'est pas valide car incomplet.

Enfin en revenant au js , au code (x)tml valide , en passant par le css et en t'interessant aussi un peu au mot dom , tu découvriras la cohérence qui lie ces différents 'langages' et l'importance d'un code html valide et bien structuré .

fin du blabla et bon courage et patience . Smiley smile

GC


edit :
a écrit :
Euhh Ouep, ça marche nikel sous FireFox ... merciii
Mais pas sous fache IE fache ohwell ///


aprés test de ta page en lien avec le js modifié , ça roule sous IE7 et 6 , ainsi que opera ??
Modifié par gcyrillus (15 Oct 2007 - 23:48)
Okiiii gcyrillus ^^ ça c'est du temps de réactions Smiley biggrin

Punaize, tu déroule Smiley smile Smiley biggol j'ai fait un copié/collé du js que tu m'as filé et ça marche du feu de dieu Smiley lol Merciiii

PS : t'as pas un site avec un tuto sur la modification de tout le template de phpBB, un truc comme ça !? ton nom me dit qqch en url Smiley cligne
Modifié par tcyrill2 (15 Oct 2007 - 23:53)
Modérateur
heu non , j'ai pas de site , mais il ya la faq , des tutos sur alsa , tu as aussi pompage.net (j'y vais jamais mais il fond souvent references , ) et puis le sdz est pas mal non plus , la difficulté est de savoir trié les tutos a dispo entre les "methodes" obsoletes ou viellote et ce qui se base sur les standards ..

je m'aperçois que j'ai passé les 1000 post ici , probable donc que mon pseudo ne te soit pas totalement inconnu.

GC

Pour les modifs de template , idem : google , recherche des tutos , creusage et ballades sur des forums dédiés au sujet qui te taraude Smiley smile
Bonjour,

Bon, un dernier problème ...

C'est à dire que le javascript de gcyrillus fonctionne niquel sur une page à part (voir ce lien ).

Les petits problèmes qui viennent se gréfer sont :
- Le overflow:hidden n'est pas interprêté sous IE !? (y-a-t-il une solution de contournement à ce niceau)
- Après intégration dans mon site, la fonction de défilement ne fontionne plus. J'ai pourtant bien la déclaration du script dans le <head>, je définit bien le <body onload="transfert()"> mais ça ne marche pas sous FF (alors que ça fonctionne sous IE (si ce n'est le probleme d'overlfow)) !?

Pour voir un exemple, voici l'url de test : ici

Merci d'avance ...
Modifié par tcyrill2 (16 Oct 2007 - 14:48)