jquery mobile - forcing panel open on wider screens

Question

I\'ve been trying to test my jquery mobile app on multiple devices. I currently have a panel that is opened via swipe or clicking on a \'menu\' button.

However, on

Answer 1

I am facing the problem right now and I found the solution of mJay really useful. However it would be great to use media queries instead, something like this perhaps:

 @media (min-width:35em){
    .ui-panel{
        width:30em;
    }
    .ui-panel-close { width:30em; }
}

Answer 2

I found a css-only solution for that issue that is much simpler. In the media query for your responsive panel @media (min-width:55em){...} add/overwrite the following css classes:

.ui-panel-closed {  width: 17em; }

.ui-panel-content-wrap.ui-body-c.ui-panel-animate.ui-panel-content-wrap-closed{     margin-left:17em; }

The second class might be different to yours depending on the swatch you are using; in this case it is "C". However, just take the content wrap class that wraps all your header,content, footer area.

In my example I used a panel with data-display="reveal" data-position="left" If you want it appearing on the right hand side just change margin-left:17em to margin-right:17em

If you want the panel to behave like "overlay", just forget about the second class i posted... Best regards

Answer 3

Below is my "CSS" solution. What you need to know: mnuMenu is the id of the panel that I want to always have visible on the left side of the screen and lnkMenu is the id of the a tag for the button which normally shows the panel on smaller screen widths.

    @media all and (min-width: 900px)
    {
        #mnuMenu
        {
            visibility: visible;
            position: fixed;
            left: 0;
            float: left;
            width: 300px;
            height: 100vh;
            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;           
        }

        #lnkMenu
        {
            display: none;
        }

        .ui-content
        {
            margin-left: 325px;
        }
    }

Answer 4

I'm facing the same problem. I want the panel to stay open when the user turns the device in landscape mode (tablets) or if the window is wider than a specific width at the very beginning.

Unfortunately I did not find any solutions and the jQuery Mobilele example for responsive panels in this case.

So I found a way by using some javascript but I'm not happy with this solutions since a pure CSS solution with media queries would be nicer.

However, here is my "workaround" solution.

<script type="text/javascript">

    window.onresize = function (event) {
        if (window.innerWidth > 800) {
            window.setTimeout(openPanel, 1);
        }
        if (window.innerWidth < 800) {
            window.setTimeout(closePanel, 1);
        }
    };

    function closePanel() {
        $("#mypanel").panel("close");
    }
    function openPanel() {
        $("#mypanel").panel("open");
    }

    $( "#mypanel" ).on( "panelcreate", function( event, ui ) {
        if (window.innerWidth > 800) {
            openPanel();
        }
        if (window.innerWidth < 800) {
            closePanel();
        }

    });
</script>

So if the window inner width is higher than 800, the panel opens; if it is lower than 800 it closes. Furthermore the window.onresize function is required to provide the same functionality in case the user turns the device from portrait mode to landscape mode.

Hope it helped. But I'm still looking for a better solution ;)