Drupal jQuery won't load in IE using $(document).ready()

Question

This is my first jQuery script, which works great in Firefox and Chrome, but fails in Internet Explorer.

I load two scripts using my theme's .info file:

scripts[] = jquery.jfeed.pack.js
scripts[] = script.js

The first script is a jquery plugin that parses rss feeds for me. The second script looks like this:

var init = jQuery.getFeed({
    url: 'panorama.xml',
    success: 
    function(feed)
    {
      var image = feed.items[0].description;
      $('#page').css('background-attachment', 'fixed');
      $('#page').css('background-image','url('+image+')');
      $('#page').css('background-position', 'center 63px');
      $('#page').css('background-repeat', 'no-repeat');
    }
});

$(document).ready(init);

The effect is that an rss feed containing the path to a random image in the item's description is used to set the background of the div #page. The rss feed is generated by the cck and views module. This required some additional template customization, but it works.

Everything looks great except with IE. I have tried using the Microsoft Script Debugger, but it isn't very helpful (or I don't know how to use it). There is one runtime error which looks like it may be related to google analytics code (this only started appearing more recently):

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0) Timestamp: Sun, 9 Aug 2009 19:58:39 UTC

Message: 'a' is null or not an object Line: 1 Char: 1 Code: 0 URI: http://webdev/sites/default/files/js/js_77589ce906350e35d2f4994348346ad7.js

But beyond that, when I look in the debugger I see that the jQuery code I intended to run is commented out:

;eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+
<-- snip -->
;  var init = jQuery.getFeed({
      url: 'panorama.xml',
      success: 
      function(feed)
      {
        var image = feed.items[0].description;
        $('#page').css('background-attachment', 'fixed');
        $('#page').css('background-image','url('+image+')');
        $('#page').css('background-position', 'center 63px');
        $('#page').css('background-repeat', 'no-repeat');
      }
  });

$(document).ready(init);

I have verified that this is broken in IE8 and IE6. Can any of you help me understand what is wrong here? I'm still worried about what will happen in browsers that don't have javascript enabled, but I figure it's a moot point if this won't even run in IE.

I seem to have come up with a very hacked together solution to get the effect of a random background image. I originally just displayed the image in-line, but it needs to be wider than the page without creating scrollbars. Are there any alternatives to this javascript madness?

Answer 1

What version of jQuery are you using. You maybe having version incompatabilities with the external script you are using (I see it is a packed version which says to me it is quite old) and if you are running jQuery 1.3.2.

Could you explain the versions and give the url's to the plugins you are using.

If you can put the page online and use the full versions of scripts it is much easier to debug and spot issues. Packed script is impossible to debug.