Javascript et Firefox

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Javascript et Firefox

jdmontigny

-§ L'Aube Eternelle §-

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?

Publicité

jdmontigny

-§ L'Aube Eternelle §-

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

anapajari

s/travail/glanding on hfr/gs;

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?

jdmontigny

-§ L'Aube Eternelle §-

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

jdmontigny

-§ L'Aube Eternelle §-

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?

anapajari

s/travail/glanding on hfr/gs;

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

Bidem

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

Code :

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 :

document.getElementById('txt1_droite').className='visible_droite';

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

Code :

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

jdmontigny

-§ L'Aube Eternelle §-

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 :

function reculera(x){
bloc.style.left = (parseInt(bloc.style.left) - 25) + "px";
if(parseInt(bloc.style.left)==x){
clearInterval(timer);
exit();
}
}
function allerA(x){
if(parseInt(bloc.style.left)<x){ avancera(x); }
if(parseInt(bloc.style.left)>=x){ reculera(x); }
}
...
invisible(lien_precedent);
if(parseInt(bloc.style.left)!=0){
setInterval('allerA(0)',10);
}
affichage(4);
lien_precedent=4;
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

jdmontigny

-§ L'Aube Eternelle §-

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

Bidem

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)

Publicité

jdmontigny

-§ L'Aube Eternelle §-

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.

jdmontigny

-§ L'Aube Eternelle §-

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 :

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.
Fichier Source : http://localhost/workspace/
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

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:

Bidem

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

Code :

<html>
<head>
</head>
<body>
</body>
</html>

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

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

omega2

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.

jdmontigny

-§ L'Aube Eternelle §-

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

Message cité 1 fois

Bidem

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

jdmontigny

-§ L'Aube Eternelle §-

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.

jdmontigny

-§ L'Aube Eternelle §-

Voici le nouveau script après travail

Code :

<script language="Javascript">
var x;
var timer = null;
var lien = 1;
var lien_precedent=2;
function allerA(x){
if(parseInt(document.getElementById('image').style.left)<x){
document.getElementById('image').style.left = (parseInt(document.getElementById('image').style.left) + 25) + "px";
timer=setTimeout("allerA(x)", 100);
}
else {
if(parseInt(document.getElementById('image').style.left)>x){
document.getElementById('image').style.left = (parseInt(document.getElementById('image').style.left) - 25) + "px";
timer=setTimeout("allerA(x)", 100);
}
else {
clearTimeout(timer);
}
}
}
function affichage(lien){
switch(lien){
case 1:
document.getElementById('txt1_droite').className='visible_droite';
bre*ak;
case 2:
document.getElementById('txt2_droite').className='visible_droite';
bre*ak;
case 3:
document.getElementById('txt3_droite').className='visible_droite';
br*eak;
case 4:
document.getElementById('txt4_droite').className='visible_droite';
bre*ak;
}
}
function invisible(lien){
switch(lien){
case 1:
document.getElementById('txt1_droite').className='cache';
bre*ak;
case 2:
document.getElementById('txt2_droite').className='cache';
bre*ak;
case 3:
document.getElementById('txt3_droite').className='cache';
br*eak;
case 4:
document.getElementById('txt4_droite').className='cache';
bre*ak;
}
}
function afficheLien(lien){
switch(lien){
case 1:
invisible(lien_precedent);
if(parseInt(document.getElementById('image').style.left)!=0){
allerA(0);
}
affichage(1);
lien_precedent=1;
b*reak;
case 2:
invisible(lien_precedent);
if(parseInt(document.getElementById('image').style.left)!=-1025){
allerA(-1025);
}
affichage(2);
lien_precedent=2;
break;
case 3:
invisible(lien_precedent);
if(parseInt(document.getElementById('image').style.left)!=-2050){
allerA(-2050);
}
affichage(3);
lien_precedent=3;
br*eak;
case 4:
invisible(lien_precedent);
if(parseInt(document.getElementById('image').style.left)!=0){
allerA(0);
}
affichage(4);
lien_precedent=4;
b*reak;
}
}
function start(){
affichage(2);
}
</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...
zen zen....qu'est ce qu'on fait pas pour etre ami des firefoxien

Merci encore pour votre aide.

jdmontigny

-§ L'Aube Eternelle §-

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.

nargy

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

Message cité 1 fois

nargy

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

jdmontigny

-§ L'Aube Eternelle §-

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?

jdmontigny

-§ L'Aube Eternelle §-

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

nargy

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 :

<html>
<body style="margin:0px;" text=white bgcolor="#000000" alink=white vlink=white link=white>
<script>
var scrollspeed=16; // uniquement puissances de 2: 1,2,4,8,16...
var scrollamount=0;
var scrollposition=0;
</script>
<center>Titre</center>
<div style="width:1024px;height:450px;overflow:hidden;">
<div id="bandeau1" style="margin:0px;border-top:solid black 1px;width:1024px;height:450px;position:relative;background-color:#000000;">
</div>
<div id="bandeau2" style="margin:0px;border-top:solid black 1px;width:1024px;height:450px;position:relative;background-color:#000000;">
</div>
</div>
<script>
<!--
var page=1;
function changepage()
{
if(scrollposition<page*1024-1024-512)
scrollamount+=scrollspeed;
else if(scrollposition<page*1024-1024)
scrollamount-=scrollspeed;
else if(scrollposition==page*1024-1024)
scrollamount=0;
else if(scrollposition<page*1024-1024+512)
scrollamount+=scrollspeed;
else
scrollamount-=scrollspeed;
scrollposition=scrollposition+scrollamount;
var bandeau1=document.getElementById('bandeau1');
bandeau1.style.left=-scrollposition+'px';
var bandeau2=document.getElementById('bandeau2');
bandeau2.style.left=(-scrollposition+1024)+'px';
setTimeout("changepage()",100);
}
window.scrollbars=false;
var bandeau2=document.getElementById('bandeau2');
bandeau2.style.top='-451px';
changepage();
var pages=new Array(
'<font color=yellow><center><h2>Menu 1</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
'<font color=yellow><center><h2>Menu 2</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
'<font color=yellow><center><h2>Menu 3</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>',
'<font color=yellow><center><h2>Menu 4</h2><h3>Option 1</h3><h3>Option 2</h3><h3>Option 3</h3></center></font>'
);
var images=new Array(
'fond1.jpg',
'fond2.jpg',
'fond3.jpg',
'fond2.jpg'
);
function affichepage(num)
{
var bandeau=null;
if(page==1)
var bandeau=document.getElementById('bandeau2');
else
var bandeau=document.getElementById('bandeau1');
bandeau.innerHTML=pages[num];
bandeau.style.background='url('+images[num]+')';
if(page==1)
page=2;
else
page=1;
}
affichepage(0);
-->
</script>
<center>
<a href="javascript:void(0);" onclick="javascript:affichepage(0);">[Page 1]</a>  
<a href="javascript:void(0);" onclick="javascript:affichepage(1);">[Page 2]</a>  
<a href="javascript:void(0);" onclick="javascript:affichepage(2);">[Page 3]</a>  
<a href="javascript:void(0);" onclick="javascript:affichepage(3);">[Page 4]</a>
</center>
</body>
</html>

nargy

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.

nargy

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

Code :

<div style="width:1024px;height:450px;overflow:hidden;">
<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;">
</div>
<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;">
</div>
</div>

nargy

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

jdmontigny

-§ L'Aube Eternelle §-

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.

jdmontigny

-§ L'Aube Eternelle §-

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

jdmontigny

-§ L'Aube Eternelle §-

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

nargy

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

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

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

jdmontigny

-§ L'Aube Eternelle §-

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

nargy

> Merci encore, décidément...
pas de quoi

ça déchire comme effet graphique, j avais jamais essayé.

jdmontigny

-§ L'Aube Eternelle §-

jdmontigny

-§ L'Aube Eternelle §-

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

jdmontigny

-§ L'Aube Eternelle §-

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 :

<div id="prechargement">
<img src="fond1.jpg" alt="" />
<img src="fond2.jpg" alt="" />
<img src="fond3.jpg" alt="" />
</div>

style.css

Code :

#prechargement {
display: none;
}

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.

nargy

tu ajoute le javascript suivant tout à la fin:

Code :

function preloadfonds()
{
for(i=0;i<images.length;i++)
{ var img=new Image(); img.src=images[i]; }
}
setTimeout('preloadfonds()',1);

jdmontigny

-§ L'Aube Eternelle §-

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

Extrait de mon code

Code :

<img src="§.gif" alt="§"> <a href="guilde/bloc.php">L\'Aube Eternelle recrute</a> <img src="§.gif" alt="§"><br>\
<a href=#recrutement>Plus...</a>\
</div></td></tr><tr><td><div class="som_dyn">\
<img src="screens.gif" width="250"><br>\
<?php
require('connexion.php');
$query ="SELECT id_screen, nom_screen, descr_screen FROM screen";
$result = mysql_query($query) ;
$nb_ligne=mysql_numrows($result);
$debut=$nb_ligne-5;
$num=rand($debut,$nb_ligne);
$query ="SELECT id_screen, nom_screen, descr_screen, date_screen FROM screen WHERE $num=id_screen";
$result = mysql_query($query) ;
while ($data = mysql_fetch_array($result)) {
$id_screen=$data["id_screen"];?>\
<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>\
<div class="sign"><? echo $data["date_screen"]; ?> <a href="media/plus_screen.php">Voir tous</a> les screens.\
<?}?>\
</div>\
</td></tr></table>\
</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.

nargy

avec php, utilise addslashes()

nargy

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.

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Javascript et Firefox

Sujets relatifs
Javascript pour greasemonkey ''extension firefox''	Firefox n'aime pas le XML+XSL+Javascript
probleme de compatibilité IE/firefox en javascript	Firefox 1.5 et Javascript 1.6
Rendre un javascript compatible sous firefox	[résolu] erreur javascript sous IE (FireFox et Opera ok)
FireFox, Javascript et FLASH	Parametre en javascript avec Firefox
javascript div et scientillement sous firefox	erreur JavaScript dans firefox
Plus de sujets relatifs à : Javascript et Firefox

Page générée en 0.140 secondes