Is the external panel in jQuery Mobile always visible or can it be positioned?

I am looking to use the same panel across multiple pages in a jQuery multipage HTML file. My goal is to have consistent code throughout all pages.

However, I am encountering an issue with the positioning of external panels. Currently, it seems that external panels always open at full page height. I would prefer them to behave like the panel on the jQuery Mobile demo page:

  • always visible on larger screens (e.g. desktop browser), and
  • when visible, remain "inside" the page (e.g. below the header).

In summary, I want to create an external panel that mimics the exact behavior of the internal panel on the demo page.

My initial idea was to include an external HTML file on each page so I could easily edit one file for all instances. However, this approach presented challenges as elements ended up sharing the same ID (particularly forms within the panel).

Is there a more efficient solution to address this problem?

javascriptjqueryhtmlcssjquery-mobile

Answer №1

The CSS and HTML code snippet provided below is extracted from the JQM Demo Page. On the demo page, the panel is displayed beneath the header only if the browser window exceeds 60em (960px), but in my demonstration, I have set it to 40em.

Remember, external panels should be placed at the end of the data-role pages.

To witness the functionality, expand the window to unveil the panel.

The Demo Link

HTML Code:

<div data-role="page">
    <div data-role="header">
            <h1>External panels</h1>
    <a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars opanel">Opanel</a>

    </div>
    <div role="main" class="ui-content my-content">
            <h1>Content Area</h1>

    </div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
    <br>
    <ul data-role="listview">
        <li>The Panel</li>
        <li>option A</li>
        <li>option B</li>
        <li>option C</li>
        <li>option D</li>
    </ul>
</div>

CSS Code:

@media (min-width: 40em) {
    #my-panel {
        visibility: visible;
        position: relative;
        left: 0;
        clip: initial;
        float: left;
        width: 25%;
        background: none;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        transform: none !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .my-content {
        width: 67%;
        padding-top: 2em;
        padding-left: 5%;
        padding-right: 3%;
        float: right;
    }
.opanel {
 visibility:hidden;   
}
}

Javascript Code:

$(function () {
    $("body>[data-role='panel']").panel(); //initialize the external panel

    $(document).on("click", ".opanel", function () {
        $("#my-panel").panel("open")
    });
});

Answer №2

Here's a more intricate example. When the panel's width is set to 300px and the window is smaller than 900px, an icon with the class .opanel will be displayed.

<script id="panel-init">
    function resizeP() {
        var cw = $("body").prop("clientWidth");
        var padding2x = 32;
        if (cw > 900) {
            $(".my-content").width(cw - 300 - padding2x);
        }
        else
            $(".my-content").width(cw - padding2x);
    }
    $(function () {
        $("body>[data-role='panel']").panel(); //initialize the external panel
  
        $(document).on("click", ".opanel", function () {
            $("#my-panel").panel("open");
        });
    
    });
    $(document).ready(function () {
        resizeP();
    });
    $(window).resize(function () {
        resizeP();
    });

</script>
<style>
    @@media screen and (min-width: 900px) {
        #my-panel {
            visibility: visible;
            position: relative;
            left: 0;
            clip: initial;
            float: left;
            width: 300px;
            background: none;
            -webkit-transition: none !important;
            -moz-transition: none !important;
            transition: none !important;
            -webkit-transform: none !important;
            -moz-transform: none !important;
            transform: none !important;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        .my-content {
            width: 300px;
            /*padding-top: 2em;
            padding-left: 5%;
            padding-right: 3%;*/
            float: right;
        }

        .opanel {
            visibility: hidden;
        }
    }

    .ui-content {
        padding: 16px;
    }

    .countBubl {
        float: left;
        margin-top: -30px;
        margin-left: 35px;
        background: #ed1d24;
        color: #fff;
        padding: 2px;
    }




    .ui-li-static.ui-collapsible > .ui-collapsible-heading {
        margin: 0;
    }

    .ui-li-static.ui-collapsible {
        padding: 0;
    }

        .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
            border-top-width: 0;
        }

        .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
        .ui-li-static.ui-collapsible > .ui-collapsible-content {
            border-bottom-width: 0;
        }
</style>
<div data-role="page">
    <div data-role="header">
        <h1>External panels</h1>
        <a href="#" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars opanel">Opanel</a>

    </div>
    <div role="main" class="ui-content my-content">
        <h1>Content Area</h1>




There are additional contents in this page that can provide you with further information on how to integrate panels into your website or web application.

If you have any questions or need assistance, feel free to reach out!

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

When using React JSX, the style attribute does not recognize the object-fit property for images

When working with bootstrap cards, I encountered the need to make all images within the cards the same size. While there are various ways to achieve this, I used the following styling approach: Take a look at the image style below <div className=" ...

cssreactjstwitter-bootstrapjsxbootstrap-5

Leverage jquery to retrieve JSON information

I'm currently struggling with validating the uniqueness of an email address in my form using ajax and accessing the JSON data with jquery. When a user enters an email address (triggered by keyup), it is sent to the controller which returns JSON data ...

jqueryruby-on-railsjsonajax

Using the native functionality, submitting a razor form with JQuery AJAX in MVC6

Is there a specific method to submit a form using jQuery AJAX in MVC6 while still utilizing the Auto Binding functionality of ASP.NET MVC? In previous versions of MVC, one could use jquery.unobtrusive-ajax and simply utilize @using (Ajax.BeginForm("SaveDa ...

javascriptjqueryajaxasp.net-mvcasp.net-core-mvc

After receiving a data token from the server in one controller, how can I efficiently utilize that token in a different AngularJS controller?

In my adminSearchCtrl controller, I am receiving data from the server in the form of a token and want to pass that token to another controller named "adminViewCtrl". How can I achieve this? adminSearchCtrl.js $scope.getUserDetails = function(selectedUser ...

javascriptjqueryangularjsnode.js

What is the best way to add an array containing several objects using Sequelize and Node.js?

I'm facing an issue with inserting an array of multiple objects into the code block below. It doesn't seem to be working as expected. let Bookarray = [{author:"john matt", BookName:"Beauty of Nature"}, {author:"Mick Foley ...

javascriptsqlnode.jssequelize.js

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actua ...

htmlcssbootstrap-4

I'm facing a challenge with retrieving the controller's scope in my Angular directive

Having trouble accessing the settings I receive from the server in my app. The directives are set up correctly and the $http is used to fetch a js file with the app settings. However, despite being able to log the scope in the console, I am unable to acces ...

javascriptangularjsajaxdom-events

Include the script tags retrieved from an array

I'm exploring the idea of dynamically adding JavaScript to the DOM using an array and a loop. The goal is to load each script sequentially, starting with scripts[0], then scripts[1], and so on. var myScripts = [["external", "https://code.jquery.com/j ...

javascript

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

Integrating Speech-to-Text functionality into a React Native chat application: A step-by-step guide

For our project, my friends and I are developing a chat application that will incorporate Google's Speech-To-Text, Text-to-Speech, and Translation APIs. We have successfully integrated Gifted Chat and Firebase into the app, with Text-to-Speech already ...

javascriptreact-nativespeech-to-textgoogle-speech-apireact-native-gifted-chat

Is there a way for me to store the retrieved information from an API into a global variable using Node.js?

function request2API(option){ const XMLHttpRequest = require('xhr2');//Cargar módulo para solicitudes xhr2 const request = new XMLHttpRequest(); request.open('GET', urlStart + ChList[option].videosList + keyPrefix + key); request. ...

javascriptnode.js

Looking to extract the first URL from a string using JavaScript (Node.js)?

Can someone help me figure out how to extract the first URL from a string in Node.js? " <p> You left when I believed you would stay. You left my side when i needed you the most</p>**<img src="https://cloud-image.domain-name.com/st ...

javascriptnode.js

Unable to transmit an object using ExpressJS

Greetings. I am currently trying to comprehend ExpressJS. My goal is to send a simple object from the express server, but it only displays "cannot get" on the screen. app.get("/", (req, res, next) => { console.log("middleware"); const error = true; ...

javascriptnode.jsexpress

Calculating the combined size of various files using PHP

I'm having trouble figuring out how to upload multiple files with a single input and limit the total size of all files to less than 100 MB. Can someone help me with this issue? Below is the code that I currently have: <?php if(isset($_POST[&apos ...

phphtmlfileupload

text: Methods for refreshing a Cognito access token in a JavaScript application without generating a client secret in Angull

How can I refresh a Cognito access token in a JavaScript application (AngularJS) if the client application does not generate a client secret? I attempted to use the code snippet below but it resulted in the following error message: {"error":"invalid_clien ...

javascriptangularjsoauth-2.0amazon-cognitoaccess-token

What is the best way to access specific information about the top card in a Trello list?

Is there a way for me to retrieve the name, label, and due date of the top cards in a Trello list on my board and then send it through Discord using my bot? I would greatly appreciate any guidance on how to achieve this. ...

javascriptarraysdiscord.jstrello

Transfer an Array of Objects containing images to a POST API using Angular

Looking to send an array of objects (including images) to a POST API using Angular and Express on the backend. Here's the array of objects I have: [{uid: "", image: File, description: "store", price: "800"} {uid: "f ...

javascriptarraysangulartypescriptobject

Issue with a hidden div, problem with scrolling, a div overlapping other divs

I'm feeling a bit lost here, trying to figure out what went wrong. It seems like a simple mistake, but I can't pinpoint it. Currently, I'm just testing everything out for a mobile website template. Hopefully, that information helps. For any ...

javascriptjqueryhtmlcss

What sets usePreloadedQuery apart from useQueryLoader?

I've been exploring graphQL and the react-relay library. These are the key points I've covered: Rendering Queries: where usePreloadedQuery is introduced. Fetching Queries for Render: where useQueryLoader is introduced. To keep it simple, I&apo ...

javascriptreactjsgraphqlreact-relay

Return a response from the controller method without using the express response object

When attempting to handle the scenario where a fetch for an item does not return anything from another method that lacks the express response, I encounter an issue. I invoke this method from another one that has the express response: const updateItem = asy ...

javascriptnode.jsexpress