Flexible height Popovers

by meyertee

HTML

<div class="panel">
    <header><h1>Header</h1></header>
    <div class="body">
        <p>Body text</p>
        <ul>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
            <li>- </li>
        </ul>
    </div>
    <footer><h3>Footer</h3></footer>
</div>
<hr id="heightIndicator" class="indicator"/>
<div class="control">
    <label for="heightSlider">Max height</label>
    <div id="heightSlider" class="slider"></div>
    <label><input id="flexCheck" type="checkbox"></input> Flexible Height</label>
    <label><button id="generateContent">Generate content</button></label>
</div>

CSS

/* relevant styles */
.panel {
    position: absolute;
    width: 300px;
    margin: 30px;
    
    display: -moz-flex;
    -moz-flex-direction: column;
    -moz-flex-wrap: nowrap;
    
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-flex-wrap: nowrap;
    
    display: -ms-flex;
    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    background-color: grey;
    padding: 1em;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
}
.body{
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
    background-color: silver;
    padding: 1em;
}
footer{
    background-color: grey;
    padding: 1em;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
}


/* helper styles */
body{
    font: 13px serif;
    margin: 0;
    padding: 0;
}
.control {
    position: absolute;
    left: 360px;
    top: 30px;
}
label{
    display:block;
    margin-bottom: 1em;
}
.slider{
    margin: 1em 2px;
}
.indicator{
    position: absolute;
    width: 360px;
    padding:0;
    margin-top:30px;
}

JavaScript

var maxHeight = 500;
var isFlex =  true;
var contentTmpl = "<li>- </li>";

function setMaxHeight(h){
    if (typeof h === "string"){
        $(".panel").css("max-height", h);
        $("#heightIndicator").css("visibility", "hidden");
    } else {
        $(".panel").css("max-height", h + "px");
        $("#heightIndicator").css("visibility", "visible").css("top", h);
    }
}

$("#heightSlider").slider({
    value: -maxHeight,
    min: -maxHeight,
    max: 0,
    step: 1,
    orientation: "vertical",
    slide: function (event, ui) {
        setMaxHeight(-ui.value);
    }
});

$("#flexCheck").change(function(){
    if ($(this).prop("checked")){
        $("#heightSlider").slider( "option", "disabled", true );
        setMaxHeight("none");
    } else {
        setMaxHeight(-$("#heightSlider").slider("value"));
        $("#heightSlider").slider( "option", "disabled", false );
    }
}).change();

$("#generateContent").click(function(){
    var content = "";
    var repeatCount = Math.floor(Math.random()*30)+2;
    while (repeatCount--){
        content += contentTmpl;
    }
    $(".panel ul").html(content);
}).click();