Javascript et Firefox

Javascript et Firefox - HTML/CSS - Programmation

Marsh Posté le 15-02-2006 à 09:49:24    

Problème de compatibilité entre des fonctions javascript et le navigateur firefox sur:
http://www.marteau2guerre.com
Sous explorer tout fonctionne.
 
Le Principe:
Le principe est de faire glisser l'image de fond de gauche à droite (et vice versa), et d'afficher les textes associés au positionnement de celle-ci, lorsque l'on click sur les liens du bas.
 
Le Probleme Supposé:
La barre de défilement du bas devrait être cachée, ce qui permet le bon fonnctionnement des scripts, mais il n'en n'est rien. En vient la question suivante: "Comment masquer, bloquer, enlever, la barre de défilement du bas sous firefox?"
 
Qui peut regarder le code source et me trouver une piste de l'erreur, ou surtout de la solution a adopter?

Reply

Marsh Posté le 15-02-2006 à 09:49:24   

Reply

Marsh Posté le 16-02-2006 à 15:18:27    

Une âme charitable et compétente? Car j'ai encore cherché sans succès :(

Reply

Marsh Posté le 16-02-2006 à 15:30:44    

bin tu prends ton firefox, tu lances ton site tu cliques sur les boutons du bas, tu regardes ta console javascript et tu constates:

Citation :


Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://www.marteau2guerre.com/
Line: 94


C'est assez explicite non?

Reply

Marsh Posté le 16-02-2006 à 17:28:38    

lol, ben je ne connaissais même pas la console de firefox...
Donc merci ça devrait quelques peut fortement m'aider.

Reply

Marsh Posté le 16-02-2006 à 17:59:56    

J'ai vraiment beaucoup de mal.
Le premier avertissement au lancement de la page concerne la ligne 60.
J'y défini une fonction.
Pourquoi me disent-ils de remplacer par document.getElementById()?
Comment on gère ça sur une fonction? Sachant que je ne suis pas sûr de l'utilisation de cette fonction (document.getElementById())...
 
Bref traitons l'exemple de la ligne 60...que faire?

Reply

Marsh Posté le 16-02-2006 à 18:04:05    

bin ... lire la doc pour savoir comment ça marche [:spamafote]

Reply

Marsh Posté le 17-02-2006 à 10:23:48    

Le problème est que tu confonds variables javascript et éléments HTML
 

Code :
  1. txt1_droite.className='visible_droite';


 
Même s'il existe un élément HTML dont l'id est nommé comme ça, la variable 'txt1_droite' n'est pas définie.
 
En fait ce que tu veux faire, c'est :

Code :
  1. document.getElementById('txt1_droite').className='visible_droite';


 
Et à partir de là tu peux même optimizer un max :
 

Code :
  1. function affichage(lien){
  2.   // grace à la concaténation de chaines on peut obtenir
  3.   // l'id désiré à partir du numéro
  4.   var toto = document.getElementById("txt" + lien + "_droite" );
  5.   toto.className='visible_droite';
  6. }

Reply

Marsh Posté le 17-02-2006 à 13:06:48    

ok merci je vais travailler dessus, ça m'aide beaucoup, merci  :jap:  
 
Mais après il y a aussi le problème du exit. Je ne sait pas comment le traiter.  
Exemple:
 
 

Code :
  1. function reculera(x){
  2.  bloc.style.left = (parseInt(bloc.style.left) - 25) + "px";
  3.  if(parseInt(bloc.style.left)==x){
  4.   clearInterval(timer);
  5.   exit();
  6.  }
  7. }
  8. function allerA(x){
  9.  if(parseInt(bloc.style.left)<x){ avancera(x); }
  10.  if(parseInt(bloc.style.left)>=x){ reculera(x); }
  12. }
  13. ...
  14. invisible(lien_precedent);
  15.    if(parseInt(bloc.style.left)!=0){
  16.     setInterval('allerA(0)',10);
  17.    }
  18.    affichage(4);
  19.    lien_precedent=4;
  20.    break;


 
Je ne sais pas vraiment comment fonctionne la procédure exit() ou ce que ça fait exactement (globalement je vois mais je ne sait pas comment elle intervient avec setInterval).
Je sais juste que si je ne la fait pas, ça ne marche plus sous explorer.


Message édité par jdmontigny le 17-02-2006 à 13:27:08
Reply

Marsh Posté le 22-02-2006 à 15:23:45    

Quelqu'un saurait dire pour la fonction exit() l'implémentation a effectuer (j'ai pas beaucoup de temps pour chercher, et l'aide sur le forum serait un sacré plus...)
 
merci ;)

Reply

Marsh Posté le 22-02-2006 à 15:39:22    

La fonction exit() ne fait pas partie du langage javascript.
 
J'imagine que tu as copié ce code ailleurs et que tu as oublié de la recopier.
 
En fait ça "tombe en marche" sous IE car j'imagine que quand il essaye d'exécuter exit() il plante et arrête tous les traitement en cours.
 
Ce que tu peux faire :
 - retrouver le code de exit()
 - essayer window.stop(); (j'ai pas testé et ça risque d'être un peu brutal)

Reply

Marsh Posté le 22-02-2006 à 15:39:22   

Reply

Marsh Posté le 22-02-2006 à 22:59:18    

lol, ok.
Perso, exit() c'es tmoi qui l'ai insérer, je me suis dit que ça devait bien exister (comme dans C/C++). bref pas très rigoureux je l'avou :(
Je vais tester window.stop() dès que j'ai le temps.

Reply

Marsh Posté le 22-02-2006 à 23:18:29    

Ok j'ai tester. Je ne vois meme pas l'influence direct que ça a.  
Les erreurs continues de s'enchainer et surcharger la console.
Les erreurs sont par exemple:

Code :
  1. Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C document.getElementById() à la place.
  2. Fichier Source : http://localhost/workspace/
  3. Ligne : 43


Et à la ligne 43 il y a:  
 
"{"
 
Ce qui n'est pas très logique.
Je vais pas appliquer la fonction getElementById sur une accollade quand même  :p  
 
Erreur pour la ligne 57 (la même) mais la blague: y a rien à la ligne 57 sauf un retour chariot...
 
Donc si les erreurs jouent à Sherlock Holmes, on a pas fini d'avoir le cerveau qui... :pt1cable:  
 

Reply

Marsh Posté le 23-02-2006 à 09:39:17    

C'est un vrai bordel ta page, je te conseille de revoir la structure d'un document HTML.
 

Code :
  1. <html>
  3.   <head>
  4.     <!-- c'est ici qu'il y a le title, les meta, le script -->
  5.   </head>
  7.   <body>
  8.     <!-- corps de la page -->
  9.   </body>
  10. </html>


 
PS : l'objet qui pose problème, c'est 'image'


Message édité par Bidem le 23-02-2006 à 09:41:37
Reply

Marsh Posté le 23-02-2006 à 12:51:04    

Pour toi, ta premiére ligne, c'est celle de numéro 0 ou 1?
En général, dans les programmes de débuguage et certains éditeurs, la premiére ligne porte le numéro 0. (je sais, c'est super logique)
Du coup, si tu cherches dans la mauvaise ligne, tu risques pas de trouver tes erreurs.

Reply

Marsh Posté le 05-03-2006 à 13:12:48    

Arf....problème et toujours et encore. Je trouve pas...(mais je continu de chercher...)

Message cité 1 fois
Reply

Marsh Posté le 06-03-2006 à 09:49:58    

jdmontigny a écrit :

Arf....problème et toujours et encore. Je trouve pas...(mais je continu de chercher...)


 
Apparemment tu n'a pas vu ce que j'ai dis dans mon post

Citation :

PS : l'objet qui pose problème, c'est 'image'


 
Tu utilises une variable 'image' mais elle n'est définie nulle part.
Je pense que tu veux utiliser le div qui a l'id image mais dans ce cas, il faut lui dire...
ex : var image = document.getElementById("image" );

Reply

Marsh Posté le 06-03-2006 à 12:41:29    

Malheureusement: "var image = document.getElementById("image" );" fait tout planté. Lorsque l'on click sur un lien du bas, le cadre disparait mais aucun glissement ne s'effectu.

Reply

Marsh Posté le 09-03-2006 à 15:34:14    

Voici le nouveau script après travail
 

Code :
  1. <script language="Javascript">
  2. var x;
  3. var timer = null;
  4. var lien = 1;
  5. var lien_precedent=2;
  7. function allerA(x){
  8.  if(parseInt(document.getElementById('image').style.left)<x){
  9.   document.getElementById('image').style.left = (parseInt(document.getElementById('image').style.left) + 25) + "px";
  10.   timer=setTimeout("allerA(x)", 100);
  11.  }
  12.  else {
  13.   if(parseInt(document.getElementById('image').style.left)>x){
  14.    document.getElementById('image').style.left = (parseInt(document.getElementById('image').style.left) - 25) + "px";
  15.    timer=setTimeout("allerA(x)", 100);
  16.   }
  17.   else {
  18.    clearTimeout(timer);
  19.   }
  20.  }
  21. }
  23. function affichage(lien){
  24.  switch(lien){
  25.   case 1:
  26.    document.getElementById('txt1_droite').className='visible_droite';
  27.    bre*ak;
  28.   case 2:
  29.    document.getElementById('txt2_droite').className='visible_droite';
  30.    bre*ak;
  31.   case 3:
  32.    document.getElementById('txt3_droite').className='visible_droite';
  33.    br*eak;
  34.   case 4:
  35.    document.getElementById('txt4_droite').className='visible_droite';
  36.    bre*ak;
  37.  }
  38. }
  40. function invisible(lien){
  41.  switch(lien){
  42.   case 1:
  43.    document.getElementById('txt1_droite').className='cache';
  44.    bre*ak;
  45.   case 2:
  46.    document.getElementById('txt2_droite').className='cache';
  47.    bre*ak;
  48.   case 3:
  49.    document.getElementById('txt3_droite').className='cache';
  50.    br*eak;
  51.   case 4:
  52.    document.getElementById('txt4_droite').className='cache';
  53.    bre*ak;
  54.  }
  55. }
  57. function afficheLien(lien){
  58.  switch(lien){
  59.   case 1:
  60.    invisible(lien_precedent);
  61.    if(parseInt(document.getElementById('image').style.left)!=0){
  62.     allerA(0);
  63.    }
  64.    affichage(1);
  65.    lien_precedent=1;
  66.    b*reak;
  67.   case 2:
  68.    invisible(lien_precedent);
  69.    if(parseInt(document.getElementById('image').style.left)!=-1025){
  70.     allerA(-1025);
  71.    }
  72.    affichage(2);
  73.    lien_precedent=2;
  74.    break;
  75.   case 3:
  76.    invisible(lien_precedent);
  77.    if(parseInt(document.getElementById('image').style.left)!=-2050){
  78.     allerA(-2050);
  79.    }
  80.    affichage(3);
  81.    lien_precedent=3;
  82.    br*eak;
  83.   case 4:
  84.    invisible(lien_precedent);
  85.    if(parseInt(document.getElementById('image').style.left)!=0){
  86.     allerA(0);
  87.    }
  88.    affichage(4);
  89.    lien_precedent=4;
  90.    b*reak;
  91.  }
  92. }
  95. function start(){
  96.  affichage(2);
  97. }
  99. </script>


NB: j'ai casser les break avec des * , c'est normal.
 
Je n'ai plus d'erreur...mais je n'ai plus le résultat que j'avais auparavant, je n'ai pas le résultat qui devait etre prévu.
Le problème c'est que l'image de fond ne se décal eplus que d'un cran seulement. La répétition du déplacement tant que je n'est pas atteind ma position souhaité n'existe plus.
Et là encore... :pt1cable:  je pêche...
 :o  zen zen....qu'est ce qu'on fait pas pour etre ami des firefoxien   :p  
 
Merci encore pour votre aide.

Reply

Marsh Posté le 19-03-2006 à 18:19:35    

Je relance une dernière fois le sujet, mais avec peu d'espoir...personne ne trouve.
Je crains que le site ne sera pas normalisé pour firefox.

Reply

Marsh Posté le 19-03-2006 à 18:26:26    

> La barre de défilement du bas devrait être cachée
Firefox n autorise plus celà
 

Message cité 1 fois
Reply

Marsh Posté le 19-03-2006 à 18:29:09    

3 grosse images dès l arrivée sur le site, c est peut être un peu trop

Message cité 1 fois
Message édité par nargy le 19-03-2006 à 18:34:21
Reply

Marsh Posté le 19-03-2006 à 18:48:47    

nargy a écrit :

> La barre de défilement du bas devrait être cachée
Firefox n autorise plus celà


arf...il n'y a pas un moyen de contourner le problème?

Reply

Marsh Posté le 19-03-2006 à 18:49:44    

nargy a écrit :

3 grosse images dès l arrivée sur le site, c est peut être un peu trop


Esthétiquement? ....
Peut être...

Reply

Marsh Posté le 19-03-2006 à 20:32:32    

J ai trouvé un code sympa.
J ai réussi à virer les scrollbars.
Je suis pas sur que ça fasse exactement ce que tu veut, mais ça utilise 2 divs de 1024x450 et ça les fait scroller alternativement à gauche et à droite, en meme temps tu peut y mettre toutes les pages que tu souhaite. Ça charge les images si besoin uniquement. Ça commence avec une page noire.
 
Pour les images je te laisse les découper à partir de ta grosse image, elle doivent faire 1024x450 ou alors change les tailles dans le script.
 

Code :
  1. <html>
  2. <body style="margin:0px;" text=white bgcolor="#000000" alink=white vlink=white link=white>
  4. <script>
  5. var scrollspeed=16; // uniquement puissances de 2: 1,2,4,8,16...
  6. var scrollamount=0;
  7. var scrollposition=0;
  8. </script>
  10. <center>Titre</center>
  12. <div style="width:1024px;height:450px;overflow:hidden;">
  13. <div id="bandeau1" style="margin:0px;border-top:solid black 1px;width:1024px;height:450px;position:relative;background-color:#000000;">
  14. </div>
  15. <div id="bandeau2" style="margin:0px;border-top:solid black 1px;width:1024px;height:450px;position:relative;background-color:#000000;">
  16. </div>
  17. </div>
  19. <script>
  20. <!--
  21. var page=1;
  22. function changepage()
  23. {
  25.   if(scrollposition<page*1024-1024-512)
  26.     scrollamount+=scrollspeed;
  27.   else if(scrollposition<page*1024-1024)
  28.     scrollamount-=scrollspeed;
  29.   else if(scrollposition==page*1024-1024)
  30.     scrollamount=0;
  31.   else if(scrollposition<page*1024-1024+512)
  32.     scrollamount+=scrollspeed;
  33.   else
  34.     scrollamount-=scrollspeed;
  36.   scrollposition=scrollposition+scrollamount;
  37.   var bandeau1=document.getElementById('bandeau1');
  38.   bandeau1.style.left=-scrollposition+'px';
  39.   var bandeau2=document.getElementById('bandeau2');
  40.   bandeau2.style.left=(-scrollposition+1024)+'px';
  41.   setTimeout("changepage()",100);
  42. }
  43. window.scrollbars=false;
  44. var bandeau2=document.getElementById('bandeau2');
  45. bandeau2.style.top='-451px';
  46. changepage();
  48. var pages=new Array(
  49. '<font color=yellow><center><h2>Menu 1</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
  50. '<font color=yellow><center><h2>Menu 2</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
  51. '<font color=yellow><center><h2>Menu 3</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
  52. '<font color=yellow><center><h2>Menu 4</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>'
  53. );
  55. var images=new Array(
  56. 'fond1.jpg',
  57. 'fond2.jpg',
  58. 'fond3.jpg',
  59. 'fond2.jpg'
  60. );
  62. function affichepage(num)
  63. {
  64.   var bandeau=null;
  65.   if(page==1)
  66.     var bandeau=document.getElementById('bandeau2');
  67.   else
  68.     var bandeau=document.getElementById('bandeau1');
  69.   bandeau.innerHTML=pages[num];
  70.   bandeau.style.background='url('+images[num]+')';
  71.   if(page==1)
  72.     page=2;
  73.   else
  74.     page=1;
  75. }
  76. affichepage(0);
  77. -->
  78. </script>
  80. <center>
  81. <a href="javascript:void(0);" onclick="javascript:affichepage(0);">[Page 1]</a>&nbsp;&nbsp;
  82. <a href="javascript:void(0);" onclick="javascript:affichepage(1);">[Page 2]</a>&nbsp;&nbsp;
  83. <a href="javascript:void(0);" onclick="javascript:affichepage(2);">[Page 3]</a>&nbsp;&nbsp;
  84. <a href="javascript:void(0);" onclick="javascript:affichepage(3);">[Page 4]</a>
  85. </center>
  86. </body>
  87. </html>


Reply

Marsh Posté le 19-03-2006 à 20:35:10    

ha ouais, j ai pas réussi à contourner un bug avec border-top:solid black 1px;, t es obligé de le garder.
J ai pas testé avec IE.

Reply

Marsh Posté le 19-03-2006 à 20:38:55    

correction pour opéra, à partir de la ligne 12, rajouter border-bottom sinon ça fai le même bug:
 

Code :
  1. <div style="width:1024px;height:450px;overflow:hidden;">
  2. <div id="bandeau1" style="margin:0px;border-top:solid black 1px;border-bottom:solid black 1px;width:1024px;height:450px;position:relative;background-color:#000000;">
  3. </div>
  4. <div id="bandeau2" style="margin:0px;border-top:solid black 1px;border-bottom:solid black 1px;width:1024px;height:450px;position:relative;background-color:#000000;">
  5. </div>
  6. </div>


 

Reply

Marsh Posté le 19-03-2006 à 20:43:24    

ça marche avec IE6 sous XP, mais ça rame un peu tout ça, penser à augmenter le setTimeout() entre 200-500

Reply

Marsh Posté le 20-03-2006 à 17:41:47    

Ok je vais essyer tous ça. Merci beaucoup. Si ça marche je te tir mon chapeau car ça fais un moment que ça trainer ce truc.

Reply

Marsh Posté le 20-03-2006 à 19:01:05    

Je fais des essais mais ça à l'air très sympathique tous ça :)

Reply

Marsh Posté le 20-03-2006 à 19:49:48    

Alors dsl mais malgrès tout le boulot abattu j'ai quand même des problèmes, lors du remplissage du tableau de page:
 
var pages=new Array(
'<font color=yellow><center><h2>Menu 2</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
...
);
 
Si je veux remplire avec un tableau qui contient des liens, ça plante: rien ne s'affiche. C'est le fait que je fasse des retour chariot. Mais je suis bien obliger, coder sur une même ligne autant d'information n'est pas gérable.
Donc ma question est la suivant:
 
"Comment remplir cet array avec un code qui possède des retours à la lignes?"

Reply

Marsh Posté le 20-03-2006 à 20:18:41    

\ est ton ami,
il faut l aimer aussi...
 
sérieusement tu doit utiliser \', \n et mettre des \ à la fin des lignes:
'<font color=yellow><center>\n\
<h2>\'Menu 1\'</h2>\n\
<h3>Option 1</h3>\
<h3>Option 2</h3>\
<h3>Option 3</h3>\n\
</center></font>'
 
est compris de la sorte par javascript:

Code :
  1. <font color=yellow><center>
  2. <h2>'Menu 1'</h2>
  3. <h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3>
  4. </center></font>


Message édité par nargy le 20-03-2006 à 20:20:35
Reply

Marsh Posté le 20-03-2006 à 21:15:16    

C'est noté merci. Je connaissai le \ pour protéger les "  ou les  '  mais je savais pas pour les fins de ligne.  
 
Merci encore, décidément... ;)

Reply

Marsh Posté le 20-03-2006 à 22:16:19    

> Merci encore, décidément... ;)
pas de quoi :)
 
ça déchire comme effet graphique, j avais jamais essayé.

Reply

Marsh Posté le 20-03-2006 à 22:56:42    

;)  

Reply

Marsh Posté le 21-03-2006 à 18:29:35    

Et si je souhaite que le chargement de fond s'effectu à l'ouverture de la page, comment dois-je faire?

Reply

Marsh Posté le 21-03-2006 à 18:55:03    

Je sais pas si c'est très propre mais j'ai inséré une méthode de preloader plutôt que de modifier le javascript de glissement qui fonctionne (j'ai essayer d emodifier mais sans succès et comme je pas fort là dedans...)
Bref:
 
index.php
 

Code :
  1. <div id="prechargement">
  2. <img src="fond1.jpg" alt=""  />
  3. <img src="fond2.jpg" alt=""  />
  4. <img src="fond3.jpg" alt=""  />
  5. </div>


 
style.css

Code :
  1. #prechargement {
  2. display: none;
  3. }


 
Ca fait un plus long chargement au départ mais après au moins l'effet glissement est nickel ;)
Y aura plus qu'a insérer une barre de chargement pour faire patienter si nécessaire.

Reply

Marsh Posté le 21-03-2006 à 18:57:18    

tu ajoute le javascript suivant tout à la fin:

Code :
  1. function preloadfonds()
  2. {
  3.   for(i=0;i<images.length;i++)
  4.   { var img=new Image(); img.src=images[i]; }
  5. }
  6. setTimeout('preloadfonds()',1);


Reply

Marsh Posté le 21-03-2006 à 22:10:09    

Toujours et encore (on va finir par voir tous les problèmes): Implémenter du php dans un tableau.
 
Extrait de mon code

Code :
  1. <img src="§.gif" alt="§"> <a href="guilde/bloc.php">L\'Aube Eternelle recrute</a> <img src="§.gif" alt="§"><br>\
  2. <a href=#recrutement>Plus...</a>\
  3. </div></td></tr><tr><td><div class="som_dyn">\
  4. <img src="screens.gif" width="250"><br>\
  5. <?php
  6. require('connexion.php');
  7. $query ="SELECT id_screen, nom_screen, descr_screen FROM screen";
  8. $result = mysql_query($query) ;
  9. $nb_ligne=mysql_numrows($result);
  10. $debut=$nb_ligne-5;
  11. $num=rand($debut,$nb_ligne);
  12. $query ="SELECT id_screen, nom_screen, descr_screen, date_screen FROM screen WHERE $num=id_screen";
  13. $result = mysql_query($query) ;
  14. while ($data = mysql_fetch_array($result)) {
  15.  $id_screen=$data["id_screen"];?>\
  16.  <a href="../media/screen.php?screen=<?echo $id_screen?>" target=_blank><img src="../media/<?echo $id_screen?>.jpg" height="180" width="200" alt="WAR" border="no_contour"></a><br>\
  17.  <div class="sign"><? echo $data["date_screen"]; ?> <a href="media/plus_screen.php">Voir tous</a> les screens.\
  18. <?}?>\
  19. </div>\
  20. </td></tr></table>\
  21. </td>\


 
J'ai voulu insérer mon php. Mais là hic.
Si je met des \ à chaque fin de ligne ça plante.
Si je met \ à chaque fin de ligne html (hors php donc, comme dans l'extrait) ça ignore le php.
Si je protège les ' de mon require, ça plante.
Si je met aucun \ entre <?php et le ?> final ça ignoe tout mon code.
 
Donc là je sais pas trop comment gérer mon php.

Reply

Marsh Posté le 21-03-2006 à 22:26:07    

avec php, utilise addslashes()

Reply

Marsh Posté le 21-03-2006 à 22:28:00    

ha ouais, tu peut pas mettre du php à l intérieur de l array, uniquement du html (ou du javascript en plus...). tu doit te débrouiller autrement pour php.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed