Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () {
    // retrieve the width of the screen
    var screenWidth = 0;
    $(window).resize(function () {
        screenWidth = $(document).width();

        // if the document's width is less than 768 pixels

        if (screenWidth < 768) {
            // enable accordion feature
            $('#accordion').accordion({
                heightStyle: false
            });
        } else {
            // disable accordion feature when changing screen size
            $('#accordion').accordion("disable");
        }
    });
});

Answer №1

Give this a try.

$(document).ready(function () {
// check screen width
var Docwidth = 0;
    testWindowWidth();
});

$(window).resize(function () {
   testWindowWidth();
});

function testWindowWidth(){
     Docwidth = $(document).width();   

    //if document width is smaller than screen

    if (Docwidth < 768) {
        //activate accordion
       $('#accordion').accordion({
            heightStyle: false
        });

    } else {
        // deactivate function when screen size changes

        $('#accordion').accordion("disable");

    }
}

You should place the '$(window).resize();' outside of the "$(document).ready();" section, as it will only run once within "ready".

I hope this information was useful.

Check out the Demo <- Don't forget to modify the innerWindow of the red block :)

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

Issue with Magento cart not updating after making a POST request using JQuery's ajaxSubmit function

Recently, I encountered a unique requirement that led me to use ajaxSubmit in order to add products to the Magento shopping cart. Despite using return true; as a callback, the shopping cart page displays empty until manually refreshing the page from the br ...

Hiding a pop-up element and updating the state to False when clicking anywhere outside the element in the background

Presented here is my Search.js component. class Search extends Component { state = { doctors: [], showTab: false } openTab = () => { this.setState({showTab: true}); console.log('openTab state', this ...

Is it possible to incorporate content according to the time elapsed since a jQuery ajax request was executed?

I've set up a $.ajax() request on my webpage with the necessary success and error parameters. Here's what it looks like: $.ajax({ type: 'GET', url: getUrl, async: true, success: function(data) { $("#page").html( ...

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

The tabs functionality is broken due to an upgrade in jQuery and jQuery UI

I recently upgraded my website to use the latest versions of jQuery and jQuery UI, but I'm facing some unexpected issues with the Tabs widget. Previously, everything was working fine with jQuery 1.5.1 and jQuery UI 1.8.4. After upgrading to jQuery 1. ...

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

Oops: Looks like there is already a request for 'PUBLIC_requestAccounts' pending from http://localhost:3000. Just hold tight for now

There comes a moment when an unexpected error arises and fails to establish a connection with your wallet. if (window.ethereum) { console.log("11") const connect = async () => { const account = await window.ethereum.request({ ...

Having trouble running classes using Maven test with the Testng.xml file in the terminal, however, it runs smoothly in Eclipse

While I have been successful in running my solution through the testng suit in the Eclipse console, I am facing difficulties executing the testng.xml file via Maven integrated with Sauce Labs in the terminal. Output received on the terminal: ------------ ...

ng-include does not incorporate a partial view

I am facing an issue with ng-include as this code is not functioning properly and I'm unable to identify the error. <select name="select" id="select" class='input-large' ng-model="selectedbien"> ...

Exploring AngularJS: Retrieving a list of filenames from a specified directory

In the public directory of my application, there is a folder named 'x'. I have the path name to the folder (/path/to/dir/x) but I am unsure of the names of the files within it. How can I retrieve the file names and provide URL links to them in an ...

Checking all checkboxes in a list using Angular 5: A simple guide

I have a list that includes a checkbox for each item, and I want to confirm if all of them are checked off. This is the HTML code snippet: <ul class="ingredient-list" > <li class="btn-list" *ngFor="let ingredient of recipe.ingredients"> ...

Stop the Sidebar from showing up on certain pages with Next.js

Currently, I am facing a small issue with my application. The problem lies in the sidebar that appears on my login.jsx page when I specifically do not want it there. However, I would like it to appear on all other pages except for this one. Is there a cond ...

React JS: You must define 'Message' in order to avoid the react/jsx-no-undef error

As a novice learner in React JS, I am currently working on developing a messaging web application. However, as I was writing my code, I encountered the following error: Failed to compile. ./src/App.js Line 41:17: 'Message' is not defined react/j ...

AngularJS simplifies request handling by allowing currying of requests

I am working with three forms within the same container, each triggered by a specific objectId. I want to create a function that can handle all actions related to these objectIds. Unfortunately, I am restricted to using ES5. var applyActions = function( ...

The notify.js fails to display notifications in the event of an error

Why am I not receiving any error notifications even when there is an error message in the response object? $.ajax(settings).done(function (response) { if ( "error_message" in response ) { console.log(response); $.notify(" ...

The announcement will not be made as a result of the utilization of a private name

I've been working on transitioning a project to TypeScript, and while most of the setup is done, I'm struggling with the final steps. My goal is to use this TypeScript project in a regular JavaScript project, so I understand that I need to genera ...

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

Formatting in Cx framework: Configuring right alignment and decimal precision on NumberField

Currently, I am involved in a project that involves UI development using Cx, a new FrontEnd framework based on React. You can find more information about Cx at One of the tasks in my project involves creating a Grid with filter fields located at the top ...

jQuery validation requires either two fields to be filled out or one other field

I've been searching extensively for a solution that addresses my specific requirements. I have three fields – first name, last name, and business name. My goal is to allow users to input either both their first and last names or just the business na ...

Using JQuery template: a guide to accessing recently added option elements with JQuery templates

I have a JSON array that needs to be iterated through in order to create HTML option items using the JQuery template. However, I am facing an issue where there are duplicate values within each group of data. For example, 'a' can appear in both gr ...