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

Sending AJAX Responses as Properties to Child Component

Currently, I am working on building a blog using React. In my main ReactBlog Component, I am making an AJAX call to a node server to get back an array of posts. My goal is to pass this post data as props to different components. One specific component I h ...

Organizing and Analyzing data in a ng-repeat with AngularJS, influenced by a higher level ng-repeat

Currently tackling the challenge of creating a fairly intricate ng-repeat that involves filtering and parsing. My initial step is to employ ng-repeat to populate a table with 12 months starting from the current month. Following that, I am organizing two ...

Insufficient image quality on mobile when using HTML5 canvas toDataURL

I've encountered an issue with the toDataURL("image/png") function. My canvas contains various lines, colored shapes, and text. While the resulting png image appears sharp on desktop Chrome, it becomes pixelated and low quality when viewed on mobile C ...

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

Issue with constructor including an interface

I'm facing an issue with a typescript class that has an interface implemented in the constructor parameter: interface responseObject { a: string; b: boolean; c?: boolean; } class x { a: string; b: boolean; ...

What sets apart +variable+ and ${variable} in JavaScript?

Just starting to code and eager to learn. While I was taking in a lecture, I came across this interesting snippet of code: var coworkers = ['go', 'hello', 'hi', 'doit']; <script type="text/javascript&q ...

I am looking to sort through the data based on the courseCode, but I can't seem to find a way to do it

Here is the JSON data after converting it with res.json() I attempted to filter it based on course code, let's say the code is: 301. I am confused about how to achieve this using JavaScript because of the nested structure. Here is the code snippet I ...

Tips for embedding an object into an iframe source

I have successfully integrated a YouTube iframe into my HTML file. However, I would like the source URL to be dynamically generated based on data from the backend rather than manually inputting the URL as shown below. In the admin panel, there is an object ...

Developing custom functions in ejs for individual posts

In my blog, I have a feed where all users' posts are displayed dynamically using ejs. There is a comment section that remains hidden until the user clicks the comments button. Below is a snippet of my ejs file: <% posts.forEach(post => { %> ...

Stop form from submitting on bootstrap input, still check for valid input

Encountering a dilemma here: Employing bootstrap form for user input and utilizing jQuery's preventDefault() to halt the form submission process (relying on AJAX instead). Yet, this approach hinders the input validation functionality provided by boots ...

Pressing a shortcut key will direct the focus to the select tag with the help of Angular

I was trying to set up a key shortcut (shift + c) that would focus on the select tag in my form when pressed, similar to how tab works. Here is the HTML code for my form's select tag: <select id="myOptions"> <option selected> Opti ...

Ways to centrally position elements in a Bootstrap table

I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically: https://i.sstatic.net/rMqSR.png This is how the HTML appears: .table > tbody > tr > td { vertical-align ...

Create a search feature using Javascript and React that retrieves and displays results from a

I am currently developing a React application with a search feature that fetches JSON data and displays matching search results on the website import { React, useState } from 'react'; export default function PractitionerSearch() { const [data ...

Reorganizing JSON Information

Currently, I am dealing with a JSON file that contains multiple sets of data structured like this: {"name": ["Adelphi University"], "supp": ["Yes: E, WS"], "ed": ["\u00a0"], "online": ["$40"], "ea": ["12/1"], "mid": ["No"], "rd": ["Rolling"], "recs": ...

What is the best way to extract the information from the checkbox in a MUI datatable?

I am struggling to transfer an array with checked values to another table in order to display only those values. How can I achieve this? I am relatively new to using react and I find it challenging to grasp how some of the functions and components work. I ...

Understanding the Use of Promises and Async/Await in Typescript

Struggling with asynchronous libraries in Typescript, I find myself looking for a way to wait for promises to be resolved without turning every method into an async function. Rather than transforming my entire object model into a chain of Promises and asyn ...

Storing data from an HTML table in a view using MVC4 - a step-by-step guide

Currently, I have an HTML table displayed on a webpage where users can input data at runtime. My goal is to store all the rows from this table into a database through the use of a controller. It's similar to how a WinForms application would save multi ...

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls? <style> body { background-image: url(img/bg-pattern-01.png), ur ...

Is there a way for my JavaScript file to manipulate an EJS variable?

In the index.ejs file, I declared an ejs variable named "complete" which verifies whether a user has completed a journal entry by using the following code: <% if (complete == false) { %> <button class="new_journal">Fill Out Journal<i cla ...