Witam wszystkich,
usiłuję ustawić dynamicznie wysokość slidera względem aktualnej rozdzielczości ekranu, czyli powinno to działać od momentu wczytania strony i bez konieczności odświeżania przy każdej zmianie rozdzielczości. Niestety nie umiem sobie z tym poradzić, doszedłem do momentu gdy dobrze działało to zmiejszając rozdzielczość (załóżmy na starcie 1920px, zmiana na 768px i zmiana na 320px), ale już w drugą stronę nie. (przy powrocie z 320 na 768 lub 1920 zostawała wysokość przypisana do 320px)
Próbowałem to zapisać jako kilka funkcji o tej samej nazwie z innymi argumentami, a obecnie mam taki kod (wartość w else powinna być dla > 768px):
jQuery(document).ready(function($) {
function mediaqueryresponse(mql){
if (mql.matches){ // if media query matches
$('#banner-fade').bjqs({
height : 0.692708*window.screen.width,
width : window.screen.width,
responsive : true
});
}
else{
$('#banner-fade').bjqs({
height : 0.5146*window.screen.width,
width : window.screen.width,
responsive : true
});
}
}
function mediaqueryresponse2(mql2){
if (mql2.matches){ // if media query matches
$('#banner-fade').bjqs({
height : 1.3*window.screen.width,
width : window.screen.width,
responsive : true
});
}
else{
$('#banner-fade').bjqs({
height : 0.5146*window.screen.width,
width : window.screen.width,
responsive : true
});
}
}
var mql = window.matchMedia("screen and (max-device-width: 768px)");
var mql2 = window.matchMedia("screen and (max-device-width: 320px)");
mediaqueryresponse(mql);
mediaqueryresponse2(mql2);
mql.addListener(mediaqueryresponse);
mql2.addListener(mediaqueryresponse2);
Będę wdzięczny za pomoc.