Problème JavaScript avec IE

Question

J'ai construit un site il y a environ 6 mois et ai conçu un menu avec une certaine interactivité en utilisant jQuery. Cela a bien fonctionné chez mes amis (Firefox, Safari, etc.).

Il s'avère que maintenant IE7 & 8 ne jouent pas à la balle.

L'erreur dans IE pointe vers jQuery (sur le CDN de Google) avec invalid argument.

La page peut être visualisée here. Déplacez votre souris sur les en-têtes supérieurs pour voir ce qui devrait se passer dans Firefox. Ce n'est pas passant dans IE7/8.

Voici le code source de mon effet

String.prototype.safe = function() { 
    var string = this; 
    string = string.toLowerCase().replace(/\s/g, '-'); 
    string = string.replace(/&/g, 'and'); // & appears as just & 
    return string; 
} 

var subMenu = { 
    activeMenuId: 'submenu-about-us', 
    hideDelay: null, 
    init: function(){ 
     var self = this; 
     $('#header').append('<div id="sub-menu"></div><div id="hover"></div>'); 
     $('#background-elements').append('<span></span>'); 

     var $subMenu = $('#sub-menu'); 
     var $hover = $('#hover'); 

     $('#menu li ul').each(function(){ 
      var id = 'submenu-' + $(this).parents('li').find('.inner').text().safe(); 
      $(this).attr({ 
       id: id 
      }).prependTo($subMenu); 
     }); 

     // move slider to where it should be 

     var uri = document.location.pathname; 

     uri = uri.replace(PATH_BASE + '/', '') 

     var uriSegments = uri.split('/'); 

     var currentCategory = uriSegments[0]; 

     if (currentCategory) { 

      var uriSegmentToListIndex = {}; 

      uriSegmentToListIndex['about-us'] = 0; 
      uriSegmentToListIndex['tenant-advice-and-advocacy'] = 1; 
      uriSegmentToListIndex['housing-services'] = 2; 
      uriSegmentToListIndex['tenants'] = 3; 
      uriSegmentToListIndex['applicants'] = 4; 
      uriSegmentToListIndex['housing-development-projects'] = 5; 
      uriSegmentToListIndex['news-and-publications'] = 6; 
      uriSegmentToListIndex['contact'] = 7; 

      var currentListItemIndex = uriSegmentToListIndex[currentCategory]; 

      var sliderDropShadowOffset = 14; 

      if (currentListItemIndex) { 

       var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset; 
      } 

      $hover.css({ 
       left: sliderLeft + 'px' 
      }); 

      this.activeMenuId = 'submenu-' + currentCategory; 

      // make the right sub menu appear 

      $subMenu.find('ul').hide(); 
      $('#submenu-' + currentCategory).fadeIn(500); 
     } 




     $('#menu li .inner').parents('li').hoverIntent(function(){ 

      var id = 'submenu-' + $(this).find('.inner').text().safe(); 

      if (id != self.activeMenuId) { 

       self.activeMenuId = id; 

       $subMenu.find('ul').hide(); 

       var newLeft = $(this).position().left + sliderDropShadowOffset; // offset for drop shadow 



       $hover.animate({ 
        left: newLeft + 'px' 
       }, 500, function(){ 
        $subMenu.find('ul').hide(); // sometimes some remain 
        $('#' + id).fadeIn(800); 

       }); 

      } 



     }, function(){ 
      // do nothing! 

     }); 


    } 



} 

J'ai essayé les suspects habituels et avait un aller avec des outils de développement IE8, mais ne l'ai pas compris celui-ci dehors encore. Je me tourne donc vers la communauté Stack Overflow :)

Quelqu'un connaît le problème?

Answer 1

L'erreur se produit dans cette ligne sur IE 8:

$hover.css({ 
    left: sliderLeft + 'px' 
}); 

La variable sliderLeft n'est jamais initialisées car currentListItemIndex est 0:

if (currentListItemIndex) { 
    var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset; 
} 

>> currentListItemIndex 
0 

>> sliderLeft 
undefined 

Mise à jour

IE 8 a une vraiment bon débogueur intégré (enfin):

1. Assurez-vous qu'il n'est pas désactivé en allant dans Outils -> Avancé et en décochant l'option "Désactiver le débogage de script (Internet Explorer)". Lorsque le navigateur rencontre l'erreur sur la page, une boîte de dialogue vous demande si vous voulez exécuter le débogueur.

2. Assurez-vous que l'option "Utiliser le débogueur de script intégré dans Internet Explorer" est activée. Hit "Oui" pour démarrer le débogueur.

3. Un grand nombre de fois le code jQuery commet une erreur lors de la transmission d'une valeur inattendue. Ce n'est pas très utile au départ car le problème est rarement la faute de jQuery et la plupart du temps le code est minimisé de toute façon. Vous devrez sélectionner l'onglet "Call Stack" dans le débogueur, puis suivre les appels jusqu'à la pile jusqu'à ce que vous atteigniez le code qui a causé le problème. C'est comme ça que j'ai pu trouver la ligne exacte dans votre script. Vous pouvez utiliser les onglets Console, Locals et Watch pour exécuter un script ou afficher l'état actuel des variables utilisées au moment où l'erreur s'est produite (comme les variables currentListItemIndex et sliderLeft).

Answer 2

Vous utilisez jQuery 1.3.1, qui est une ancienne version de jQuery, et vous obtiendrez probablement cette résolution en ajoutant la dernière version de jQuery.