matchMedia dla kilku rozdzielczości - dynamicznie

0

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.

0

A nie lepiej zrobić to w CSS3?

0

Ten slider miał w standardzie ustawienia w js, a nie w css; ale nawet w css ustawiając stałą wartość height i width: 100% dla @mediaqueries wysokość owszem jest ok, ale szerokość nie zmienia się dynamicznie wraz ze zmianą szerokości ekranu, potrzebne jest odświeżenie.
user image

1 użytkowników online, w tym zalogowanych: 0, gości: 1