Discussion :

[finalfx]

Bonjour,

j'ai utilisé pas mal de Jquery dans un projet de site que je suis occupé à développer, travaillant sous Firefox, Safari et Chrome tout semblait fonctionnait pour le mieux, jusqu'à ce que je teste ce site sur Internet Explorer (toutes versions testées), sur IE6 pas trop grave car je comptais pas rendre le site visible sur ce navigateur mais IE7 et IE8 :o là c'est la catastrophe!!
en fait lorsque je clique sur une des boites du menu au centre de la page, le contenu du div ne s'affiche pas et je reçois le message d'erreur suivant :

"Message : Argument non valide.
Ligne : 144
Caractère : 219
Code : 0"


J'ai fait des alert à chaque ligne pour voir où le script bloquait et apparemment c'est au niveau de cette condition que quelque chose bloque l'exécution 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
                        if(current == $currentBox.index()){
                            /* put it back (decrease width,height, and set the top and left like it was before).
                            the previous positions are saved in the divinfo obj*/
                         $("#the_lights").css({'display' : 'block'});
                         $("#the_lights").fadeTo(0.9,0);
						 $("#the_lights").stop().animate({
 
                                    'opacity'    : '0'
                            },800,'easeOutBack').fadeOut();
									$currentBox.stop().animate({
                                    'top'         : divinfo.initial[$currentBox.index()].top,
                                    'left'        : divinfo.initial[$currentBox.index()].left,
                                    'width'     : '146px',
 
                                    'height'    : '81px'
                            },800,'easeOutBack').find('.boxcontent').fadeOut();
 
/*													$('.reveal-modal-bg2').css('z-index','0');
													$('.reveal-modal-bg2').css('background','rgba(0,0,0,0)');
*/
                            $('#littleBoxes > div').not($currentBox).each(function(){
                                var $ele         = $(this);
                                var elemTop     = divinfo.initial[$ele.index()].top;
                                var elemLeft     = divinfo.initial[$ele.index()].left;
/*                                var elemZindex     = divinfo.initial[$ele.index()].z-index;
*/                                $ele.stop().show().animate({
                                    'top'         : elemTop,
                                    'left'        : elemLeft,
/*									'z-index'     : elemZindex,
*/                                    'opacity'    : 1
                                },800);
                            });
							$('#frame-bottom').css('z-index','1999');
							$('#frame-top').css('z-index','1999');
                            current = -1;
                        }
                        /* if we are clicking on a small box : */
                        else{
                            /* randomly animate all the other boxes.
                            Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
                            This range is considering the initial lefts/tops of the elements. It's not the exact right
                            range, since we would have to calculate the range based on each one of the boxes. Anyway, it
                            fits our needs...
                            */
                            $('#littleBoxes > div').not($currentBox).each(function(){
                                var $ele = $(this);
                                $ele.stop().animate({
                                    'top' : (Math.floor(Math.random()*601) - 150) +'px',
                                    'left': (Math.floor(Math.random()*601) - 150) +'px',
/*									'z-index' : 999,
*/                                    'opacity':0
                                },800,function(){
                                    $(this).hide();
                                });
                            });
 
                            /* expand the clicked one. Also, fadeIn the content (boxcontent)
                            if you want it to fill the space of the littleBoxes container,
                            then these are the right values */
                            var newwidth     = $this.next('div').width();
 
                            /*var newheight     = 679;*/
							var newheight = $this.next('div').height();
							var newZindex = 999;
							var newleft = ((438 - newwidth) / 2);
							/*alert(newleft);*/
                            $currentBox.stop().animate({
                                'top'     : '-100px',
                                'left'    : newleft,
								'z-index' : newZindex,
                                'width' : newwidth +'px',
                                'height': newheight+'px'
 
                            },800,'easeOutBack',function(){
                                current = $currentBox.index();
                                $(this).find('.boxcontent').fadeIn();
 
 
                            });
 
 
 
                        }

Merci d'avance pour votre aide!

[dukej]

Ton problèmes vient de cette méthode, au moment où la méthode doit "animer" le z-index.
Un z-index ça ne s'anime pas sous IE, à ce moment là la méthode d'animation de jquery essaye de faire un elm.style.zIndex = 999 + 'px';
donc setter une chaine de caractère à la place d'un nombre.

Au lieu de corriger jquery, désactive l'animation des zindex sur toutes tes animations pour IE 7 et 8 :

donc si on prend le code existant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$currentBox.stop().animate({
                                'top'     : '-100px',
                                'left'    : newleft,
				'z-index' : newZindex,
                                'width' : newwidth +'px',
                                'height': newheight+'px'
                            },800,'easeOutBack',function(){
                                current = $currentBox.index();
                                $(this).find('.boxcontent').fadeIn();
                            });

Il faut sortir l'objet de styles et le déclarer avant, ensuite pour les navigateurs autres que IE, ajouter le z-index

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
 
var ie = document.all && /MSIE [678]/.test(navigator.userAgent);
var properties = {
                                'top'     : '-100px',
                                'left'    : newleft,
                                'width' : newwidth +'px',
                                'height': newheight+'px'
                            }
if(!ie) 
    properties['z-index'] = 999;
$currentBox.stop().animate(properties,800,'easeOutBack',function(){
                                if(ie) {
                                   $(this).css('z-index', 999);
                                }
                                current = $currentBox.index();
                                $(this).find('.boxcontent').fadeIn();
                            });

L'idée est là je te laisse voir et tester.

[finalfx]

Merci, effectivement c'est lié à ce problème de Z-index, je vais tenter de résoudre ça en suivant vos conseils...
Au fait merci pour les cours et tutoriels Javascript et pour la FAQ Javascript.