【问题标题】:dynamic iframe height in isotope layout同位素布局中的动态 iframe 高度
【发布时间】:2013-10-29 23:55:56
【问题描述】:

我在同位素布局中的 div 中定位 iframe 时遇到问题。

编辑参见此处的示例:http://beektest.co/index_test.html(单击其中一个带有图像和文本的白色 div 以打开 iframe)

基本上,iframe 出现在 div 的中间,位于同位素元素的后面。

我已将 div 设置为高度 450,但是当 iframe 加载时,它似乎缩小到一半,并且 iframe 与 div 重叠。

关于如何强制 iframe 到 div 顶部并阻止它调整 div 大小的任何线索?

代码如下:

        $("#container").append('<div id="item_'
                    + v.id + '" class="item"><a href="http://site.co/guide/'
                    + v.id + '--'
                    + urltitle + '"><img id="img_'
                    + v.id + '" src="http://cdn.site.co/' 
                    + v.thumbName + '" "width="200" height="200" /></a><p id="p_'
                    + v.id + '" align="center">' 
                    + desc + '</p></div>');

                $('#item_'
                + v.id + '').click(function(){
                    $(this).css('width','100%');
                    $('#img_'
                    + v.id + '').css('visibility','hidden');
                    $('#p_'
                    + v.id + '').css('visibility','hidden');

                    $(this).append('<iframe id="iframe" src="http://site.co/g'
                        + v.id + '"></iframe>');

                    var $container = $('#container');
                    $container.isotope('reLayout');

                    setTimeout(function() {
                        var position = $('#item_'+ v.id + '').position();
                        scroll(0,position.top);
                        $container.isotope('reLayout');
                    },1000);
                }); 

这里是 CSS

iframe
{
    width: 100%;
    height: 450px;
    top: 0px;
    left: 0px;
    display: block;
    border: 0;
    height: 450px;
    width: 100%;
    position: absolute;
}

.item {
    width: 200px;
    border: 1px solid;
    background-color: #FFFFFF;
     margin-right:10px;
     padding-right:10px;
     padding-top:10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
     background: -webkit-gradient(linear, rgba(255,255,255,1) 0%,rgba(0,0,0,0.2) 100%);
     z-index: 1001;
}   

.large{
width: 600px;
height: 450px;
position: absolute;
} 

【问题讨论】:

  • 建议您在 jsfiddle.net 或 plunker 中创建一个演示,以便人们可以看到您的所有插件设置并在控制台中检查 css
  • 我已经上传了beektest.co/index_test.html
  • 在 Firefox 中对我来说一切都很好。...我多次调整窗口大小...不知道如何复制或确切地看哪里。你用的是什么浏览器?
  • 抱歉,我还没有完成按钮。单击文本周围的白色 div 以展开并显示 iframe。
  • 建议您设置更简单的演示,其中不包含视频...当我尝试使用控制台检查时,出现 swfobject 错误并且蓝色区域变为空白。仍然不确定我应该看什么。为内容添加一个大&lt;h2&gt;I am iframe&lt;/h2&gt;

标签: javascript jquery iframe jquery-isotope


【解决方案1】:

感谢收看。

更新时没有调用 CSS,我在其他地方手动覆盖了它。

感谢收看。

【讨论】:

    猜你喜欢
    • 2013-04-10
    • 2018-05-09
    • 2014-01-03
    • 2015-11-18
    • 2021-08-19
    • 2013-09-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多