Jquery mobile - forcing panel open on wider screens
I am trying to test a jquery mobile app on multiple devices. I currently have a panel that opens with a swipe or by pressing the "menu" button.
However, on wide screens, the app just looks funky. The WAY is too wide. I understand this is for mobile, but why not format it for ipads / surface / androids?
To do this, I would like to shorten the width by requiring the panel to open whenever the width exceeds a certain value.
I dug out 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 the title of the page, I noticed that I cannot "scroll" the menu when the window is wide. When I shrink the window (either in the PC browser or by rotating the device) it can be scrolled.
Anyone familiar with this and would like to shed some light?
source to share
I have the same problem. I want the panel to stay open when the user rotates the device in landscape mode (tablets) or if the window is wider than a certain width at first.
Unfortunately I didn't find any solutions and jQuery Mobilele example for responsive panels in this case.
So I found a way using javascript, but I'm not happy with these solutions as 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 inner width of the window is more than 800, the panel opens; if it is less than 800, it closes. In addition, the feature window.onresize
is required to provide the same functionality if the user switches the device from portrait mode to landscape mode.
Hope this helped. But I'm still looking for a better solution;)
source to share
I found a css only solution 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 may differ from yours, depending on the sample you are using; in this case it is "C". However, just take a content wrapping class that wraps the entire header, content, bottom area.
In my example, I used a panel with data-display="reveal" data-position="left"
If you want it to appear on the right, just change margin-left:17em
tomargin-right:17em
If you want the panel to behave like an "overlay" just forget about the second class I wrote ... Best wishes
source to share
Below is my "CSS" solution. What you need to know: mnuMenu
is the panel ID that I want to always see on the left side of the screen, and lnkMenu
is the tag ID for the button that usually shows the panel at a smaller screen width.
@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;
}
}
source to share