Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices.

For the design, I want the panel width to be 100% in mobile view and 30% in tablet view. To achieve this, I have used the following @media code:

@media all and (max-width: 35em) {
    .overlay{
        width: 100%
    }
}
 
@media all and (min-width: 45em) {
    .overlay{
        width: 30%
    }
}

However, after running this code, I encountered an issue where the fixed header overlaps with the menu.

In the tablet view:

Here is how it looks: https://i.sstatic.net/Ah10s.jpg

In the mobile view:

And here is the mobile view: https://i.sstatic.net/KP0jQ.jpg

If you have any suggestions on how to solve this issue or if there is a better solution to achieve the desired layout, please let me know. This is the UI I'm aiming for:

In the mobile view:

Desired mobile view: https://i.sstatic.net/E1tU2.jpg

In the tablet view:

Desired tablet view: https://i.sstatic.net/JtcEf.jpg

NOTE: Please do not confuse the back button and close button.

Thank you and best regards.

htmljquerycssjquery-mobileresponsive

Answer №1

To address this issue, you will need to tackle two main challenges: adjusting the switch panel's display mode and establishing the panel width in percentage.

There are various types of panels available such as overlay, reveal, and push. You can learn more about these options by visiting: Panel - jQuery Mobile Demos. Once the panel widget is initialized, the implementation may vary based on the chosen display mode (or the data-display attribute).

Instead of switching panel types, consider destroying and recreating the panel widget. Another approach would be to stick with the panel overlay option and utilize media queries to adjust the panel width. An insightful response provided by ezanker addresses this technique in detail here: How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?.

The process involves several classes due to the JQM CSS code which sets a fixed width of 17em for the panel.

You may also attempt to override the ui-panel-wrapper class and modify the margin-left property to 30% specifically for tablet views.

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

Choosing HTML components using Selenium in the Whatsapp application

Apologies in advance for any language errors. I am currently working on a script using selenium and python to identify all messages with photos in a group. The structure of all message boxes is the same. Repository: # feel free to check out my code if you ...

pythonhtmllistseleniumwhatsapp

Refresh the Document Object Model (DOM) and transmit the present time

I am having an issue with sending the actual current time when a button is clicked. Instead of getting the current time, I am receiving the time when the page initially loaded. This button is used to submit a form on Google Sheets using an API. This is th ...

javascriptphpjquerydom

Issue with AngularJS: Local storage not saving updated contenteditable data

My local storage implementation stops working when I attempt to incorporate contentEditable feature. Here is the link to the CodePen for reference: https://codepen.io/zanderbush/pen/WNwWbWe. Any assistance would be greatly appreciated. The functionality w ...

javascripthtmlangularjs

Tips for triggering an event exclusively for the initial item in the Menu

Upon page load, I require a trigger call to be made on the menu. This action should only be performed for the first element in the menu, which is 'Bottle' in this case. <div class="swiper-wrapper" id="swipecontainer"> <div class="s ...

jquery

What is the reason IE7 does not recognize these two strings as equal?

My event handler is designed to remove an element from a list if the corresponding checkbox is unchecked. When the checkbox is clicked, I first capture the value of the label associated with it: var label = $(this).next().html(); Next, I loop through the ...

javascriptjqueryinternet-explorer-7

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

I'm currently working on integrating a chat feature into my Angular Firestore and Firebase app. Everything seems to be functioning well, except for one issue - whenever a new message is sent or received, the screen automatically scrolls up and gets st ...

htmlangulartypescriptangularfireionic5

What is the process for incorporating PHP into a three-dimensional virtual world?

I recently completed a client's website using a combination of PHP and basic HTML/CSS. The site's main feature is the ability for users to upload images and view them in a digital art gallery. Essentially, I positioned the images against a backgr ...

phphtmlweb3d

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

I've created an awesome collection of CSS-generated cards containing icons and text with a cool animation that expands upon tapping to reveal more icons and options. I carefully crafted the list to look and behave exactly how I wanted it to. But now, ...

javascriptjqueryhtmlcssjson

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

javascriptjqueryhtmlcss

How to efficiently insert multiple values into a MySQL database by utilizing a single HTML option

I'm currently facing an issue with a section of my form. I can't seem to figure out what's causing the problem, so I've decided to reach out here for some guidance. The code I've written aims to determine both the gender and sexua ...

phpmysqlhtml

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

javascriptcssreactjsmaterial-uireact-router

Adjusting iframe height dynamically across domains using Jquery

Can this task be accomplished using jQuery alone without using any bulky plugins? While I am aware of the numerous plugins and alternatives available, I am looking for the shortest, most robust, and cleanest solution (ideally utilizing jQuery). Feel free ...

javascriptjqueryiframedynamicheight

What steps can be taken to avoid my Bootstrap banner wrapping to a new line?

I am facing an issue while designing a top banner using Bootstrap. The condensed menu always wraps to a new line for the resolution of 1024x768. It works fine for resolutions greater than 1024x768. I need help with correcting my HTML so that the banner rem ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to restore the text to its original state?

Currently, I'm working on creating a simple website for server users to order items. However, I've encountered an issue related to the Navigator text. Here is how it currently appears: Upon inspecting the code below, you'll notice that the ...

htmlcss

Achieving a fixed footer at the bottom with absolute positioning on a webpage

I'm facing an issue with positioning a footer on my webpage, which is made up of div sections that are absolutely positioned. The problem arises because using the bottom property fixes the footer to the bottom of the screen rather than the bottom of t ...

htmlcsscss-positionfootersticky-footer

Extracting Values from a jQuery Array Object

Good day everyone! Here is the code I am currently working with: var items = []; $(xml).find("Placemark").each(function () { var tmp_latLng = $(this).find("coordinates").text(); tmp_latLng = tmp_latLng.split(","); items.push({ name: ...

javascriptjqueryarraysxmlparsing

What is the best way to utilize display:flex and justify-content:space-between, ensuring that the flex-item is centered when there is only a single item present?

How can I center a single flex item in a container with justify-content: space-between in CSS? #container { display: flex; justify-content: space-between; } <div id="container"> <div class='flex-item'></div> . ...

htmlcssflexbox

Performing calculations using jQuery and organizing sub-totals into groups

I am currently developing a web application and aiming to incorporate an invoice calculation feature with sub-groups. My goal is to have the total result of both group-totals and sub-totals at the end. Here is my progress so far: Check it out here $(func ...

jqueryhtmlmath

including a code snippet within a dropdown menu or embedding it in a clickable button

Hey there, my name is Wouter Sanders and I am currently learning to code! I recently finished creating a RAL color picker for a project I'm working on. The only issue I've run into is trying to embed the code in a menu or button so that it doesn ...

javascriptjqueryhtmlcss

Difficulty with linking a CSS property to an HTML element using JavaScript

I'm currently working on building a custom carousel from scratch. Instead of using pre-made code snippets, I decided to challenge myself by creating one using setTimeout in JavaScript. However, I seem to be encountering an issue that I can't quit ...

javascripthtml