CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Seth
Seth

Reputation: 363

How do I use Jquery Mobile Slide Panel to slide up from the bottom?

I am working on an app and i need a panel to slide up from the bottom when something is selected. I see in jquery mobile slide panel that you can set position to either left or right, but how do you set to bottom?

Upvotes: 3

Views: 9200

Answers (3)

John
John

Reputation: 104

To create a bottom overlay panel with jQuery Mobile v1.4.5.

.ui-panel-display-overlay[data-position="bottom"] {
  top: auto;
  bottom: 0px;
  width: 100% !important;
  height: auto !important;
  min-height: auto;
}
.ui-panel-animate.ui-panel-display-overlay[data-position="bottom"] {
  right: 0;
  -webkit-transform: translate3d(0, 100vh, 0);
  -moz-transform: translate3d(0, 100vh, 0);
  transform: translate3d(0, 100vh, 0);
}
.ui-panel-display-overlay[data-position="bottom"].ui-panel-display-reveal,
.ui-panel-display-overlay[data-position="bottom"].ui-panel-open {
  bottom: 0;
}
.ui-panel-animate.ui-panel-open.ui-panel-display-overlay[data-position="bottom"] {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transform: none;
}
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/_assets/js/index.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<body
<div data-role="page" class="jqm-demos jqm-panel-page" data-quicklinks="true">
  <div role="main" class="ui-content jqm-content">
    <a href="#bottompanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Overlay</a>
  </div>
</div>
<!-- bottompanel1 -->
<div data-role="panel" id="bottompanel1" data-position="bottom" data-display="overlay" data-theme="a">
  <h3>Bottom Panel: Overlay</h3>
  <p>This panel is positioned at the bottom with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
  <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
  <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>
</div>
<!-- /bottompanel1 -->
</body>

Upvotes: 1

Tasos
Tasos

Reputation: 5361

Create a custom panel as a box, and place it 100% bellow the place with an inner box to enable scrolling. Alternative use the Iscroll plugging for scrolling.

Demo

http://jsfiddle.net/7pttcgvw/

Jquery

$(function() {

    $('#openpanel').click(function(){
            $('#box').animate({'bottom':'0'},300);
        });

    $('#close').click(function(){
        $('#box').animate({'bottom':'-100%'},300)        
    });

});

CSS

.box{
position:fixed;
bottom:-100%;
left:0%;
height:100%; 
background-color: #DBDBDB;
width: 17em;
display: block;
z-index:999999;
}

.box-inner {
    position: absolute;
    width:100%;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Upvotes: 2

Anderson
Anderson

Reputation: 2752

see https://github.com/jquery/jquery-mobile/pull/5770

Unfortunately, arschmitz said:

there are a bunch of conflicts here because of changes we have made to panels. love the feature though and would love to try and make this happen for 1.5 im going to close this PR just because it is now outdated however would like to work with you to land this in hopefully next version

Upvotes: 3

Related Questions