2012-04-27 4 views
0

IE8で動作していないjavascriptに若干の問題があります。 firefox、ie9、chromeでは正常に動作しますが、ie8では動作しません。私はそれがドキュメントの準備が異なる方法で動作することを知っていますが、私は答えを見つけることができません。以下のコードを参照してください。

// 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 <= $('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 
      }) 
    }); 

}); 

このページの仕組みは、ラジオボタンをクリックして_dopostbackをトリガーして画像ギャラリーを表示する方法です。問題は、ドキュメント準備ができていないコードを_dopostbackしても機能しなくなったときですが、これはie8でのみ発生します。私はSys.WebForms.PageRequestManager.getInstance()を使用しています。更新パネルで更新後にコードを実行する

ありがとうございました。

+0

あなたのコンソールにメッセージはありますか?あなたは何の行動を期待していますか、代わりに何を見ていますか? – Sampson

+2

あなたはfiddle jsfiddle.netを設定してください。 – mayrs

+0

どのようにスクリプトをページに挿入しますか? http://stackoverflow.com/questions/747854/how-does-document-ready-work-in-ie-8 – LukeP

答えて

0

同じ問題がありました。 IE8 document.readyはアラートを起動しません。 私はjqueryのバージョンを1.10.1から1.10.2に更新することで、また推奨されるmigrate jsも含めてこの問題を解決しました。

0

私は同じ問題を抱えていました。私はスクリプトタイプ= "application/javascript"をtype = "text/javascript"に変更することで解決しました

関連する問題