Is it possible to adjust the height of a panel in Jquery Mobile 1.4.5?

Currently working on a jqm project that is specifically for mobile devices.

In this project, I have implemented two panels - one set to push and the other overlay. While one panel is positioned in the left corner of the screen, the other is located in the top right corner.

My main query revolves around setting the width of the right panel to 100% (which has been successfully achieved) and adjusting the height to be between 10-20% (40px-50px). Is it feasible to accomplish this without compromising any existing functionalities? Can this adjustment be made using CSS or will there be limitations? Although I've managed to modify the width, I'm encountering difficulties with setting the height.

I appreciate any insight or advice provided in advance!

javascriptjquerycssjquery-mobilepanel

Answer №1

To customize a right or left panel, you will need to modify 3 CSS classes set by JQM: the animation, the panel, and the inner part of the panel where the content is located. Alternatively, you can create a custom overlay box for an easier solution.

Check out the Demo: https://jsfiddle.net/bz649m86/

HTML code:

<div class="box"><a class="close">Close</a></div>

CSS styling:

.box {
    position: fixed; // Positioned with a fixed layout
    top: 0; // Placed at the top of the screen
    right: -100%; // Off-screen on the right side
    background-color: blue;
    width: 100%; // Occupying full screen width
    display: block; // Displayed as a block element
    z-index: 999999; // Above other elements in view
    overflow: hidden; // No scrolling within the box
    height: 40px; // Fixed height value
    // Optional transition properties for smoother animations
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

JQuery scripting: 

// Animation on click to show the box
    $(document).on("click", ".pannel", function () {
        $('.box').animate({
            'right': "0%"
        }, 300);
    })
// Closing animation when clicked on close    
    $(document).on("click", ".close", function () {
        $('.box').animate({
            'right': "-100%"
        }, 300);
    })

Using this method allows you to have a customizable panel overlaid anywhere on the screen.

In the provided demo, the box slides in from the top of the screen.

https://jsfiddle.net/Lqxp2ewb/

Answer №2

According to the discussion:

$(document).on("click", ".pannel", function () {
    $('.box').animate({
        'top': "0%"
    }, 200);
 return false;
})

$(document).on("click", ".close", function () {
    $('.box').animate({
        'top': "-100%"
    }, 200);
    return false;
})

I'm uncertain whether using return false is preferable over preventDefault and stopPropagation. I have tested both methods, and either way, the transition is very smooth on mobile devices.

Answer №3

The CSS code in jQueryMobile.css includes a min-height attribute set to min-height: 100%. To make changes, you need to override this attribute.

If your specified height is lower than the minimum height of 100%, it will not have any impact on the layout.

In my scenario, I needed the panel to appear below a fixed header bar, so I implemented the following:

top: 38.4px;
min-height: calc(100% - 38.4px);

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

Understanding the Relationship Between Interfaces and Classes in Typescript

I’ve come across an interesting issue while working on a TypeScript project (version 2.9.2) involving unexpected polymorphic behavior. In languages like Java and C#, both classes and interfaces contribute to defining polymorphic behaviors. For example, i ...

javascripttypescriptoopinterfacepolymorphism

Avoid being redirected to another page after submitting the form, instead remain on the current page

Unable to understand why this functionality is not working the way it is supposed to... In my ASP.NET MVC5 form, I have two buttons - "Add New Product" which allows users to temporarily save product data (not to the database) and input information on anot ...

javascriptjqueryajaxasp.net-mvc

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

javascriptjqueryhtmlcssslideshow

Glimmering ivory during transformation

I have created a simple script that changes the background image when hovering over a div. However, I am experiencing a flickering issue where the image briefly turns white before transitioning. I have tried to resolve this problem but have not been succes ...

javascriptjquerycss

STLLoader enhances CSG operation functionality

I'm attempting to use a boolean operation on a loaded STL mesh file with ThreeCSG.js. Here is the code snippet: function openFile() { filePath = document.form.selectedFile.value; var loader = new THREE.STLLoader(); loader.addEventListener ...

javascriptthree.jsstl-format

The Thinkster.io MEAN Stack guide: A blank "post" appears on the homepage. What is causing this and how can I remove it?

Currently, I am immersed in the MEAN Stack tutorial provided by Thinkster.io. At this stage, I am integrating the node.js backend with the Angularjs frontend. The functionality includes data persistence for users to add posts and upvote them. However, an ...

javascriptangularjsmongodbmean-stack

find the index of the array-like name attribute in HTML using jQuery

In my code snippet, there is a simple structure like this: <div class="question_wrapper"> <input type="text" class="textinput_questions new_question" name="new_question[1][]"> <input type="checkbox" class="radioinput" na ...

jquery

Employ jQuery to assign a value to a hidden field within a form and automatically send the value

Utilizing jQuery, I am setting a value for a hidden field: $('#hidden_id').val("ABC"); Within my View, I have: <%= hidden_field_tag(:id => "hidden_id", :val => "") %> What is the best way to transfer the value "ABC" from the form ...

jqueryruby-on-rails-4

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

cssangularsassmarkdownscullyio

The challenge of managing multiple navigation pills with data-toggle in the Bootstrap framework

I'm experiencing an issue on my page where multiple nav elements with the same class and id names are being cloned. The problem arises when using nav-pills and data-toggle, only the first set is reflecting as selected, while the other sets are not. W ...

jquerybootstrap-4

The data in AngularJS is not being successfully incorporated into the service

Utilizing angularjs and ajax, I am attempting to retrieve data from a webservice and pass it to the controller. To accomplish this, I am using a holder (a factory method or service). The setup works fine without the webservice, but when trying to fetch dat ...

javascriptangularjsweb-services

Locked content and inactive link in the browser toolbar

I've encountered a challenge with my page where the content is not scrollable beyond the bar. Additionally, I'm looking to adjust the size of the image to fit the page perfectly without any gaps on the sides, and ensure that the text following th ...

htmlcssheaderpositionfooter

What are some strategies for sorting information from a list that is constantly changing?

I have been working on a web application built in asp.net that receives data from a web service in JSON format. The current task is to dynamically develop controls for this application. I achieved this by creating a list of labels with stored values using ...

c#javascriptjqueryhtmlasp.net

Exploring Angular2: The Router Event NavigationCancel occurring prior to the resolution of the Route Guard

My application has routes protected by an AuthGuard that implements CanActivate. This guard first checks if the user is logged in and then verifies if certain configuration variables are set before allowing access to the route. If the user is authenticated ...

javascriptangulartypescriptroutes

How to retrieve the chosen value from a dropdown list using jQuery and PHP

I am having trouble with a drop down menu <div class="form-group"> <select class="form-control" required name="uname" id="uname"> <option value=""/>Select Your Name</option> <?php foreach ($this->getallusers as $users): ...

phpjquery

What is the process for setting up a single button selection using OR logic and multiple button selection using AND logic?

Currently working on implementing button functionality in React for filtering data. The requirement is that when selecting specific criteria, such as bedroom 3 or multiple selections like bedroom 2 and 3, the logic should vary. For instance, selecting bedr ...

javascriptreactjstypescriptreact-native

one container stacked on top of another

I have been creating web pages using tables for a long time. Recently, I decided to make the switch to using divs like everyone else, but it has been quite challenging. Can anyone help me solve this issue? I have included an image to better illustrate the ...

csshtml

Alerts in online software when there is a modification in the database

I am working on a project to create a web application that needs to display notifications, like the ones you see on Facebook, whenever there is a new update in the database. I could use some assistance with implementing this feature. Are there any third- ...

javascriptajaxweb-applicationsnotifications

Executing a callback in AngularJS after multiple HTTP requests have been completed using a forEach loop

I am trying to update multiple items within a foreach loop by sending HTTP requests, and I need a callback once all the requests are complete. Despite searching on Stack Overflow, I haven't found a solution that works for me. Here is the snippet of m ...

javascriptangularjs

Encountering an error with NodeJs, AngularJs, and Mongoose: TypeError - Object.keys invoked on a non-object leading to Function.keys (native)

Here is the code snippet related to the issue: server.js file: app.post('/user', function(req,res){ console.log(req.body); var user = mongoose.Schema('User',req.body); user.save(function(err,user){ if(err) console.l ...

javascriptangularjsnode.jsmongodbmongoose