jquery mobile - forcing panel open on wider screens

jquery-mobile

Solution

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 ;)

Problem

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 wide screens, the app just looks funky. WAY too wide. I understand this is meant for mobile, but, why not format it for ipads/surface/androids as well? To do this, I'd like to shorten the width by requiring the panel to be open at all times when the width exceeds a specific value. I've dug through the documentation, and the closest thing I found was: `class="ui-responsive-panel"` from the following link: http://view.jquerymobile.com/master/docs/widgets/panels/panel-fixed.php After adding it to my page header, I noticed that I can't 'swipe' the menu away when the window is wide. When I shrink the window (either on a pc browser, or by rotating the device), it can be swiped. Is anyone familiar with this, and willing to shed some light?

Original source