What's the counterpart of a CSS media query in jQuery?

I am utilizing jQuery mobile to build a sidepanel. Here is my code that incorporates swipe functionality to reveal the sidepanel:

$( document ).on( "pagecreate", "#swipe-page", function() {
    $( document ).on( "swipeleft swiperight", "#swipe-page", function( e ) {
        // Ensuring that only one panel opens when swiping
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

I want this swipe feature to be active only when the viewport width is 480px or higher. How can I implement this condition? In CSS, this would typically be handled through a media query.

jquerycss

Answer №1

Here is the clever trick I ended up using for those who are curious:

$( document ).on( "pagecreate", "#swipe-page", function() {
    $( document ).on( "swipeleft swiperight", "#swipe-page",
        function( e ) {
            element (panel: open).
            if($('#mobile-view').is(":visible")) {
                if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft" ) {
                        $( "#right-panel" ).panel( "open" );
                    } else if ( e.type === "swiperight" ) {
                        $( "#left-panel" ).panel( "open" );
                    }
                }
            }
        });
});

Basically, I set up an element that was affected by a CSS media query and then used jQuery to check its visibility. This approach ensures improved compatibility across different browsers and automatically adjusts for mobile devices when screen resolution changes.

Answer №2

A simple solution that comes to mind is:

if($("body").width() >= 480) {
     //When the screen size is large enough, allow for swiping

     //Include code for swiping here
} else {
     //If the screen is too small, prevent swiping with a fun reminder

     //You can add alternative functionality here if needed.
}

Compatibility across various browsers should not be an issue, but it's always recommended to thoroughly test on your target platforms.

Keep in mind that this approach does not behave exactly like a media query. It may not directly adjust to changes in screen size without additional logic.

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

I want my list of cards to condense down to just two columns, and I'd like the headers to be

Creating a "table" with bootstrap cards, fetching data through $smarty. When the viewport shrinks, I want to collapse the table into 2 columns. The left column should have headers like: name, date, age. The corresponding right column should display the da ...

htmlcssbootstrap-4responsivebootstrap-cards

Temporary pseudo-element that appears upon hovering

My animated arrows, implemented using pseudo elements, are experiencing an unusual behavior. When the link is hovered over, the arrows animate smoothly. However, upon leaving the link, a pseudo element briefly appears in the top left corner of the screen b ...

htmlcss

Maintaining Styles After Focus is Removed in CSS: A Guide

The CSS that styles our buttons is as follows: .btn-outline-primary { color: blue; border: 1px solid blue; background: transparent; transition: all 0.3s ease 0s; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: ...

cssangularjsbuttonfocus

The functionality of checking all checkboxes is not functioning properly within a custom function

function toggleTreeView(id) { $("#TreeUL" + id).slideToggle(function() { if ($(this).is(':hidden')) { $("#treeCollapse" + id).addClass("glyphicon-plus"); $("#treeCollapse" + id).removeClass("glyphicon-minus"); } else { ...

jqueryajaxnested-checkboxes

Using jQuery's .load function to load an HTML file from a href attribute into a div element may not function as

I'm struggling to populate the href section of my dropdown menu with my files. I'm attempting to dynamically load the files in the .where-you-tune class. Something must be off because I keep encountering (index):81 Uncaught TypeError: $(...). ...

javascriptjquerytwitter-bootstrap

Switching the background image upon clicking a navigation item in CSS

Is there a way to change the background color of this nav element when it is active/clicked using CSS? <div class="row container-fluid mainTabCon" style="width: 100%" style=""> <ul class="nav nav-pills" style="margin: 0 auto; "> ...

csshtmlbootstrap-4

Leveraging both chained 'done' and 'then' for numerous asynchronous operations

Within my code, I have two functions containing ajax calls - setEmployees and getAllRecordsForEdit. I require certain code to execute after setEmployees completes, another set of code to run after both setEmployees and getAllRecordsForEdit finish, and addi ...

javascriptjqueryajaxasynchronous

Unique title: "Unique Javascript Carousel Variation with Common Layout and Style"

I've been pondering over something lately, and despite searching on Google, I couldn't find a solution specific to my situation. It seems like no one has asked this exact question before. My current dilemma is as follows: I have a section with f ...

javascripthtmljquerycsstwitter-bootstrap

Tips for preserving newly add row with the help of jquery and php

Currently, I am attempting to implement a functionality on a Wordpress theme options page that dynamically adds rows using jQuery. Below is the HTML code snippet from the THEME-OPTIONS page <a href="#" title="" class="add-author">Add Author</ ...

phpjavascriptjqueryajaxwordpress

Bootstrap 4 Landing Page Creation

I recently had a landing page created for me with a clean and simple design. However, I have noticed that the Banner Photo is taking up too much space on the page, causing users to scroll in order to view the entire content. Is there a way to adjust the ...

htmlcssbootstrap-4

What is the best way to split CSS into multiple files for a single page application?

I have a project in Angular Kendo where I am working on developing a single page application. The plan is to separate the business logic into different pages, each with its own set of JavaScript, CSS, and HTML files that are dynamically loaded based on use ...

javascripthtmlcssangularjssingle-page-application

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

htmlcsstypescriptwebangular5

How to access array objects in JSON by using a specified key

If we consider the following HTML structure: <form action="#" action="get"> <select name="college" id="college" onchange="selection('college', 'course')"> <option value="">Select an Option</option> ...

javascriptjqueryjson

Changes made to the main.css file were erased when running gulp install within the JHipser project

Just diving into the world of jhipster. I recently included a new css property in the main.css file and referenced it in the home.html. However, after executing the gulp install command, that modification vanished from the main.css. Is there a way to ret ...

cssangularjsjhipster

What is the best way to place a horizontal line behind buttons in a design?

Hello, I was experimenting with creating a background line behind the buttons on my webpage. Previously, I used an image for this purpose but now I want to achieve the same effect using a line. <div class="feedback-option"> <div class="radios2" ...

htmlcss

Retrieve the following row after locating the ID in the search results

Here is an example of an HTML form: <form action="search.php" method="get"> <label>Name: <input type="text" name="keyname" /> </label> <input type="submit" value="Search" /> </form> When I try to search, it displays th ...

phpjavascriptjquerymysql

Utilizing Jquery's hover function to access and display the child ul element

My website, powered by WordPress, generates a ul element as shown below: <ul role="primary"> <li class="page_item page-item-7"><a href="/services/">Services</a> <ul class='children'> <li class="page_item ...

jquerywordpress

Creating a custom arrow design for a select input field using CSS

I'm currently developing a website (using Wordpress with a custom theme) and I want to incorporate an up/down arrow in the select input field using CSS. The HTML code I have for creating the up/down arrow in the select input field is as follows: < ...

javascriptjqueryhtmlcsswordpress

Although the CSS3 Mobile Multilevel Menu is functioning, it is currently unable to display the second level of the

Hi there! I am currently working on a CSS3 vertical menu for a mobile webpage. While the first level of the menu is functioning correctly, the same cannot be said for the second level. It seems to always show up on mouseover, despite my numerous attempts t ...

htmlcssmobilemenu

What is the most appropriate unit of measurement for creating a responsive design?

I am a beginner in the world of responsive design and I'm currently figuring out how to properly layout plugins on a website when viewed on smartphones. Here's an example: @media (min-width: 568px) { .musicPlayer{ width:600px; height:320 ...

cssresponsive-designmedia-queries