[Jquery] Ne fonctionne pas sous IE

**CactO_o's** · 29/07/2008, 00h26

Bonjour,

Je suis actuellement en train de coder un petit jeu sur le net. J'utilise Jquery et celui-ci ne fonctionne pas sur IE..
C'est plutôt embêtant vu que malheureusement un bon pourcentage des personnes sont sur IE...

Le but du code est d'afficher seulement une partie d'une carte en tant que background sur un Div. Ensuite grâce à des flèches sur les côtés je change la position du background et sa me permet de me déplacé sur la carte..

Voici le code de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript" src="javascript.js"></script>
   <title>Test</title>
 
  <script type="text/javascript">  
  	$(document).ready(function(){
 
    	var posX = 500;
		var posY = 400;
 
		var tailleX = 1536;
		var tailleY = 1536;
		var affichageX = 500;
		var affichageY = 400;
 
		var zoom = 2;
 
		$(".haut .carte img").click(function(){
			posY = posY +300;
			if(posY > tailleY){
				posY=tailleY;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
      	$(".bas .carte img").click(function(){
			posY = posY -300;
			if(posY < affichageY){
				posY=affichageY;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
	  	$(".centre .gauche img").click(function(){
			posX = posX +300;
			if(posX > tailleX){
				posX=tailleX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
		$(".centre .droite img").click(function(){
			posX = posX -300;
			if(posX < affichageX){
				posX=affichageX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
	  	$(".haut .gauche img").click(function(){
			posY = posY +300;
			if(posY > tailleY){
				posY=tailleY;
			}
			posX = posX +300;
			if(posX > tailleX){
				posX=tailleX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
		$(".bas .gauche img").click(function(){
			posY = posY -300;
			if(posY < affichageY){
				posY=affichageY;
			}
			posX = posX +300;
			if(posX > tailleX){
				posX=tailleX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
	  	$(".haut .droite img").click(function(){
			posY = posY +300;
			if(posY > tailleY){
				posY=tailleY;
			}
			posX = posX -300;
			if(posX < affichageX){
				posX=affichageX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
      	$(".bas .droite img").click(function(){
			posY = posY -300;
			if(posY <affichageY){
				posY=affichageY;
			}
			posX = posX -300;
			if(posX < affichageX){
				posX=affichageX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});	
 
	});
  </script>
 
</head>
<body>
  <table class="total">
  		<tr class="haut">
			<td class="gauche"><img src="flechehautgauche.jpg"/></td>
			<td class="carte"><img src="flechehaut.jpg"/></td>
			<td class="droite"><img src="flechehautdroite.jpg"/></td>
		</tr>
		<tr class="centre">
			<td class="gauche"><img src="flechegauche.jpg"/></td>
			<td class="carte">&nbsp;</td>	
			<td class="droite"><img src="flechedroite.jpg"/></td>
		</tr>
		<tr class="bas">
			<td class="gauche"><img src="flechebasgauche.jpg"/></td>
			<td class="carte"><img src="flechebas.jpg"/></td>
			<td class="droite"><img src="flechebasdroite.jpg"/></td>
		</tr>
  </table>
  <span class="zoom">&nbsp;</span>
 
</body>
</html>

Pour vos informations javascript.js contient le contenu de cette page (code décompressé page 2)

Voici la page CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.haut, .bas{
	height : 50px;
}
.centre{
	height : 400px;
	text-align : center;
}
 
.droite, .gauche{
	width : 50px;
}
.carte{
	width : 500px;
}
 
.centre .carte{
	width:500px;
	height:100%;
	margin-left: 50px;
 
	background : url(/image.jpg);
	background-position: 500px 400px;
}
tr{
	text-align : center;
}

image.jpg est une image de 1536*1536px
les flèches sont des images de 50*50px

J'ai suivis le post de cette page mais je trouves pas comment m'en sortir...

Si quelqu'un arrive à m'aider je l'en remercie énormément...

Invité · 29/07/2008, 14h34

Bonjour,

Dans le CSS,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position: absolut;

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position: absolute;

A+

**CactO_o's** · 29/07/2008, 15h09

Problème au moment de l'envoi...

Quelqu'un peut supprimer ce message ?

**CactO_o's** · 29/07/2008, 15h09

Ups, désolé...

Cette ligne n'existait pas dans la version normal... Il ne faut pas y prendre compte... Elle y était juste au moment ou j'ai fait le copier/coller pour le forum et j'ai plus pensé qu'elle était ici...

J'ai fait aussi quelques modifications dans la page HTML afin de la rendre valide (je ne pense pas qu'il y ai du changement pour la suite des évenements)

Invité · 29/07/2008, 15h11

Re,

Peux-tu mettre un lien que l'on puisse voir ce que cela affiche?

A+

**CactO_o's** · 29/07/2008, 19h11

http://dev-gta.ifrance.com

Invité · 29/07/2008, 22h21

Salut,

En regardant FireBug, le html donne pour le td avec class="carte"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td class="carte" style="background-position: 2036px 2772px;"/>

C'est pas beau !

Préférable:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td class="carte" style="background-position: 2036px 2772px;"></td>

Moi, je dirais qu'il y a un pb dans la gestion de cette cellule

A+

**CactO_o's** · 30/07/2008, 13h16

Je viens d'éditer mon premier message afin de corriger les quelques erreurs provoquant des avertissements...

Sa ne change pas mon problème mais c'est toujours ça..

J'avais trouvé un autre post sur le sujet et j'ai réussi à faire marcher jQuery sur IE (avec le frameWork que je créer pour mon stage) mais pas ici pour la carte...

**Bovino** · 30/07/2008, 13h31

J'utilise Jquery et celui-ci ne fonctionne pas sur IE..

Depuis quand ???

Invité · 30/07/2008, 13h45

Bonjour Bovino,

Toujours aussi explicite pour trouver une solution

A+

**CactO_o's** · 30/07/2008, 13h49

Envoyé par Bovino

Depuis quand ???

Ben tu peux regarder...Avec le code que j'ai mis dans mon premier post, le script fonctionne sous FF et Safari mais pas sous IE

**Bovino** · 30/07/2008, 13h49

Bonjour...

Oui, je sais que je suis pas très explicite, mais le problème de la page donnée en lien ne provient pas forcément de jQuery qui fonctionne très bien sous IE à condition que l'on ne fasse pas trop de 'salade de scripts'...

**CactO_o's** · 30/07/2008, 13h52

Envoyé par Bovino

Bonjour...

Oui, je sais que je suis pas très explicite, mais le problème de la page donnée en lien ne provient pas forcément de jQuery qui fonctionne très bien sous IE à condition que l'on ne fasse pas trop de 'salade de scripts'...

Jusque là, ta tout bon

Le problème c'est que.... j'arrive pas a trouver le problème

...

**Bovino** · 30/07/2008, 13h55

Le lien que tu as donné ne fonctionne pas avec FF non plus.
Pour le code que tu as fourni, j'attend aussi d'avoir la version non compressée de js.js...

**Bovino** · 30/07/2008, 14h02

Pour info, screenX et screenY sont des propriétés de l'objet Event pour FF seulement.

**CactO_o's** · 30/07/2008, 14h06

En faite je viens de me rendre compte que le code ne fonctionne que sous FF3

Voici la version non-compiler, j'avais mi celle que j'utilisais pour les personnes voulant faire des tests

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * @author Alexander Farkas
 */
 
(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state == 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/(\d+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(\d+)(px|\%|em|pt)\s(\d+)(px|\%|em|pt)/);
               return [parseFloat(res[1]),res[2],parseFloat(res[3]),res[4]];
           }
        }
	});
 
})(jQuery);

Je n'utilisais screenX et screenY que pour la taille de l'affichage, pas pour les variables Even de FF...
Je vais donc changer sur le code en les appelant plutôt affichageX et affichageY.

**CactO_o's** · 01/08/2008, 15h29

J'ai enfin trouver !!! j'appliquai les changements sur la class "carte"...

J'ai donc rajouter un id juste pour la map et je fais les changements dessus.. Tout marche ni quel..

[Jquery] Ne fonctionne pas sous IE

jQuery

Discussions similaires

Partager

Partager