Divs resize with jQuery resize()

Question

jQuery 및 Foundation 프레임 워크를 사용하고 있습니다. Wordpress 테마에 내장되어 있기 때문에, 대신에 단락 $을 사용해야합니다.

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. 

이 정보가 도움이되기를 바랍니다.