draggable UI with animate section

draggable UI with animate section

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.7.2/themes/base/ui.resizable.css">
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div id="divTest">
            <div id="divHeight" class="col-md-12 col-sm-12 col-xs-12">
                 <h1 id="info">
</h1>

                <p>This is all the info blurb. This is all the info blurb. This is all the info blurb. This is all the info blurb. This is all the info blurb. This is all the info blurb. This is all the info blurb. This is all the info blurb. This is all the info blurb.</p>
            </div>
        </div>
    </div>
</div>
<!-- end drag box -->
<div class="container">
    <div class="row">
         <h1>Welcome to the Stuff Below</h1>

        <p>More here</p>
    </div>
</div>

CSS

body {
    color:white;
    padding:0px;
    background-color: #6d695c;
    background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)), linear-gradient(120deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1));
    background-size: 70px 120px;
}
#divTest {
    width: 100%;
    height: 0px;
    color:white;
    overflow:hidden;
    padding:0px 0px 10px 0px;
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
}
#divTest:after {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    width: 100%;
    text-decoration: inherit;
    content:"\f02e";
    margin:0px auto 0px auto;
    text-align:center;
    position:absolute;
    bottom:0;
    z-index:2
}
#divHeight: {
    text-align:center;
    height:40px;
    padding:0;
}
.ui-resizable-s {
    bottom: 0;
    height: 10px;
    background: rgba(0, 0, 255, 0.3)
}

JavaScript

$(document).ready(function () {
    $("#divTest").resizable({
        maxHeight: 200,
        maxWidth: 100,
        minHeight: 0,
        minWidth: 100,
        handles: 's',
        resize: function (event, ui) {
            $("#divHeight h1#info").empty().append("height: " + $(this).height());
        }
    });

    $('.ui-resizable-s').dblclick(function () {
        // $("#divTest").height(0);
        $("#divTest").animate({
            height: 10
        }, 900)
    })
});