jQuery pada ukuran jendela

Saya memiliki kode JQuery berikut:

$(document).ready(function () {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

Satu-satunya masalah adalah ini hanya berfungsi ketika browser pertama kali dimuat, saya ingin containerHeightjuga diperiksa ketika mereka mengubah ukuran jendela?

Ada ide?

Berikut ini contoh menggunakan jQuery, javascript, dan css untuk menangani ukuran acara.
(css jika taruhan terbaik Anda jika Anda hanya menyesuaikan hal-hal tentang mengubah ukuran (permintaan media))
http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
          bottom: 3px;
          left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

Bagaimana cara saya menghentikan kode pengubahan ukuran saya agar sering dijalankan !?

Ini adalah masalah pertama yang akan Anda perhatikan saat mengikat untuk mengubah ukuran. Kode pengubahan ukuran akan dipanggil BANYAK ketika pengguna mengubah ukuran browser secara manual, dan bisa terasa sangat janky.

Untuk membatasi seberapa sering kode pengubahan ukuran Anda dipanggil, Anda dapat menggunakan metode debounce atau throttle dari pustaka garis bawah & lowdash .

• debouncehanya akan menjalankan kode pengubahan ukuran X jumlah milidetik setelah acara pengubahan ukuran TERAKHIR. Ini sangat ideal ketika Anda hanya ingin memanggil kode ukuran sekali saja, setelah pengguna selesai mengubah ukuran browser. Baik untuk memperbarui grafik, bagan, dan tata letak yang mungkin mahal untuk memperbarui setiap acara ukuran tunggal.
• throttlehanya akan menjalankan kode pengubahan ukuran Anda setiap X jumlah milidetik. Itu "mencekik" seberapa sering kode dipanggil. Ini tidak sering digunakan dengan acara pengubahan ukuran, tetapi perlu diperhatikan.

Jika Anda tidak memiliki garis bawah atau lowdash, Anda dapat menerapkan solusi serupa sendiri: JavaScript / JQuery: $ (window) .resize bagaimana memecat SETELAH ukurannya selesai?

Pindahkan javascript Anda ke suatu fungsi dan kemudian ikat fungsi itu ke ukuran jendela.

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});
function updateContainer() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
}

jQuery memiliki event handler ukuran yang dapat Anda lampirkan ke jendela, .resize () . Jadi, jika Anda meletakkan $(window).resize(function(){/* YOUR CODE HERE */})kode Anda akan dijalankan setiap kali jendela diubah ukurannya.

Jadi, yang Anda inginkan adalah menjalankan kode setelah memuat halaman pertama dan setiap kali jendela diubah ukurannya. Karena itu Anda harus menarik kode ke dalam fungsinya sendiri dan menjalankan fungsi itu di kedua contoh.

// This function positions the footer based on window size
function positionFooter(){
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    else {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } 
}

$(document).ready(function () {
    positionFooter();//run when page first loads
});

$(window).resize(function () {
    positionFooter();//run on every window resize
});

Lihat: Acara pengubahan ukuran jendela lintas browser - JavaScript / jQuery

Coba solusi ini. Hanya menyala setelah halaman dimuat dan kemudian selama pengubahan ukuran jendela di yang telah ditentukan resizeDelay.

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

Beri nama fungsi anonim Anda, lalu:

$(window).on("resize", doResize);

http://api.jquery.com/category/events/

bisa menggunakannya juga

        function getWindowSize()
            {
                var fontSize = parseInt($("body").css("fontSize"), 10);
                var h = ($(window).height() / fontSize).toFixed(4);
                var w = ($(window).width() / fontSize).toFixed(4);              
                var size = {
                      "height": h
                     ,"width": w
                };
                return size;
            }
        function startResizeObserver()
            {
                //---------------------
                var colFunc = {
                     "f10" : function(){ alert(10); }
                    ,"f50" : function(){ alert(50); }
                    ,"f100" : function(){ alert(100); }
                    ,"f500" : function(){ alert(500); }
                    ,"f1000" : function(){ alert(1000);}
                };
                //---------------------
                $(window).resize(function() {
                    var sz = getWindowSize();
                    if(sz.width > 10){colFunc['f10']();}
                    if(sz.width > 50){colFunc['f50']();}
                    if(sz.width > 100){colFunc['f100']();}
                    if(sz.width > 500){colFunc['f500']();}
                    if(sz.width > 1000){colFunc['f1000']();}
                });
            }
        $(document).ready(function() 
            {
                startResizeObserver();
            });

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

Ini akan menyebabkan pengatur ukuran Anda terpicu pada pengubahan ukuran jendela dan dokumen siap. Tentu saja, Anda dapat melampirkan penangan ukuran Anda di luar penangan siap dokumen jika Anda ingin .trigger('resize')menjalankan memuat halaman sebagai gantinya.

PEMBARUAN : Ini opsi lain jika Anda tidak ingin memanfaatkan perpustakaan pihak ketiga lainnya.

Teknik ini menambahkan kelas tertentu ke elemen target Anda sehingga Anda memiliki keuntungan mengendalikan styling hanya melalui CSS (dan menghindari styling inline).

Ini juga memastikan bahwa kelas hanya ditambahkan atau dihapus ketika titik ambang sebenarnya dipicu dan tidak pada masing-masing dan setiap ukuran. Ini akan menyala pada satu titik ambang saja: ketika ketinggian berubah dari <= 818 ke> 819 atau sebaliknya dan tidak berkali-kali dalam setiap wilayah. Itu tidak peduli dengan perubahan lebar .

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

Sebagai contoh, Anda mungkin memiliki yang berikut sebagai beberapa aturan CSS Anda:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

Gunakan ini:

window.onresize = function(event) {
    ...
}

Anda dapat mengikat resizemenggunakan .resize()dan menjalankan kode Anda ketika browser diubah ukurannya. Anda juga perlu menambahkan elsekondisi ke ifpernyataan Anda sehingga nilai css Anda beralih yang lama dan yang baru, bukan hanya mengatur yang baru.