jQuery บนหน้าต่างปรับขนาด

ฉันมีรหัส JQuery ต่อไปนี้:

$(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'
        });
    }
});

ปัญหาเดียวคือมันใช้งานได้เฉพาะเมื่อเบราว์เซอร์โหลดครั้งแรกฉันต้องการcontainerHeightที่จะตรวจสอบเมื่อพวกเขากำลังปรับขนาดหน้าต่าง?

ความคิดใด ๆ

นี่คือตัวอย่างการใช้ jQuery, javascript และ css เพื่อจัดการกับการปรับขนาดเหตุการณ์
(css หากทางออกที่ดีที่สุดของคุณหากคุณเพียงแค่ปรับขนาดของสิ่งต่าง ๆ ในการปรับขนาด (คำสั่งสื่อ))
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 */
    }
}

จาวาสคริปต์

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) { /* ... */ }
});

ฉันจะหยุดการปรับขนาดรหัสของฉันจากการดำเนินการบ่อยครั้งได้อย่างไร!

นี่เป็นปัญหาแรกที่คุณจะสังเกตเห็นเมื่อผูกเพื่อปรับขนาด รหัสการปรับขนาดได้รับการเรียกว่ามากเมื่อผู้ใช้ปรับขนาดเบราว์เซอร์ด้วยตนเองและสามารถรู้สึกค่อนข้างสวย

หากต้องการ จำกัด ความถี่ในการปรับขนาดรหัสของคุณคุณสามารถใช้วิธีdebounceหรือthrottleจากunderscore & lowdash libraries

• debounceจะดำเนินการปรับขนาดโค้ด X ของคุณเป็นมิลลิวินาทีหลังจากเหตุการณ์การปรับขนาดครั้งสุดท้าย วิธีนี้เหมาะเมื่อคุณต้องการเรียกรหัสการปรับขนาดเพียงครั้งเดียวหลังจากผู้ใช้ทำการปรับขนาดเบราว์เซอร์เสร็จแล้ว เป็นสิ่งที่ดีสำหรับการอัปเดตกราฟแผนภูมิและเค้าโครงที่อาจมีราคาแพงในการอัปเดตทุกเหตุการณ์ที่ปรับขนาด
• throttleจะดำเนินการปรับขนาดโค้ดของคุณทุก ๆ X จำนวนมิลลิวินาที มัน "throttles" ความถี่ที่เรียกว่ารหัส สิ่งนี้ไม่ได้ใช้บ่อยกับการปรับขนาดเหตุการณ์ แต่ควรรับรู้

หากคุณไม่มีขีดล่างหรือขีดล่างต่ำสุดคุณสามารถใช้โซลูชันที่คล้ายกันได้ด้วยตัวเอง: JavaScript / JQuery: $ (หน้าต่าง) ตรวจสอบวิธีการยิงหลังจากการปรับขนาดเสร็จสมบูรณ์หรือไม่

ย้ายจาวาสคริปต์ของคุณไปไว้ที่ฟังก์ชั่นแล้วผูกฟังก์ชั่นนั้นกับการปรับขนาดหน้าต่าง

$(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 มีตัวจัดการเหตุการณ์การปรับขนาดที่คุณสามารถแนบไปที่หน้าต่าง.resize () ดังนั้นหากคุณใส่$(window).resize(function(){/* YOUR CODE HERE */})รหัสของคุณจะถูกเรียกใช้ทุกครั้งที่ปรับขนาดหน้าต่าง

ดังนั้นสิ่งที่คุณต้องการคือการเรียกใช้รหัสหลังจากโหลดหน้าแรกและเมื่อใดก็ตามที่หน้าต่างมีการปรับขนาด ดังนั้นคุณควรดึงรหัสลงในฟังก์ชั่นของตัวเองและเรียกใช้ฟังก์ชันนั้นในทั้งสองกรณี

// 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
});

โปรดดู: เหตุการณ์การปรับขนาดหน้าต่างข้ามเบราว์เซอร์ - JavaScript / jQuery

ลองวิธีนี้ 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;
    });
});

ตั้งชื่อฟังก์ชั่นที่ไม่ระบุชื่อของคุณจากนั้น:

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

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

สามารถใช้งานได้เช่นกัน

        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');
});

นี่จะทำให้ตัวจัดการการปรับขนาดของคุณเรียกใช้การปรับขนาดหน้าต่างและบนเอกสารพร้อม แน่นอนคุณสามารถแนบตัวจัดการปรับขนาดของคุณด้านนอกของตัวจัดการพร้อมเอกสารถ้าคุณต้องการ.trigger('resize')เรียกใช้ในการโหลดหน้าแทน

อัปเดต : นี่คือตัวเลือกอื่นหากคุณไม่ต้องการใช้ประโยชน์จากห้องสมุดบุคคลที่สามอื่น ๆ

เทคนิคนี้เพิ่มคลาสเฉพาะให้กับองค์ประกอบเป้าหมายของคุณเพื่อให้คุณมีข้อได้เปรียบในการควบคุมการจัดแต่งทรงผมผ่าน CSS เท่านั้น (และหลีกเลี่ยงการจัดแต่งทรงอินไลน์)

นอกจากนี้ยังช่วยให้มั่นใจได้ว่าระดับจะถูกเพิ่มหรือลบออกเมื่อจุดจุดเริ่มต้นที่เกิดขึ้นจริงและไม่ได้อยู่ในการปรับขนาดแต่ละครั้ง มันจะยิงที่จุดหนึ่งจุดเท่านั้น: เมื่อความสูงเปลี่ยนจาก <= 818 ถึง> 819 หรือกลับกันและจะไม่หลายครั้งภายในแต่ละภูมิภาค มันไม่ได้เกี่ยวข้องกับการเปลี่ยนแปลงใด ๆ ในความกว้าง

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');
});

ตัวอย่างเช่นคุณอาจมีกฎ CSS ต่อไปนี้:

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

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

ใช้สิ่งนี้:

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

คุณสามารถผูกresizeใช้.resize()และเรียกใช้รหัสของคุณเมื่อปรับขนาดเบราว์เซอร์ คุณต้องเพิ่มelseเงื่อนไขลงในifคำสั่งของคุณเพื่อให้ค่า css ของคุณสลับเป็นค่าเก่าและใหม่แทนที่จะตั้งค่าใหม่