jQuery doesn't work in IE8?

Question

Hi,

I am working on a site here: mfm.treethink.net All the jquery works fine in Firefox, Chrome and Safari but on IE8 it gives me errors and the banner at the top doesn't work (which uses the crossSlide jQuery plugin) and as well the image rollovers don't work with the colour change.

IE8 is telling me that the errors are on lines 53, 134 and 149 in the source, all of those lines are where the jquery function is declared.

$(document).ready(function(){

I am running jquery 1.4. Oddly enough, the other piece of jQuery I have on that page works, the artist browse/select menu on the right. But the banner and image rollovers don't.

Here are all the scripts I'm running:

1: the banner - doesn't work in IE8

<script type="text/javascript">
  $(function() {
    $('#banner').crossSlide({
      sleep: 5,
      fade: 1
    }, [
      <?php
   $pages = get_posts('numberposts=2000&post_type=artist&post_status=publish');

   $i = 1;
   foreach( $pages as $page ) {
       $content = $page->post_title;
       if( empty($content) ) continue;

       $content = apply_filters('the_content', $content);

       ?>

       { src: '/wp-content/uploads/<?php echo $page->post_name ?>.jpg' },

<?php $i++;

   }    ?>
    ]);
  });

</script>

2 - image rollovers - doesn't work in IE8

<script type="text/javascript">

$(function(){

    $("ul#artists li").hover(function() { /* On hover */

    var thumbOver = $(this).find("img").attr("src"); /* Find image source */

    /* Swap background */

    $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') center bottom no-repeat'}); 
    $(this).find("span").stop().fadeTo('fast', 0 , function() {
        $(this).hide()
    }); 
    } , function() {
        $(this).find("span").stop().fadeTo('fast', 1).show();
    });

});

</script>

3 - the artist select - works in IE 8

<script>
    $("#browse-select").change(function() {
    window.location.href = $(this).val();
});
    </script>

These scripts were done by referencing previously made scripts, like I said I'm still new to jQuery. The second works in IE8 and the first one is the one that doesn't. I noticed the third one, the only one working, is written differently than the first two non-working ones without a function declaration at the top. Could this have anything to do with it?

Any help figuring out this problem would be so appreciated.

Thanks a lot, Wade

Answer 1

You don't post the actual JavaScript code but the PHP you've posted probably creates objects with trailing commas:

{foo: 1, bar: 2,}

Internet Explorer doesn't support that. You must generate something like:

{foo: 1, bar: 2}