Question

I am working on a basic slideshow, it works fine in Firefox however IE is giving me the following errors:

  Expected identifier, string or number  script.js, line 26 character 4
  Expected identifier, string or number  script.js, line 26 character 4
  Expected identifier, string or number  script.js, line 24 character 4
  Expected identifier, string or number  script.js, line 25 character 4
  Expected identifier, string or number  script.js, line 25 character 4
  Expected identifier, string or number  script.js, line 25 character 4
  Expected identifier, string or number  script.js, line 35 character 3
  Expected identifier, string or number  script.js, line 35 character 3
  Expected identifier, string or number  script.js, line 35 character 3
  Expected identifier, string or number  script.js, line 35 character 3
  Expected identifier, string or number  script.js, line 35 character 3
  Expected identifier, string or number  script.js, line 35 character 3
  Expected identifier, string or number  script.js, line 35 character 3

Here is my code (with line numbers attached).

1    $(document).ready(function(){
2                                                   
3       var slideshow = $("#slideshow");
4       var slides = slideshow.children(".slide");
5       var dimensions = {
6           position: slideshow.position(),
7           width: slideshow.width(),
8           height: slideshow.height(),
9           midX: slideshow.width()/2,
10          midY: slideshow.height()/2
11      };
12      var index = 0;
13      
14      slides.each(function(number){   
15          $(this).data("offset", {
16              left: dimensions.midX - ($(this).width()/2),
17              top: dimensions.midY - ($(this).height()/2)
18          });
19          $(this).css({
20              position: "absolute",
21              top: $(this).data("offset").top
22          });
23          if(number == 0) 
24          {
25              $(this).css({left: $(this).data("offset").left + "px"});
26          } 
27          else
28          {
29              $(this).css({left: dimensions.width + "px"});
30          }
31          
32          slideshow.css({
33              position: "relative",
34              overflow: "hidden",
35          });
36      });
37      
38      slideshow.bind('click', slideImages);
39      
40      function slideImages(e){
41          e.preventDefault();
42          $(this).unbind('click', slideImages);
43          var direction = (e.pageX - dimensions.position.left < slideshow.width() / 2) ? "left" : "right";
44          var leftOffset = (direction == "left") ? dimensions.width : -dimensions.width;
45          slides.eq(index).animate({left: leftOffset}, 500, function() {
46              $(this).css({left: -leftOffset});
47          });
48          
49          if (direction == "left")
50              index = (index == (0)) ? slides.length - 1 : index - 1;
51          else
52              index = (index == (slides.length - 1)) ? 0 : index + 1;
53          
54          slides.eq(index).css({left: -leftOffset}).animate({left: slides.eq(index).data("offset").left}, 500, function() {
55              slideshow.bind('click', slideImages);
56          });
57    
58      }
59      
60    });

Does anyone know what’s causing this?

Answer 1

The evil comma of doom has got you.

IE doesn’t forgive trailing commas in object literals.

slideshow.css({
    position: "relative",
    overflow: "hidden",   // <-- evil
});

remove all trailing commas like the above and you’re fine.