如何检查div的高度以重新排列div块

时间:2012-01-30 01:23:33

标签: jquery facebook-iframe autoresize facebook-comments jquery-masonry

我在我的网站上使用jQuery Masonry来显示博客帖子。每个帖子块都添加了Facebook评论框。当有新注释时,容器div会扩展,不幸的是会与下面的那个重叠。在这种情况下,我需要重新运行Masonry脚本来重新加载块。 Screenshot

所以我使用Ben Alman's Jquery Resize Event Plugin来检查div高度的变化,以便Masonry脚本根据新的大小重新定位块并避免重叠。

虽然它不起作用,但当我用firebug检查它时似乎没有错误。我是Jquery的新手,我希望我在这里犯一个简单的错误。

如果您想看一下,请查看bjk-tribun.com 当您在评论框中输入一些评论时,您会看到重叠。

$(function(){
  // Bind the resize event. When any test element's size changes, update its
  // corresponding info div.
  var iframe = $(".fb_iframe_widget");

  // Called once the Iframe's content is loaded.
  iframe.load(function(){
    // The Iframe's child page BODY element.
    var iframe_content = iframe.contents().find('body');

    // Bind the resize event. When the iframe's size changes, update its height as
    // well as the corresponding info div.
    iframe_content.resize(function(){
      var elem = $(this);

      // Resize the IFrame.
      iframe.css({ height: elem.outerHeight( true ) });

      $('#sort').masonry(reloadItems);

    // Resize the Iframe and update the info div immediately.
    iframe_content.resize();
  });
});

2 个答案:

答案 0 :(得分:0)

根据您使用的jQuery版本,您可能需要在css属性中添加px单元:

iframe.css({ height: elem.outerHeight( true ) + "px" });

答案 1 :(得分:0)

好吧我不知道为什么但是一旦我转动了colorbox.js这是一个灯箱插件,Jquery Masonry插件就开始对div调整大小做出反应。因此,如果有人遇到同样的问题,他们应该首先尝试禁用其他jquery插件,以免整个星期都花在这件事上。

我还禁用了我上面插入的Ben Alman插件。砌体足以处理调整大小事件。