Jump to content
Nic727

Jquery - function when resizing window

Recommended Posts

Hi,

 

I'm making a mobile menu on my website and I have a problem. When making my browser window reaching 840px and smaller, the hamburger icon is showing. I click on it and my menu is appearing, but if I keep the menu open and go back to a window bigger than 840px I have two bugs:

1. If I close the mobile menu, it make items opacity 0. So when returning to normal menu, items are still transparent.

2. If I keep mobile menu open and go back to normal menu, menu is showing… Ok, but when returning back to smaller screen, mobile menu is still here.

 

I tried something like that, but it doesn't work.

if ($(window).width() <= 840) {
        $(".mobile-menu").click(function(){
            $(".right-menu").height('100%').css({ opacity: 1 });
            $(".fas.fa-times").css({ top:'50px' });
        });
        $(".close-mobile-menu").click(function(){
            $(".right-menu").height('0%').css({ opacity: 0 });
            $(".fas.fa-times").css({ top:'-50px' });
        });}else{
            $("right-menu" && ".fas.fa-times").removeAttr('style');
        }

The last part of the code is supposed to make inline-style disappear, but it doesn't because it doesn't activate the function when resizing, but only when it's loading at a higher screen width. Is there a way to make this work when resizing to window width higher than 840?

 

Thank you

Edited by Nic727

Share this post


Link to post
Share on other sites

Ok I have the answer:

 

if($(".mobile-menu").click(function(){
            $(".right-menu").addClass("Collapse");
            $(".fas.fa-times").addClass("Collapse-x");
        }));
        
        if($(".close-mobile-menu").click(function(){
            $(".right-menu").removeClass("Collapse");
            $(".fas.fa-times").removeClass("Collapse-x");
        }));
        
        if ($(window).on('resize', function () {
           // console.log($(this).width())
            if($(window).width() > 840){
                $(".right-menu").removeClass("Collapse");
                $(".fas.fa-times").removeClass("Collapse-x");
            }
        }));
        

1. I changed to class for now, but maybe I will change back to inline-style since I didn't have a lot...

2. I guess I can remove all the "if" statement right? A bit useless...

Share this post


Link to post
Share on other sites

The idea is to make CSS media queries control what menus and styling is used, then use JavaScript to reset menu state (collapse) on resize. The menu click should use single click event to  toggle, OR on clicking of element identify what state the menu is (collapsed or not), then do the opposite.

You need to let CSS control as much as possible of the menu and styling of the page, since with media queries and CSS3 new features means more of this is possible.

Share this post


Link to post
Share on other sites
14 hours ago, dsonesuk said:

The idea is to make CSS media queries control what menus and styling is used, then use JavaScript to reset menu state (collapse) on resize. The menu click should use single click event to  toggle, OR on clicking of element identify what state the menu is (collapsed or not), then do the opposite.

You need to let CSS control as much as possible of the menu and styling of the page, since with media queries and CSS3 new features means more of this is possible.

I know. I already have media query to show the hamburger menu and have a jQuery making the menu popping up. The problem was when resizing the window when the menu is open or close. It make the normal menu look weird. I know what you mean, I could have use only media query for the menu opacity, but since my menu is the same as the normal menu, but with a different styling, it's not that easy. I also have an animation to show the menu and that's why I use JQuery to add a class/style.

Share this post


Link to post
Share on other sites

But! if the menu is transparent from mobile to desktop media queries is not doing its job, if this is css3 transitional animation for example, you would use transition: none; to reset for non mobile devices.

mobile styling to non mobile styling is the first you should fix, you can use :visible in jquery on resize to identify specific item for mobile is visible (it does not require identifying specific fixed width) , then only apply mobile specific classes, if not mobile remove these classes, so styling from mobile will never be able to transverse to non mobile.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×