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

Тема в разделе "JavaScript", создана пользователем usergeyv, 3 дек 2017.

Модераторы: ZiX
  1. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    67
    Симпатии:
    9
    Есть код
    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);
    но не работает , как написать функцию с моим кодом?
     
  2. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    67
    Симпатии:
    9
    И прошу код динамически обновлять по клику width и height
     
  3. BaBL

    BaBL

    Регистр.:
    13 ноя 2012
    Сообщения:
    161
    Симпатии:
    103
    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 сек. -------------->
    У window есть еще событие resize и лучше это делать на нем тогда (Если про F11 речь), а по кнопке все так же, на клик вешаешь setTimeout(size_update, 1000);
     
  4. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    67
    Симпатии:
    9
    А сюда как ?
    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....
     
  5. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    67
    Симпатии:
    9
    Сделал вот так, работает!
    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%
     
    romas_s нравится это.
  6. romas_s

    romas_s

    Регистр.:
    9 ноя 2012
    Сообщения:
    205
    Симпатии:
    47
    Чем собственно не устраивает блок с widht 100% height 100% ????.
    Зачем собственно колонка с динамической сменой width и height через js???

    Любое видео / флеш какое бы вы не вставили - автоматически подстроится под текущие размеры.
    в CSS имеются параметры @media c помощью который можно писать любые отдельные стили для определенных размеров экрана.
    <-------------- добавлено через 2034 сек. -------------->
    вот рабочий пример с 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;
     
    usergeyv нравится это.
  7. xapai1988

    xapai1988 Создатель

    Регистр.:
    12 дек 2009
    Сообщения:
    22
    Симпатии:
    7
    Только делайте не через 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>
     
    usergeyv нравится это.
  8. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    67
    Симпатии:
    9
    Можно поподробней, так как в 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>
     
  9. vic1979

    vic1979 Писатель

    Регистр.:
    11 июн 2015
    Сообщения:
    3
    Симпатии:
    1
    Вам нужно использовать функцию onresize
     
    usergeyv нравится это.
  10. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    67
    Симпатии:
    9
    Напиши код плиз по моему примеру