1

I'm having problems positioning iframes in divs in an isotope layout.

EDIT See example here: http://beektest.co/index_test.html (click on one of the white divs with image and text in it to open iframe)

Basically the iframe is appearing half way down the div, and behind the isotope elements.

I've set the div to height 450, but when the iframe loads it seems to shrink to half of that, and the iframe is overlapping the div.

Any clues on how to force the iframe to the top of the div, and stop it resizing the div?

Here's the code:

        $("#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);
                }); 

And here is the 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;
} 
5
  • suggest you create a demo in jsfiddle.net or plunker so people can see all your plugin settings and inspect css in console
    – charlietfl
    Oct 30, 2013 at 0:06
  • I've uploaded beektest.co/index_test.html
    – beek
    Oct 30, 2013 at 0:20
  • everything looks fine for me in firefox.... I re sized window several times...not sure how to replicate or exactly where to look. What browser are you using?
    – charlietfl
    Oct 30, 2013 at 0:24
  • Oh sorry I've not finished the buttons. Click on the white div around the text for it to expand and show the iframe.
    – beek
    Oct 30, 2013 at 0:27
  • suggest you set up simpler demo without videos in it...I get swfobject errors and blue area goes blank when i try to inspect with console. Still not sure what I should be looking at. Put a big <h2>I am iframe</h2> for content
    – charlietfl
    Oct 30, 2013 at 0:37

1 Answer 1

0

Thanks for looking.

The CSS wasn't getting called on the update, I was overwriting it manually elsewhere.

Thanks for looking.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.