IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Erreur javascript sous IE rend le site inutilisable


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    104
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 104
    Par défaut Erreur javascript sous IE rend le site inutilisable
    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!

  2. #2
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    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.

  3. #3
    Membre confirmé
    Inscrit en
    Avril 2006
    Messages
    104
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 104
    Par défaut
    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.

Discussions similaires

  1. [Google Maps] gmap Erreur Javascript sous internet explorer
    Par stomerfull dans le forum APIs Google
    Réponses: 2
    Dernier message: 19/09/2012, 19h14
  2. Erreur JavaScript sous Chrome, Safari et IE8
    Par hsii04 dans le forum IGN API Géoportail
    Réponses: 16
    Dernier message: 04/07/2010, 12h26
  3. Erreur DOCTYPE et Javascript ? sous Internet Explorer
    Par jeanflo037 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 03/02/2009, 17h15
  4. [POO] Erreur javascript sous Explorer
    Par s-c-a-r-a dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 25/11/2008, 13h09
  5. Erreur javascript seulement sous IE
    Par deudtens dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 13/06/2006, 12h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo