Question

我正在尝试在网站上添加一个Facebook滑出式框，并且该机制在Chrome中运行良好，但在Firefox和IE中它不会一直缩回，也不会填满整个背景颜色的框。谁能让我知道我错过了什么？

实时网址为：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&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;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>

感谢您提供的任何帮助！

Answer 1

对于背景问题，您需要在div iframe标记中添加一行，如下所示：

背景：#ccc

其中#ccc可以是十六进制代码或您要填充的任何颜色

Answer 2

将iframe更改为

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcampyavneh&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=132179142482" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

Answer 3

将#sidePanel处理更新为：

jQuery('#sidePanel').hover(function() {
  jQuery.noConflict();
  jQuery('#sidePanel').animate({
    left: '-201px'
  }, 800);
 });

jQuery slide-out Facebook和Chrome一样，在Chrome和Firefox中看起来不一样

3 个答案: