Question

我有这个网站我正在建设，我决定我想在边栏上放一个像facebook一样的盒子。该网站有2种分辨率，具体取决于窗口宽度。根据加载的css，侧边栏将改变大小。

在大型CSS中，我希望facebook像410px宽的盒子，而在小型CSS中，我希望facebook像200px宽的盒子一样。

现在我对jquery并不那么惊人，所以如果有人能帮我解决这个问题，我会非常感激。我可以在http://net.tutsplus.com

上看到我想要做的一个例子

到目前为止我已经这样了：

    <div class="block facebookLikeBox">

    </div>

    $(window).resize(function(){
    if ($(window).width() > 1200) {
        $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>');  
        }
    }
    else {
        $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>'); 
    }
}).trigger('resize');

我头脑中有这个

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

不太清楚在这里做什么，因为它没有加载任何东西。

编辑：

function adjustStyle(width) {
    width = parseInt(width);
    if (width > 1024) {
        $('#sidebar .tip').addClass('vertical');
        $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>');
        FB.FBXML.parse(document.getElementsByClassName('.facebookLikeBox')); 
   } else {
       $('#sidebar .tip').removeClass('vertical');
       $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>');
        FB.FBXML.parse(document.getElementsByClassName('.facebookLikeBox')); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});



<head><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script></head>

如果你很好奇，这是一个更新：这里是现场：http://thefinishedbox.com

Answer 1

我有类似的问题..但你可以解决它更轻:)你试图在脚本结束时调用它吗？

FB.XFBML.parse(document.getElementsByClassName('.facebookLikeBox'));

这可能会有所帮助......

当然你必须加载javascript SDK .. :)

Answer 2

function adjustStyle(width) {
    width = parseInt(width);
    if (width > 1200) {
        $('#sidebar .tip').addClass('vertical');
        if (!$.browser.msie) {
            $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>');
            FB.XFBML.parse();
        }
  } else {
        $('#sidebar .tip').removeClass('vertical');
        if (!$.browser.msie) {
            $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>');
            FB.XFBML.parse();
        }
    }

}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Facebook Like Box：通过jQuery改变宽度

2 个答案: