jQuery innerWidth arbeitet nicht mit} else {ohne Seitenaktualisierung

Question

Ich habe ein Problem mit jQuery nicht auf die else-Anweisung feuern und ich bin ziemlich sicher, es ist ziemlich einfach, warum es nicht ist aber nicht in der Lage, es selbst zu lösen aufgrund des Mangels von meinem JavaScript-Wissen hoffe ich, dass mir jemand das Problem sagen kann.

Mein jQuery-Skript hat zwei Sätze von Aktionen, eine für über 639px und eine darunter. Es funktioniert beim Laden der Seite, aber wenn Sie die Größe von 1600px auf 600px reduzieren, bleibt die Höhe des Elements die Höhe des Fensters, obwohl es unter 639px geht, ändert es sich nicht in height-min: auto.

$(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

Die min-height Erklärung nicht funktioniert, weil Sie einen Tippfehler haben: die Wähler in der if-else-Bedingungen sind nicht die gleichen:

• Im if Block: $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
• In der else Block: $('.nanoContainer, .flexAligner .vegas-container')

Ein Komma fehlt von letzterem, und ohne Ihre Markup Ich kann nicht sagen, welcher der beabsichtigte Selektor ist.

In Bezug auf das Problem mit .vegas(), wie es sollte nicht funktioniert, das ist, weil Sie nur das Plugin an verschiedenen Haltepunkten initialisiert, aber nie die andere Instanz zu zerstören. In diesem Fall verweise ich Sie auf den Code: the plugin appears to expose a destroy function, den Sie anrufen können, um die Instanz zu zerstören, wenn zwischen Haltepunkten umgeschaltet wird, z. $selector.vegas('destroy').

Hier ist ein Code, der könnte Arbeit: keine Garantien, da Sie haben eine MCVE nicht zur Verfügung gestellt, und ich bin nicht in der Lage, es zu testen:

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