JASON FOREST JASON FOREST - 5 months ago 26
jQuery Question

Jquery mobile 1.4.5 set panel height possible?

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!!

Answer

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/