Динамически обновлять каждую секунду width и height

usergeyv

Знаток
Регистрация
5 Июл 2013
Сообщения
152
Реакции
25
Есть код
HTML:
<script>
window.onload=function() {
document.getElementById("fs_section_img").style.height=window.innerHeight+"px";
document.getElementById("fs_section_img").style.width=window.innerWidth+"px";
}
</script>
Меняет высоту и ширину id="fs_section_img"
Нужно менять, например каждую секунду , искал решения вот пример по высоте
HTML:
setInterval(function(){
                        var iframe = $('#iframe', parent.document.body);
                        //alert('document: ' + document.body.offsetHeight);
                        iframe.height($(iframe).contents().find('form').height());
                        },1000);
но не работает , как написать функцию с моим кодом?
 
И прошу код динамически обновлять по клику width и height
 
HTML:
<script>
function size_update ()
{
   var iframe = $('#iframe', parent.document.body);
   iframe.height($(iframe).contents().find('form').height());
   setTimeout(size_update, 1000);
}

window.onload=function() {
   size_update();
};
</script>

Ну и на код, который отвечает за клик вешаешь ее же, тоже в onload добавить:

HTML:
<script>
$('element').on('click', size_update);
</script>
<-------------- добавлено через 2650 сек. -------------->
А сюда как ?
HTML:
<script>
window.onload=function() {
document.getElementById("fs_section_img").style.height=window.innerHeight+"px";
document.getElementById("fs_section_img").style.width=window.innerWidth+"px";
}
</script>
и после нажатия на кнопку, выполнить через секунду функцию update?
(делаю что то типа фуллскрин(эффект f11), изначально флешка подстраивается под размеры блока (600*400) и после нажатия на кнопку onclick="enterFullscreen(\'fs_section_img\')" флешкака все равно остается 600*400, а нужно растянуть на весь дисплей)

У window есть еще событие resize и лучше это делать на нем тогда (Если про F11 речь), а по кнопке все так же, на клик вешаешь setTimeout(size_update, 1000);
 
А сюда как ?
HTML:
<script>
window.onload=function() {
document.getElementById("fs_section_img").style.height=window.innerHeight+"px";
document.getElementById("fs_section_img").style.width=window.innerWidth+"px";
}
</script>
и после нажатия на кнопку, выполнить через секунду функцию update?
(делаю что то типа фуллскрин(эффект f11), изначально флешка подстраивается под размеры блока (600*400) и после нажатия на кнопку onclick="enterFullscreen(\'fs_section_img\')" ,функция выполняется,а флешкака все равно остается 600*400, а нужно растянуть на весь дисплей)
<-------------- добавлено через 343 сек. -------------->
И для выхода с полноэкранного режима снова походу надо будет update....
 
Сделал вот так, работает!
HTML:
<script>
window.onload=function myFunc () {
document.getElementById("fs_section_img").style.height=window.innerHeight+"px";
document.getElementById("fs_section_img").style.width=window.innerWidth+"px";
setTimeout(myFunc, 1000);}
</script>
Это правильно, может поправки какие то есть на работоспособность в дальнейшем ?
<-------------- добавлено через 829 сек. -------------->
Чем собственно не устраивает блок с widht 100% height 100% ????.
Посмотреть вложение 90558
Посмотреть вложение 90559
<-------------- добавлено через 96 сек. -------------->
object не хочет работать с widht 100% height 100%
 
Чем собственно не устраивает блок с widht 100% height 100% ????.
Зачем собственно колонка с динамической сменой width и height через js???

Любое видео / флеш какое бы вы не вставили - автоматически подстроится под текущие размеры.
в CSS имеются параметры @media c помощью который можно писать любые отдельные стили для определенных размеров экрана.
<-------------- добавлено через 2034 сек. -------------->
Сделал вот так, работает!
HTML:
<script>
window.onload=function myFunc () {
document.getElementById("fs_section_img").style.height=window.innerHeight+"px";
document.getElementById("fs_section_img").style.width=window.innerWidth+"px";
setTimeout(myFunc, 1000);}
</script>
Это правильно, может поправки какие то есть на работоспособность в дальнейшем ?
<-------------- добавлено через 829 сек. -------------->

Посмотреть вложение 90558
Посмотреть вложение 90559
<-------------- добавлено через 96 сек. -------------->
object не хочет работать с widht 100% height 100%

вот рабочий пример с 100% высота 100% ширина. сохраните как html файл и откройте любым браузером.
Код:
body, html{
    width: 100%;
    height: 100%;
}

<body>
    <table class="flash-container" style="height: 100%; width:100%">
        <tr style="height: 100%; width:100%">
            <td style="height: 100%; width:100%">
                <object width="100%" height="100%">
                    <param name="autoPlay" value="true"></param>
                    <embed allowfullscreen="true" autoPlay="true" flashvars="autoplay=true&play=ture" allownetworking="all" id="pptShow" allowscriptaccess="always" height="100%" src="http://www.weilaijiaoxue.com:9096/upload/2016/4/13/swf_20160413115509559.swf"  type="application/x-shockwave-flash" width="100%"></embed>
                </object>
            </td>
        </tr>
    </table>
</body>

А по сути - Вам достаточно вставить видео с параметрами width 100% height 100% и те же параметры прописать в html и body width 100% height 100% margin: auto;
 
Только делайте не через setInterval, а с помощью requestAnimationFrame. Меньше будет тормозить и окружащие будут на вас смотреть с уважением.

Код:
<script>
  var prev = performance.now();
  var times = 0;

  requestAnimationFrame(function measure(time) {
    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
    prev = time;

    if (times++ < 10) requestAnimationFrame(measure);
  })
</script>
 
Только делайте не через setInterval, а с помощью requestAnimationFrame. Меньше будет тормозить и окружащие будут на вас смотреть с уважением.

Код:
<script>
  var prev = performance.now();
  var times = 0;

  requestAnimationFrame(function measure(time) {
    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
    prev = time;

    if (times++ < 10) requestAnimationFrame(measure);
  })
</script>
Можно поподробней, так как в js не очень...
Что можно сделать вместо этого
HTML:
<script>
window.onload=function myFunc () {
document.getElementById("fs_section_img").style.height=window.innerHeight+"px";
document.getElementById("fs_section_img").style.width=window.innerWidth+"px";
setTimeout(myFunc, 1000);}
</script>
 
Вам нужно использовать функцию onresize
 
Назад
Сверху