Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the content unnecessarily.

Feel free to check out this fiddle link for reference.

$(document).ready(function() {
    $(window).resize();
    $("#filterOpen").click(function() {
        $("#mobileFilter").dialog("open");

    });
});

$(window).resize(function() {
    if ($(window).width() > 480) {
        $("#mobileFilter").dialog({
            autoOpen: false,
            dialogClass: "test",
            modal: false,
            responsive: true
        });
    } else if ($(window).width() > 481) {
        $("#mobileFilter").dialog().remove();
    }
});

Thank you in advance for any assistance provided.

javascriptjquerycssresponsive-design

Answer №1

I managed to get it working by implementing the following code snippet.

 $(document).ready(function() {
                $(window).resize();
                $( "#filterOpen" ).click(function() { 
                $( "#mobileFilter" ).dialog( "open" );

    });
            });

$(window).resize(function() {
        if ($(window).width() > 480) {
                $( ".ui-dialog" ).dialog().remove();

        }else if ($(window).width() < 480) {
             $("#mobileFilter").dialog({
                autoOpen: false,
                dialogClass: "test",
                modal: false,
                responsive: true
            });

        }
  });

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

Managing multiple URLs in a MEAN Stack application

Currently, I'm working on a MEAN stack project to implement a CRUD system for managing courses. One specific aspect that is giving me trouble is figuring out how to handle unique URLs for each course I create. As of now, I am using routeprovider for t ...

javascriptangularjsnode.jsexpressmean-stack

Can <p> be utilized without creating empty space at the top or bottom?

Is there a way to use paragraph breaks without any space at the top or bottom when there's no text above or below it? body { font-family:arial; background:#222; } #wrapper { width:100%; margin-top:100px; } .post_container { ba ...

htmlcss

Vue.js transition-group does not apply the *-move class

As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can& ...

javascriptcssvue.js

React: Transforming mongoDB date format into a more user-friendly date display

An entry saved in MongoDB contains a property called "createdAt" with a timestamp. Take a look at the example below: createdAt: 2021-10-26T12:24:33.433+00:00 If we consider this date to be today, how can I achieve the following outcomes?: Show this date ...

javascriptreactjsmongodbdatetime

The AngularJS framework is not effectively generating the desired table structure

EDIT 1 - Here is a Plnkr example that demonstrates the issue - http://plnkr.co/edit/qQn2K3JtSNoPXs9vI7CK?p=preview ---------------- ORIGINAL CODE AND PROBLEM ---------------- I've been using the angular datatable library (angular-datatables) to g ...

javascriptjqueryjsonangularjsdatatable

Learn how to use canvas and JavaScript to draw lines that display x and y coordinates on top of the mouse pointer at the same time

Implement a functionality in which lines are drawn while the mouse button is held down and simultaneously display x & y coordinates on top of the mouse pointer during mouse movement using canvas and JavaScript. The issue arises when attempting to draw lin ...

javascriptcanvashtml5-canvasmouseevent

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

I am currently in the process of customizing a theme and a plugin within WordPress. In the plugin, there is a button that allows users to click on it to bring up a form where they can ask questions. While I want users to post their questions through this p ...

phphtmlcsswordpressfooter

Locate and extract the JSON object using the specified key-value pair

Trying to extract a specific object from a complex json file, noting the key, and then returning a new json poses a challenge. I am using expressjs as the backend for this task. Sample.json '[{"ServID":"Rai 1","Parametri" ...

javascriptnode.jsjsonexpress

What is the best way to adjust the spacing in my bootstrap Navbar? I am struggling to make it stretch to the entire width of the screen

I am currently working on a website project where I want to have a navigation bar that spans the full width of the screen with a black background. I also need the links to be centered and evenly distributed within the navbar. My main issue right now is re ...

htmlcssnavbarbootstrap-5spacing

Is it possible to retrieve the original array after removing filters in Angular?

Within my component, I have an array that I am filtering based on a search string. The filtering works as expected when the user inputs characters into the search field. However, I am encountering an issue when attempting to display all records again after ...

javascriptangulartypescript

Choosing2 ajax managing outputs

Using select2 with ajax search queries to the database is going smoothly, but there is a small issue that I am encountering. For instance, when searching through IDs in the database and start typing '111' into select2, it shows 2 rows with the I ...

jqueryajaxjquery-select2

Angular.js model that is updated by checkboxes

In my project, I have created a model that is linked to several other models. For instance, let's consider a scenario similar to a Stack Overflow question associated with tags. Before making a POST or PUT request, the final Object may appear like this ...

javascriptangularjs

Error: Module not located - Unable to resolve 'crypto'

Upon running ng serve, I encountered a list of errors that need to be addressed. Here is my package JSON configuration: { "name": "ProName", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "tes ...

javascriptnode.jsangularnpmnem

Ways to remove border when image is not present

I've been attempting to use JavaScript to hide the border, but it doesn't seem to be working. Is it possible to hide the border in HTML using Java? ......................... Check out my page here Here is a snippet of my HTML: <!-- Single P ...

htmlcss

Creating an element in react-draggable with two sides bound and two sides open - here's how!

At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyo ...

javascriptcssreactjsecmascript-6jsx

Showcasing all elements of an xml through jquery while implementing a filter

Trying to implement a filter on XML using jQuery. The filtered results are showing based on the condition, but facing difficulty in displaying all XML items when the flag is set to 0; meaning that when the flag is zero, all XML items should be displayed ...

jquerycsshtml

Leveraging electron-usb alongside electron

I attempted to integrate the electron-usb library into my electron project. Upon running npm start with require('electron-usb') in my index.html file, an error is displayed in the console: Uncaught Error: The specified procedure could not be fo ...

javascriptnode.jsnpmelectronnode-gyp

Restore original scale ratio to 1:1 following zoom

I am looking for a way to revert the image back to its original zoom level when a button is clicked using the onclick() event. I require the specific code for the onclick() event function. This is the div element in my HTML: div id="zoom"> ...

javascripthtmljqueryzoomingpan

Modify the scoped variable using Angular's $resource module

I am facing an issue with my Angular application where I cannot get the results of a second $resource call to update a scoped variable. Initially, I am able to generate the initial view from an Angular $resource call to an external API and display the data ...

javascriptjsonangularjsangular-resourceangular-http

Challenges in achieving seamless interaction between Javascript Form and Ajax for logging in to a Secure Magento Store

My Webdeveloper abandoned me and my form doesn't seem to work always. When clicked it doesn't appear to do anything (just shows the "javascript:;" href on the browser status bar), but sometimes it works... I've searched everywhere for a so ...

javascripthtmlajaxmagento