Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens.

$(window).on('load resize', function (e) {
    var w = $(window).width();
    if (w <= 768) {
        $('nav').css({ display: "none" })
        $('#last').off('mouseenter mouseleave mouseover mouseout');
    }
    if (w > 768) {
        $('nav').css({ display: "block" })
        $('#last').on('mouseenter mouseleave mouseover mouseout', function() { });
    }
});

I'm not sure what's causing an issue in this code. Can someone help me out?

javascriptjquerycssunbind

Answer №1

For a different approach, I suggest utilizing CSS for this task (depending on the functionality of your handler).

If you want to control the visibility of an element when hovered over, you can achieve this by setting the element to display: none !important; within the appropriate media query in CSS. This way, the hover effect will still work as intended, but the content will not be visible on mobile or tablet devices.

Why?

Your current implementation involves a JavaScript event that is triggered on window resize without any throttling. This could potentially strain the browser unnecessarily. While it may not be overly demanding, if the same result can be achieved with CSS alone, it's worth considering making the switch.

Answer №2

A more efficient approach is to set a flag when the screen size changes and then refer to that flag in the event handlers. This prevents the need to constantly detach and reattach the same function, which can be cumbersome. Here's an example:

var isSmallScreen = false;

$(window).on('load resize', function (e) {
    isSmallScreen = $(window).width() <= 768;
    $('nav').css({ display: isSmallScreen ? "none" : 'block' })
}); 

$('#last').on('mouseenter mouseleave mouseover mouseout', function() {
    if (isSmallScreen) 
        return;

    // add your logic here...
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining a JavaScript NPM project with Spring Boot Integration

Recently, I built a frontend application in React.js using NPM and utilized IntelliJ IDEA as my IDE for development. Additionally, I have set up a backend system using Spring Boot, which was also developed in IntelliJ IDEA separately. My current goal is t ...

javascriptjavamavennpm

I'm looking for the location of Angular Materials' CSS directives. Where can I find them?

Currently, I am using components from https://material.angularjs.org/latest/ for a searcher project. One specific component I am working with is the md-datepicker, and I would like to implement some custom styles on it such as changing the background colo ...

javascriptjquerycssangularjs

What is the process for converting an Angular UTC timestamp to a local timestamp?

Is it possible to convert a UTC timestamp to a local time timestamp using any function or method? I am sending the timestamp to angular moments, but the server's timestamp is in UTC. ...

javascriptangularjsionic-frameworktimestamputc

retrieving information from the database and passing it to the controller

I'm in the process of developing a new API with Express, following the MVC architecture. However, I've been facing difficulties getting the data to successfully return from the database access file to the controllers file. Initially, I attempted ...

javascriptmysqlnode.jsexpressasynchronous

Transforming dynamic tables into JSON format

Whenever a user adds a new row to the dynamic table to input customer information, I require the data to be submitted in JSON format upon clicking the submit button. HTML <table class="table table-bordered table-hover" id="driver"> ...

javascriptjsonpostdynamichtml-table

Configuring mobile devices for a sliding form using jQuery

After building a form based on the tutorial from (http://tympanus.net/Tutorials/FancySlidingForm/) for my website, I encountered some issues. While it works well on my computer and adjustments were made for responsiveness on tablets and smartphones using r ...

jqueryformsjquery-mobileresponsive-design

Tips for displaying an input element across multiple cells in ObservableHQ

Imagine you have the code snippet below representing a checkbox element in Observablehq: viewof myFilter = checkbox({ title: "Foo", description: "bar", options: myOptions, }) How can I display this element multiple times in different cells through ...

javascriptobservablehq

Equal height elements - Bootstrap

Is there a way to make all elements in a list the same height, even if one element has more text than the others? I've been using divs for this purpose, but I'm open to switching to li items. Any advice on the best approach? I'm currently w ...

htmlcsstwitter-bootstrap

Create a speech bubble using only CSS, featuring a partially see-through background and a stylish border

I wish to design a speech bubble using only CSS. There are specific requirements I need to meet: It should adjust its size based on content with some padding or a set size. The background color must be semi-transparent. You must be able to define a borde ...

htmlcsscss-shapes

Utilizing JQuery to make Google listings easily findable

Implementing Google Places for a location text box has been successful. However, I am now looking to create a class-based implementation so that I can use it with multiple places effortlessly. Is it possible to achieve this using JQuery? <script type ...

javascriptjquery

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

javascriptjqueryhtmlajaxiframe

"Troubleshooting a matter of spacing in HTML5 body

I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...

csshtml

The functionality of Jquery appears to be malfunctioning on the Drupal platform, although it performs

I've built a jQuery carousel that is fully functional when tested locally, but encounters issues when uploaded to a Drupal platform. Surprisingly, the jQuery functions properly when entered through the Console. Here's the jQuery code: carousel = ...

javascriptjqueryhtml

Stop zombie.js from loading exclusively third-party resources

During a test, I am using zombie.js to load a page from a local express server. However, the page contains a script element that makes a call to Google Analytics. I want to prevent this external script from loading while allowing other local scripts to run ...

javascripttestingexpresszombie.js

Trouble with Z-index on FireFox when using absolute positioning

After reviewing some other questions, it seems that the z-index issue in Firefox is often related to one of the items not being set as position:Absolute. <div id="AnimatedBanner" style="right:-5px;"> <object style="positio ...

htmlcssfirefox

Managing numerous invocations of an asynchronous function

I have an imported component that triggers a function every time the user interacts with it, such as pressing a button. Within this function, I need to fetch data asynchronously. I want the function calls to run asynchronously, meaning each call will wait ...

javascriptreactjsasynchronousasync-await

The matter concerning the intricacies of Rails, JQuery, Prototype, and RJS

I am exploring the integration of Jquery and ajax in rails 3.0.7, but I'm unclear on the current landscape regarding their usage together. There seems to be an abundance of hacks, plugins, and scripts available for utilizing JQuery. So: Is there an ...

javascriptjqueryruby-on-railsajaxprototypejs

Retrieve variables from an external JavaScript file

I need to fetch the currentID variable from renderermain.js and utilize it in renderermem.js. However, I am looking for a way to achieve this without modifying mem.html: <script src="renderermain.js"></script> <script src="renderermem.js"& ...

javascripthtml

Tips for closing print window dialog during Protractor testing

Currently, I am performing end-to-end testing using protractor. During a specific test, I need to verify if the print button is successfully creating a PDF. When the test clicks on the button, it triggers a print window dialog as shown below: https://i.st ...

javascriptjqueryangularprotractor

What is the best way to verify the presence of a file using jQuery?

I am using "tinyMCE" dynamically on a single page. To modify the content in "tinyMCE", I have to use the "setContent" function. However, I am unsure how to check for the existence of a file (using PHP's is_file function) either within ajax or before ...

jqueryajaxtinymce