title: $ document ready not working in ie8
body: <p>I have a slight issue with my javascript not working in IE8. Works fine in firefox, ie9 and chrome but not ie8. I know its to do with document ready working differently in ie8 but I cant find the answer. See code below.</p>
  
  <pre><code>// JavaScript Document
  /* Set Opacity to 0 for all list items that do not have class show
  This prevents the gallery animation from jumping around unexpectedly.
  */
  function clearShowClass() {
      setTimeout(timedInterval, 1000);
  };
  
  function timedInterval() {
      $('ul.slideshow li').not('.show').css("opacity", 0);
      clearShowClass();
  };
  
  
  function slideShow(speed) {
  
      //Call the gallery function to run the slideshow
      var timer = setInterval('gallery()', speed);
  
      //Pause the slideshow on mouse over content
      $('#footer, ul.slideshow').hover(
  
      function () {
              clearInterval(timer);
      },
  
      function () {
              timer = setInterval('gallery()', speed);
      });
  } // End of slideshow
  /* Slideshow gallery main images */
  
  function gallery() {
      //if no IMGs have the show class, grab the first image
      var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li.first'));
  
      //Get next image, if it reached the end of the slideshow, rotate it back to the first image
      var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));
  
      //Set the fade in effect for the next image, show class has higher z-index
      next.css({
              opacity: 4.0
      }).addClass('show').animate({
              opacity: 4.0
      }, 1000);
  
      // Hide the current image
      current.animate({
              opacity: 0.0
      }, 1000).removeClass('show');
  
      //if no thumbnails have the highlight class, grab the first thumbnail
      var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first'));
  
      var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li'));
  
      nextThumb.addClass('highlight');
      currentThumb.removeClass('highlight');
  }; // End of Gallery
  function thumbInt() {
      for (i = 1; i &lt;= $('ul.slideshow li').length; i++) {
              $('#footer .thumbnail' + i).bind('click', {
                      iteration: i
              }, function (event) {
                      $('ul.slideshow li').removeClass('show').css("opacity", 0).add($('ul.slideshow li:nth-child(' + event.data.iteration + ')').addClass('show').css("opacity", 0.0).animate({
                              opacity: 1.0
                      }, 1000));
  
                      $('#footer li').removeClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ')').addClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ') img')));
              });
      };
  };
  
  var prmEnd = Sys.WebForms.PageRequestManager.getInstance();
  prmEnd.add_endRequest(function () {
  
      thumbInt(); // Assign int to thumbnail list items
      clearShowClass(); // Prevents multiple li having .show
      $('#footer img').mouseover(
  
      function () {
              $(this).animate({
                      opacity: 3.7
              })
      });
  
      $('#footer img').mouseout(
  
      function () {
  
              $(this).animate({
                      opacity: 0.7
              })
      });
  
      //Set the opacity of all images to 0
      $('ul.slideshow li').css({
              opacity: 0.0
      });
  
      //Get the first image and display it (set it to full opacity)
      $('ul.slideshow li:first').css({
              opacity: 1.0
      }).addClass('show');
  
      //Get the first thumbnail and change css
      $('#footer li:first').css({
              opacity: 1.0
      }).addClass('highlight');
  
  });
  
  
  
  $(document).ready(function () {
  
      slideShow(6000);
  
      thumbInt(); // Assign int to thumbnail list items
      clearShowClass(); // Prevents multiple li having .show
      $('#footer img').mouseover(
  
      function () {
  
              $(this).animate({
  
                      opacity: 3.7
  
              })
  
      });
  
  
      $('#footer img').mouseout(
  
      function () {
  
              $(this).animate({
                      opacity: 0.7
              })
      });
  
  });
  </code></pre>
  
  <p>The way this page works is the user clicks on a radio button to trigger _dopostback and to show an image gallery. The problem is when I do _dopostback the document ready code no longer works, but this only happens in ie8. I am using Sys.WebForms.PageRequestManager.getInstance(); for code to run after an update in my update panel.</p>
  
  <p>Thanks.</p>