Add an editable handle to the top of the div with a fixed bottom position
How can I make a div that captures the bottom position of the position, from the handle at the top?
If you look at the StackOverflow question form, it has a dropdown descriptor at the bottom, how can I place such a descriptor at the top div
?
jquery-ui resizable doesn't seem to support this: http://jsfiddle.net/Ka7P2/725/ .
There is no jquery solution yet.
+3
source to share
1 answer
Html:
<div id="container" class="resizable">
<div id="handle" class="ui-resizable-handle ui-resizable-n"></div>
</div>
JQuery
$(document).ready(function () {
$(".resizable").resizable({
handles: {
'n': '#handle'
}
});
});
Css:
body {
height: 1000px;
}
#container {
width: 100%;
background: lightgray;
height: 100px;
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0;
right: 0;
}
#handle {
width: 100%;
height: 5px;
top: -6px;
background-color: #000;
}
+5
source to share