jquery изменить размер родительского потомка - PullRequest
Новая
       1

jquery изменить размер родительского потомка

1 голос
/ 06 февраля 2011

У меня есть контейнер div с классом embed и уникальным идентификатором.Внутри контейнера div у меня есть встроенный код игрока, использующий либо iframe, либо объект.Пример: 

<div class="embed" id"id21" style="width:480px; height:390px;">
<iframe width="480" height="390" src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

Когда я изменяю размер контейнера div, я хочу, чтобы игрок внутри него также менял размеры.Код для встраивания имеет атрибуты ширины и высоты.Я сделал следующее, но не смог заставить его работать.Мне нужно ссылаться на контейнер по его идентификатору, поэтому, если у меня есть другой контейнер с другим идентификатором, изменение размера должно вступать в силу только при изменении размера контейнера, а не других контейнеров.

$('.embed').live({
    resize: function(event, ui) {
        var id = this.id;
        var height = $(id).height();
        var width = $(id).width();
        $(id).contents().attr({'width':width,'height':height});
    }
});

Ответы [ 3 ]

2 голосов
/ 06 февраля 2011 
$('.embed').live({
    resize: function(event, ui) {
        $(this).find("iframe").css(ui.size);
    }
});

Разве это не работает?

2 голосов
/ 06 февраля 2011

Если вы используете CSS для управления height и width iframe в относительных измерениях, скажем %, то изменение размера div автоматически изменит размер iframe: 

iframe {
    height: 80%;
    width: 100%;
    margin: 0 auto;
}

Это будет работать, только если .embed имеет, как в вашем примере, определенные размеры.

Отредактировано , чтобы изменить html, css и предоставить демо jQuery:

html: 

<div class="embed" id="id21" style="width:480px; height:390px;">
    <iframe src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

css 

.embed {
    border: 5px solid #000;
    padding: 1em;
}

.embed:hover {
    border-color: #f90;
}

iframe {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

jQuery: 

$('.embed').resizable(
    {
        aspectRatio: 1.23,
        minHeight: 390,
        minWidth: 480
     });

JS Fiddle demo .

1 голос
/ 06 февраля 2011

Попробуйте это: 

$('.embed').live({
    resize: function(event, ui) {
        $(this).children()
            .width( $(this).width() )
            .height( $(this).height() );
    }
});
...