How Create an event handler for event "resize"?

Question

when alternating the display on the browser (F12) from mobile or responsive to desktop the div (content_filter) disappears.. refresh the page to fix the bug.

Desktop view

from what I understand I need to add a Window: resize event to avoid refreshing each time. my level in javascript is completely beginner. can you show me the correct technique with my code?

<script>

        document.addEventListener('DOMContentLoaded', function () {
            jQuery(function ($) {

                $('.filter_btn').click(function (event) {
                    if (window.innerWidth <= 768) {
                        $('.content_filter').slideToggle('250', 'swing', 'hide');
                    }
                });
            });
        });
    </script>

    <style >
        @media all and(max - width: 768 px) {
            .content_filter {
                display: none;
            }
        } 
</style>

Abdelaziz Alsabagh · Accepted Answer · 2022-03-20 21:32:36Z

1

You can use:

window.addEventListener('resize', function () {
console.log(window.innerHeight);
});

check https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event for further informaion.

answered Mar 20, 2022 at 21:32

Abdelaziz Alsabagh

3001 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

How Create an event handler for event "resize"?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related