jQueryのはinnerWidthは、ページの更新

Question

をしないで、私はelseステートメントにjQueryを使って問題を発射していないし、それが原因不足のために、それを自分で解決することはなく、できない理由を私はその非常に単純かなり確信している{}他に動作していません私のJavaScript知識のうち、誰かが私にその問題を教えてくれることを願っています。

私のjQueryのスクリプトは、アクションの二組、639px以上用と、以下の設定1を持っています。これは、ページのロードに動作しますが、あなたは1600pxから600PXにサイズを小さくする場合、高さは要素のまま、それはheight-min: autoにそれを変更しません639pxの下に行くにもかかわらず、窓の高さが残ります。

$(function() { 
    $(window).resize(function() { 
    if (window.innerWidth >= 639) { 
     windowHeight = $(window).innerHeight(); 
     $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight); 
     $("body.home").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 
    } else { 
     // This works but only if the page is loaded with the viewpoint less of 639px 
     // The min-height auto doesn't work. 
     $('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto'); 
     $(".home .intro").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 
    } 
    }).resize(); 
}); 

Answer 1

あなたはタイプミスがあるのでmin-height宣言は動作しません：条件が同じでない場合は、他のあなたのセレクタを：ifブロックで

• ：$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
• elseでブロック：$('.nanoContainer, .flexAligner .vegas-container')

コンマは後者にはなく、マークアップどのセレクタが意図されたセレクタであるかわかりません。それが必要として.vegas()が機能していないとの問題に関して

あなただけの別のブレークポイントでプラグインを初期化しているが、は、他のインスタンスを破壊することはありませんので、それはです。この例では、コード：the plugin appears to expose a destroy functionを参照しています。これは、ブレークポイントを切り替えるときにインスタンスを破棄するために呼び出すことができます。 $selector.vegas('destroy')。あなたはMCVEを提供していないと私はそれをテストすることができませんので、無保証：

$(function() { 
    $(window).resize(function() { 
    if (window.innerWidth >= 639) { 

     // Set min-height 
     windowHeight = $(window).innerHeight(); 
     $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight); 

     // Create new Vegas instance 
     $("body.home").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 

     // Destroy other Vegas instance 
     $(".home .intro").vegas('destroy'); 

    } else { 
     // This works but only if the page is loaded with the viewpoint less of 639px 
     // The min-height auto doesn't work. 
     $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto'); 

     // Create new Vegas instance 
     $(".home .intro").vegas({ 
      delay: 8000, 
      transition: 'fade', 
      transitionDuration: 8e3, 
      timer: false, 
      slides: [ 
       { src: "/wp-content/uploads/slide2-0.jpg" }, 
       { src: "/wp-content/uploads/slide2-1.jpg" }, 
       { src: "/wp-content/uploads/slide2-2.jpg" } 
      ], 
      animation: "kenburns" 
     }); 

     // Destroy other Vegas instance 
     $("body.home").vegas('destroy'); 
    } 
    }).resize(); 
});