resize function and change css value of my class (in javascript)

Question

I try to write a script that will change one css but only if the condition in if is true. I do not understand why my script just does not work (even if I paste it in the browser console)

$(document).load($(window).bind("resize", function () {
    if (window.matchMedia('(min-width: 767px)').matches && window.matchMedia('(max-width: 1259px)').matches) {
        $('.filter--facet-container').each(function () {
            if ($(this).children().length >= 3 && $(this).children().length <= 4) {
                $(".listing--actions.filter--container-additional").css("height", "125px");
            }
        })
    }
}));

T.J. Crowder · Accepted Answer · 2018-09-03 06:42:16Z

1

document has no load event, notice nothing happens:

$(document).load(function() {
  console.log("Ran");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You may have meant $(window).load(function(){ ... }):

$(window).load(function() {
  console.log("Ran");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

...but beware that that event happens very late in the page load cycle, after all resources (including all images) have been loaded.

To run your code when the DOM is complete but before the load event, just put your code in a script tag at the end of the document, just before the closing </body> tag (or use jQuery's $(function() { }) "DOM ready" feature, though there's no real need for it).

A couple of other notes:

bind is obsolete and deprecated. With modern jQuery (and hopefully you're using a modern version), use on.
matchMedia returns an object with events for when the result of the rule changes, so there's no need to use resize.
matchMedia allows "and", no need for two separate checks.

Instead, for just a reactive check:

<script>
matchMedia("(max-width: 767px) and (max-width: 1259px)").addListener(function(e) {
    if (e.matches) {
        // Your .filter--facet-container logic here
    }
});
</body>
</html>

or for an initial proactive check and then reactive checks afterward (probably what you want):

<script>
(function() { // Avoid creating globals
    var matcher = matchMedia("(max-width: 767px) and (max-width: 1259px)");
    function facetContainerLogic() {
        // Your .filter--facet-container logic here
    }
    // Proactive initial check
    if (matcher.matches) {
        facetContainerLogic();
    }
    // Get notifications when it changes
    matcher.addListener(function(e) {
        if (e.matches) {
            facetContainerLogic();
        }
    });
})();
</body>
</html>

edited Sep 3, 2018 at 6:42

answered Sep 3, 2018 at 6:15

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JsStorm2 Over a year ago

I wanted to paste this script in console, but its is still not working

T.J. Crowder Over a year ago

@JsStorm2 - It does work. It fires an event when the condition changes. If you want an initial proactive check, you'd do that separately. I've updated to show that. See also MDN's coverage of JavaScript media queries.

Collectives™ on Stack Overflow

resize function and change css value of my class (in javascript)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related