1

I am making a jqm project mobile only.

I have two panels one set to push the other is overlay. One is in the left corner and the other is top right corner.

My question is it possible to set the right panel to 100% width (which I've done) and set the height to 10-20% (40px-50px).

Can this be done without breaking any functionality? Can it be done in Css? I'm able to set width but unable to set height.

Thanks in advance!!

JASON FOREST
  • 17
  • 7

3 Answers3

0

Customizing a right or left panel you will need to change 3 CSS classes set by JQM. The animation, the panel, and the inner part of the panel which is were the content is in. An easier way is to create custom overlay box.

Demo https://jsfiddle.net/bz649m86/

Html

<div class="box"><a class="close">Close</a></div>

CSS

.box {
    position:fixed; // a fixed position is used for the box
    top:0; // placed at the top of the screen
    right:-100%; // with a minus position setting on the right side of the screen so its hidden from view
    background-color: blue;
    width: 100%; //with a width of the whole screen, but it can be any width
    display: block; //displayed in block format
    z-index: 999999; // above the header when in view
    overflow: hidden; // if you don't require scrolling within the box
    height:40px; // the height size required
//the transition settings are not needed but makes the animation of the panel much smoother.
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

Jquery 

// animate on click to bring the box in to view
    $(document).on("click", ".pannel", function () {
        $('.box').animate({
            'right': "0%"
        }, 300);
    })
// and out of view when closed    
    $(document).on("click", ".close", function () {
        $('.box').animate({
            'right': "-100%"
        }, 300);
    })

As a side note, with this method you can have a custom panel (overlayed) displayed anywhere on the screen.

In this demo the box comes from top of the screen

https://jsfiddle.net/Lqxp2ewb/

Tasos
  • 5,321
  • 1
  • 15
  • 26
  • This worked great. Just what I was looking for. It was however a little shaky on mobile devices (more the button open and close). Animation was fine. I added return false; to the code which solved the problem. Not sure if this is 100% "the norm" as opposed to preventDefault and stopPropagation. – JASON FOREST Apr 16 '15 at 23:25
  • @JASON FOREST (return false; ) is ok. Can you Accept the answer please. – Tasos Apr 16 '15 at 23:28
0

As mentioned:

$(document).on("click", ".pannel", function () {
    $('.box').animate({
        'top': "0%"
    }, 200);
 return false;
})

$(document).on("click", ".close", function () {
    $('.box').animate({
        'top': "-100%"
    }, 200);
    return false;
})

Not sure is if return false is better than preventDefault and stopPropagation. Tried both, either way, very smooth on mobile devices.

JASON FOREST
  • 17
  • 7
0

The .ui-panel CSS from jQueryMobile.css defines a min-height attribute of min-height: 100% So you have to override the min-height attribute.

Since your height value is lower than the min-height value of 100% it has no effect.

In my case i want to set the panel under a fixed header bar, so i use:

top: 38.4px;
min-height: calc(100% - 38.4px);
Ruwen
  • 3,008
  • 1
  • 19
  • 16