Module javascript non fonctionnel sous Firefox...

[Constant]

Bonjour,

Je suis à bâtir un site appelé PHOTOS-CROISÉES.
Le site a pour but d'offrir des casse-tête en ligne avec la possibilité de gagner des prix.
Bien que le site soit assez avancé il est encore en développement.
Veuillez vous référer à l'adresse temporaire suivante pour le voir : http://www.conception-coscaco.com/photo ... index.html

Même si tout fonctionne parfaitement sous IE, je rencontre un problème majeur lorsque j'y accède sous Firefox.
En effet, le module primaire, celui qui permet de déplacer les morceaux, ne fonctionne pas sous Firefox. Pouvez-vous m'aider ?

Il s'agit en fait d'un module java script assez simple mais que je n'arrive pas à modifier correctement. Voilà une copie ci-dessous :
________________________________________________________________________
var temp = new Image();
var loc;
var gotit;

function exch()
{
if ((event.button == 1) && (event.srcElement.className == "drag"))
{
if (gotit == 1)
{
gotit = 0;
document.images[loc].src = document.images[event.srcElement.name].src;
document.images[event.srcElement.name].src = temp.src;
}
else
{
gotit = 1;
loc = event.srcElement.name;
temp.src = document.images[loc].src;
}
}
}
document.onmousedown=exch
_________________________________________________________________________________________________

Si vous pouviez m'indiquer quoi faire afin que celui-ci fonctionne sous Firefox, j'apprécierais beaucoup cette aide.

Je remercie quiconque m'apportera de l'aide.

Carole et Constant

[jpj]

Bonsoir,

En fait, cela fonctionne uniquement avec Internet Explorer. Avec Opera, Safari ou Chromium, c'est pareil qu'avec Firefox.

Je déplace dans "Développement web".

[calimo]

Salut,
As-tu regardé dans la console d'erreurs ? (Outils > Console d'erreurs ou bouton Firefox > Développement web > Console d'erreurs)
Tu as plusieurs erreurs qui apparaissent :

Code : Tout sélectionner

Erreur : checkit is not defined
Fichier Source : http://www.conception-coscaco.com/photos-croisees/pc-A1-02.html
Ligne : 1
Erreur : event is not defined
Fichier Source : http://www.conception-coscaco.com/photos-croisees/js/puzzle_drag.js
Ligne : 17

Le fichier semble pourtant bien appelé. J'avoue ne pas trop savoir de quoi ça peut venir, il faut dire qu'il y a tellement de code que c'est difficile à débugguer. Souvent dans ce genre de cas il faut essayer de réduire la page à sa plus simple expression en enlevant tout ce qui est inutile. Bien souvent, le problème devient alors évident

[Bobe]

Moi, j'ai des jQuery et checkCookie is not defined là.

[Teraoctet]

Bonsoir Bobe en effet aucune définition ni JQuery ni Checkcookie.
Il apparaît évident en ayant fouillé sur IE8 que cela n'est pas nécessaire mais une substitution pas encore bien définie peut provoquer un freeze dans IE8. comme toujours ms est encore en retard
Bonne soirée

[Constant]

Merci à tous ceux qui ont répondu.
Je suis allé voir le Console Web des Outils dans Firefox (plutôt brillant!!!)
Toutefois, après avoir tenté de définir la variable "event", tel que Firefox semble le mentionner, cela ne fonctionne toujours pas.
Je poursuis donc mes recherches.

Toute aide est encore bienvenue.

Carole/Constant

[Constant]

En fait, la page à vérifier est plutôt une des casse-tête que l'index. Prenez celle-ci par exemple, que j'ai notée :
http://www.conception-coscaco.com/photo ... T1-01.html

Le site n'est pas encore nettoyé, dans la Console Web du Développeur Web ne vous souciez pas des autres erreurs S.V.P.
Mon problème est encore et toujours de définir le event.button ???

Merci,
Carole/Constant

[Bobe]

Tu ne peux pas déclarer une propriété d'un objet de cette manière. Par ailleurs, il est inutile de déclarer event.button.

Sur IE, l'objet event est disponible dans le scope global. C'est à dire qu'il est attaché à l'objet window, donc il est disponible partout, y compris dans ta fonction exch(). Ce n'est pas le cas dans Firefox et les autres navigateurs qui implémentent le modèle d'évènement DOM du W3C. Dans ce modèle, l'objet event est passé en argument de la fonction qui est appelée lorsque survient l'évènement en question.

Ensuite, dans ta fonction exch(), tu utilises event.srcElement, qui est lui aussi une création de microsoft. Le modèle standard définit qu'on peut accéder à l'élément sur lequel survient l'évènement avec event.target.

Pour finir, microsoft et le w3c n'accordent pas la même valeur à event.button. Avec un click du bouton gauche, event.button aura la valeur 1 pour microsoft alors qu'il aura la valeur 0 pour le W3C (je sais, c'est le bordel). Cette propriété est quand même utilisable car avec un click du bouton droit, event.button aura la valeur 2 dans les deux modèles.

Voici la fonction corrigée :

Code : Tout sélectionner

function exch(evt)
{
     if (!evt) var evt = window.event;
     var target  = evt.target ? evt.target : evt.srcElement;
    
        if ((evt.button != 2) && (target.className == "drag"))
        {
			if (gotit == 1) 
            {
            gotit = 0;
            document.images[loc].src = document.images[target.id].src;
            document.images[target.id].src = temp.src;				
            }			
			else
            {
            gotit = 1;
            loc = target.id;
            temp.src = document.images[loc].src;
			}
		}
}

PS: Et retire le var event.button;

Une page un peu vieille, mais qui peut t'aider à t'y retrouver entre les deux modèles d'évènements DOM : http://www.quirksmode.org/dom/w3c_events.html

[Constant]

Merci beaucoup à vous Bobe,

J'ai bien essayé le code fourni, sans et avec l'appel de fonction dans la table (onMouseDown="exch(evt"), mais ni un ni l'autre ne fonctionne.
Je cherche toujours.
Aussi, si je n'y arrive pas, serait-il plus simple (compatible avec IE et Firefox) de travailler avec une formule où l'on déplacerait les morceaux en les traînant (un vrai drag) avec la souris ?

Carole & Constant

[Bobe]

onmousedown="exch(event)"

[Constant]

Merci tout de même.
Passons à une autre problème.

Sur un autre site, j'aimerais qu'une certaine image change en fonction de certaines dates, saison, fête, etc.
Voyez la page (test) suivante :
http://www.shoppinggitesquebec.com/index-new.html

À l'intérieur, dans le head, vous y trouverez l'emplacement exact de ma demande d'aide.

Encore merci à ceux et celles qui pourront nous aider.

Carole/Constant

[Constant]

Malgré la bonne suggestion de Bobe, on a toujours pas trouver la solution...

Rappel : nous cherchons à faire fonctionner un script pour déplacer les morceaux de casse-tête.
Celui pour Internet Explorer (puzzle_drag.js) fonctionne bien, mais celui pour Firefox (puzzle_drag_firefox.js) ne fonctionne toujours pas...

*** Des notes guide sont inscrites dans le html et le fichier js.

Merci à l'avance pour votre aide.

Carole & Constant

[Constant]

Nous avions oublié de vous rappeler la page en test concernée...

http://www.conception-coscaco.com/photo ... T1-01.html

Carole & Constant

[Abraxas]

T'as essayé de regarger la source sur ce puzzle: http://jeremie.patonnier.net/experience ... uzzle.html (ça prend un peu de temps à charger car le puzzle est une vidéo HTML5) mais ça peut aider éventuellement...

[Constant]

Ce site de puzzle animé est excellent, merci de la référence.

Toutefois, pour ceux et celles que cela intéresse (surtout Bobe j'imagine), j'ai trouvé la solution en modifiant la formule que vous m'aviez suggérée.
En effet, en faisant ceci :
1- j'ai remis dans le script (nouveau nom - puzzle_drag_EI_FF.js) les name au lieu des id
2- j'ai changé la première variable interne pour une que j'ai trouvé sur W3C.
3- j'ai réinstallé le onmousedown=exch(event) dans le html

Le site n'est pas encore tout ajusté, mais voyez toujours la page test qui fonctionne autant sous Firefox que sous Internet Explorer :
http://www.conception-coscaco.com/photo ... T1-01.html

Merci à tous ceux/celles qui ont répondu, surtout à Bobe qui m'a mise sur la bonne voie.

Carole

P.S.: Nous travaillons maintenant sur la confirmation des morceaux bien placés.