Jquery SetHeight in base alla larghezza della finestra usando If / else - jquery

Ho passato un paio d'ore a cercare di capirlofuori, ma non sto facendo progressi. Ho un contenitore che contiene una presentazione. Sui grandi schermi, questo contenitore dovrebbe essere a schermo intero. Ho trovato uno script per fare proprio questo.

Sugli schermi più piccoli l'altezza di questo contenitore dovrebbe essere un terzo dell'altezza dello schermo. Ho provato ad andare su if / else-route - ma è rotto e il container è in altezza: 0.

Ecco cosa ho finora, ma attualmente non funziona:

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

);

Non capisco perché l'if / else rompe cosasta funzionando diversamente - secondo un validatore di sintassi online la sintassi è corretta - ma immagino che non funzioni in questo modo per un altro motivo. (Suppongo anche che questo possa essere fatto molto più efficacemente, vedendo come il codice sia più o meno identico tranne per quella volta che windowHeight è diviso per 3.). Please help.

Modificato il tutto a questo, che funziona:

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

}

risposte:

Quando si imposta l'altezza minima cambiando css voianche bisogno di indicare il tipo di valore. Hai .css ("min-height", value) e il valore è una variabile ma è solo un valore numerico. Devi indicare che questo valore è in pixel come questo .css ("min-altezza", valore + "px")

ti manca anche px ovunque quando imposti l'altezza minima:

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