Facebook のスライドアウトのようなボックスをサイトに追加しようとしていますが、メカニズムは Chrome でうまく機能していますが、Firefox と IE では完全に格納されず、ボックス全体が背景色。誰かが私に欠けているものを教えてもらえますか?
実際の URL は次のとおりです: http://www.campyavneh.org/social-network-slider-test
両方のブラウザでうまく動作するように見える JS Fiddle を次に示します。そのため、ライブ サイトで何を台無しにしているかわかりません: http://jsfiddle.net/U9nw6/8/必要なコードは次のとおりです。
<script>
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});
jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
});
</script>
/* Slide out social networking */
#sidePanel {
width:292px;
position:fixed;
left:-292px;
top:15%;
height:590px;
}
#panelHandle {
height:128px;
width:40px;
border-radius:0 5px 5px 0;
float:left;
cursor:pointer;
}
#panelContent {
float:left;
width:292px;
height:590px;
background-color:#EEEEEE;
}
#panelHandle img {
left: 292px;
position: relative;
top: -590px;
}
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcampyavneh&width=292&height=590&show_faces=true&colorscheme=light&stream=true&border_color&header=true&appId=132179142482" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle"><img src="/sites/all/themes/yavneh/images/fb_logo_side.jpg" alt="Facebook"></div>
</div>
ご協力いただきありがとうございます。