Изменить размер iframe под aside
Здравствуйте!
Учусь программировать в JS, но не всё проходит гладко. В сайдбар выгружаю три iframe с роликами youtube. Хочу, чтобы размеры iframe были по ширине aside (в теги aside разместил сайдбар). Всем фреймам iframe присвоил id="sidevid" . Почему-то не могу получить ширину aside :( Помогите, пожалуйста. window.onload = function(){ var aside = document.getElementsByTagName('aside'); Wid=aside.offsetWidth; var div = document.getElementById("sidevid"); div.style.width = Wid+"px"; Hei=Wid/1.77; div.style.height = Hei+"px"; } Если ещё что-то не так написал - укажите на ошибки. Не волшебник, только учусь. Спасибо! |
А для чего задавать ширину через js если можно просто стиль дать?
|
Даже если ширина сайдбара в процентах? Предположим ширину-то я ещё процентами задам. А что будет с высотой? И не отразится ли это на качестве фрейма, если задавать через css, а не в стилях элемента?
|
Ну с шириной то проблем нет - width: 100%.
С высотой сложнее. В css нет непосредственного способа задать соотношение сторон. Но можно использовать костыль, основанный на том, что padding-top/padding-bottom высчитывается от ширины: <aside> <div> <iframe src="http://javascript.ru" frameborder="0"></iframe> </div> </aside> <style> html, body{margin:0;padding:0;height:100%} aside { width: 20%; height: 100%; background: yellow; } aside div{ width: 100%; height: 0; padding-top: 56.5%; /* 100/1.77 */ position: relative; } aside div iframe{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } </style> |
danik.js , задумка интересная, спасибо, проникся, буду знать что есть такой костыль. Но очевидно, что в сайдбар будут запихивать и другие дивы без фреймов и там (возможно) будут всякие-разные проблемы с ними потом из-за этого костыля. Неужели никак нельзя получить размеры ширины блока aside и просто проставить стилем во фрейм?
|
Для начала надо clientWidth, потому что оффсет включает все, а клиент выключает все кроме того что нам надо.
Для конца - при чем тут aside? Если вы не знаете чем обернется использование специального тега в будущем, возможно в скором будущем, используйте заведомо вечные теги без особых свойств, например div (arbitrary division) |
Цитата:
Цитата:
Цитата:
|
Цитата:
Плюс пропущенные объявления переменных через var |
Цитата:
Я не знаю какие они, надо читать спецуху чтобы понять что из того что там сформулировано применяется, а что еще нет, но может быть. Читать не хочу. Кто применяет - тот пусть читает. aside это сноска по-книжному. При чем тут видео? Не важно, конечно. Я только хотел сказать что большой выбор до бобра не доведет. |
И еще, тренд html'я пятого в развитии структуры документов. Которая как планируется послужит повышению релевантности поиска и все такое. Если гугля, допустим, перестанет искать в aside, поскольку а чо там вообще искать - там же сноски - то и не найдет чего вы туда важного такого засунули.
В другой плоскости той же задачи - itemprop'ы. Я тут недавно засунул один такой айтемпроп в линк стилей, вместо rel, браузер х забил на стили. Пришлось вернуть rel |
Часовой пояс GMT +3, время: 16:22. |