不使用jQuery調整大小resize（）

Question

我正在使用jQuery和Foundation框架。它內置到Wordpress主題中，這就是爲什麼我必須使用"jQuery"而不是簡寫$的外延。

jQuery在加載頁面時調整我的幻燈片大小。但是，如果我調整瀏覽器窗口的大小，它將不會調整大小。我已經嘗試了很多東西，但無法讓它工作。 （邊框，單獨的功能，不同的語法）。

jQuery(document).ready(function($) { 
    var width = jQuery(window).width(), 
     height = jQuery(window).height() - jQuery('.top-bar').height(); 
    jQuery('.slide').height(height).width(width); 
    jQuery('.slide4 > div > img').height(height*.5); 

    jQuery(window).resize(function() { 
     jQuery('.slide').height(height).width(width); 
     jQuery('.slide4 > div > img').height(height*.5); 
    }); 
}); 

Answer 1

你可以把你的代碼resize事件的內部，並在頁面加載觸發它。您也可以使用IIF在您的代碼中使用$。你絕對應該嘗試調節調整大小，但現在這很酷！

// We can use $ inside here... 
(function($){ 

    // When the document is ready this is called... 
    $(function(){ 

    // We'll be using thise more than once! 
    var $window = $(window); 

    // Whenever a resize event occurs, do this... 
    $window.on('resize', function(e){ 

     var width = $window.width(), 
      height = $window.height() - $('.top-bar').height(); 

     $('.slide').height(height).width(width); 
     $('.slide4 > div > img').height(height*.5); 

    // The "trigger" fakes the event on load... 
    }).trigger('resize'); 


    }) 

})(jQuery); // You're passing jQuery to the IIF, so this is why you can use $ inside. 

希望這有助於！