What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

Question

What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

I am working on a functionality where the navigation bar items will toggle hidden or shown only when the browser width is less than 768px and an element with the class "navlogo" is clicked. I have included my code below for reference.

if ($(window).width() < 768) {

    $(".navlogo").click( function (){
        $(".navwrapper").toggle();
    });
    $(".navitem").click( function (){
        $(".navwrapper").hide();
   });

}

I understand that this might seem like a duplicate question, but it is not. My main concern is to make this functionality work without requiring a page refresh. If Angular.js is necessary for achieving this, I would appreciate guidance on the specific code to implement, as I am open to using it to enhance user experience.

One issue I have noticed is that if I do not include the following condition:

if ($(window).width() < 768) {}

The functionality still works correctly. However, even when the website is not in mobile mode (with a max width of 768px or lower), clicking on the element with the class "navlogo" hides the "navwrapper." While this behavior is not entirely undesirable, I would also like the "navwrapper" to hide when a user clicks on an element with the class "navitem."

Thank you for your assistance!

javascript jquery html css angularjs

Answer 1

Answer №1

Ensure that the if statement is contained within the click function:

$(".navlogo").click( function (){
    if ($(window).width() < 768) {
        $(".navwrapper").toggle();
    }
});
$(".navitem").click( function (){
    if ($(window).width() < 768) {
        $(".navwrapper").hide();
    }
});

Edit:

To display or hide the .navwrapper based on window resizing, you should listen for the window resize event.

$(window).on('resize', function(e) {

    if ($(window).width() > 767 && $(".navwrapper").is(':hidden')) {
        $(".navwrapper").show();
    }

});

Here are some things to keep in mind:

Consider using variables for selectors that are repeatedly used
For efficiency, consider wrapping the actions inside the resize function with a timeout
Where possible, utilize CSS for responsiveness instead of relying solely on JavaScript

Answer 2

Ensure that the if statement is contained within the click function:

$(".navlogo").click( function (){
    if ($(window).width() < 768) {
        $(".navwrapper").toggle();
    }
});
$(".navitem").click( function (){
    if ($(window).width() < 768) {
        $(".navwrapper").hide();
    }
});

Edit:

To display or hide the .navwrapper based on window resizing, you should listen for the window resize event.

$(window).on('resize', function(e) {

    if ($(window).width() > 767 && $(".navwrapper").is(':hidden')) {
        $(".navwrapper").show();
    }

});

Here are some things to keep in mind:

Consider using variables for selectors that are repeatedly used
For efficiency, consider wrapping the actions inside the resize function with a timeout
Where possible, utilize CSS for responsiveness instead of relying solely on JavaScript

Answer 3

Answer №2

Are you considering implementing this feature exclusively for desktop platforms or do you want it to function on both mobile and desktop devices? If you're aiming for the latter, you can utilize two different events:

For mobile devices, use "orientationChange", and for desktop devices, utilize "resize".

For instance,

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

Then,

$(window).on(orientationEvent, function(evt){
   if ($(window).width() < 768) {
    $(".navlogo").click( function (){
        $(".navwrapper").toggle();
    });
    $(".navitem").click( function (){
        $(".navwrapper").hide();
   });
}
});

Answer 4

Are you considering implementing this feature exclusively for desktop platforms or do you want it to function on both mobile and desktop devices? If you're aiming for the latter, you can utilize two different events:

For mobile devices, use "orientationChange", and for desktop devices, utilize "resize".

For instance,

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

Then,

$(window).on(orientationEvent, function(evt){
   if ($(window).width() < 768) {
    $(".navlogo").click( function (){
        $(".navwrapper").toggle();
    });
    $(".navitem").click( function (){
        $(".navwrapper").hide();
   });
}
});

Answer 5

Answer №3

If you're looking for a solution, I suggest utilizing the .resize() method in jQuery.

$(window).resize(function() {
    if(this.width() < 768) {
        $(".navlogo").click( function (){
            $(".navwrapper").toggle();
        });
        $(".navitem").click( function (){
            $(".navwrapper").hide();
        });
    }
});

Answer 6

If you're looking for a solution, I suggest utilizing the .resize() method in jQuery.

$(window).resize(function() {
    if(this.width() < 768) {
        $(".navlogo").click( function (){
            $(".navwrapper").toggle();
        });
        $(".navitem").click( function (){
            $(".navwrapper").hide();
        });
    }
});

What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

Answer №1

Answer №2

Answer №3

Similar questions

Initiate a Gravity Forms form refresh after modifying a hidden field with jQuery

Formatting dates in a C# MVC application after parsing JSON

How can we automatically redirect users to an external website based on their responses to a specific question in SurveyJS?

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

Troubleshoot: Bootbox Confirm Functionality Issues

A guide on showcasing the compilation results of PHP code directly on the web browser

JavaScript property counterparts

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

Is your Navbar having trouble readjusting its height?

Achieving Text Wrapping Around Unconventional Shapes Using CSS

What is the best method for setting up message scheduling for a Microsoft Teams bot based on different time

I'm having trouble getting an audio file to play in my Laravel application. I uploaded the audio file to local storage, but when I try to play it using the audio tag, it's not

Matching multiple divs with different ids in PHP using preg_match_all and regex

Retrieve the concealed method's name within the immediately invoked function expression (IIFE

Transform a span into a div while retaining its content and styles, ensuring compatibility with Internet Explorer

If the number exceeds 1, then proceed with this action

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Is there a way to apply textTransform to all components across the board?

When requesting a Node.js API from Javascript fetch, the session custom property is throwing an undefined error

What is the best way to incorporate PHP code within a JavaScript function?