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

The function createVNode does not exist in the context of Vue integrated with Laravel

Hovering over a white background will darken the CSS styling

Encountering a "Window is undefined" error while trying to load a node_module package within a

Eliminate any unnecessary gaps that may exist between the cards within the deck

Differences between the http module and Express framework

What is the process for editing or importing CSS within a React project?

Accessing RESTful data using an Angular service

Concealing a div depending on the price variation

What is the best way to create an array within an object in JavaScript?

Is there a way to troubleshoot why new data is not appending to existing data in React's infinite scroll feature?

Decoding GeoJSON: Extracting a feature from an array

Creating collapsible items in Bootstrap

What are some ways to display multiple divs within a single popup window?

What causes my useEffect hook to trigger twice in React?

Numerous data retrieval commands within the componentWillMount lifecycle method

Header formatting issue when attempting to implement tablesorter plugin

Enhance the appearance of datatables pagination with a personalized touch

What could be causing the calendar icon to not display in the table cell?

What could possibly be causing the "Unexpected token (" error to appear in this code?

Sort the array in alphabetical and numerical order while meeting a specific condition