JQuery SetHeight в соответствии с шириной окна, используя If/else

Question

Я потратил пару часов, пытаясь понять это, но я не добился никакого прогресса. У меня есть контейнер, содержащий слайд-шоу. На больших экранах этот контейнер должен быть полноэкранным. Я нашел сценарий для этого.

На меньших экранах высота этого контейнера должна быть на треть от высоты экрана. Я пытался идти в, если/еще-маршрут - но он сломан и контейнер находится на высоте: 0.

Вот то, что я до сих пор, но в настоящее время не работает:

jQuery(document).ready( 
function() 
{ function setHeight() { 

if ($(window).width() > 768) { 

windowHeight = jQuery(window).innerHeight() -90; 
jQuery('.slideshows').css('min-height', windowHeight/3); 
setHeight(); jQuery(window).resize(function() { setHeight(); }); 
} 

else 
{ windowHeight = jQuery(window).innerHeight() -90; 
jQuery('.slideshows').css('min-height', windowHeight); ;} setHeight(); 
jQuery(window).resize(function() { setHeight(); }); } 
} 

); 

Я не понимаю, почему if/else нарушает то, что работает в противном случае - согласно онлайн-синтаксису синтаксис правильный, но я думаю, что это не работает по другой причине. (Я также думаю, что это, вероятно, можно сделать намного эффективнее, видя, как код в значительной степени идентичен, за исключением того, что один раз windowHeight делится на 3.). Пожалуйста помоги.

Изменены все к этому, который работает:

$(document).ready(function() { 
    // run test on initial page load 
    checkSize(); 

    // run test on resize of the window 

    $(window).resize(checkSize); 

// $(window).resize(function(){location.reload();}); 
// $(window).on('resize',function(){location.reload();}); 

}); 

//Function to the css rule 

function checkSize(){ 
    if ($(".slideshows").css("background-color") == "transparent"){ 
     // your code here 

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', 200); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); }); 
    } 
    if ($(".slideshows").css("overflow") == "hidden"){ 
     // your code here 

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', windowHeight); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); }); 
    } 
    if ($(".slideshows").css("display") == "block"){ 
     // your code here 

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', 400); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); }); 
    } 
    if ($(".slideshows").css("align-content") == "center"){ 
     // your code here 

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', 500); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); }); 
    } 

} 

Answer 1

При установке мин-высоту с помощью изменения CSS также необходимо указать тип значения. У вас есть .css ('min-height', value), а значение - переменная, но это просто числовое значение. Вы должны указать, что это значение в пикселях, как этот .css («мин-высота», значение + рх ')

вы также не хватает точек везде при установке мин-высота:

jQuery('.slideshows').css('height', 500px);