Resizable scrollable div
Need help fixing the resizable control at the bottom of the div
by rdenver6
HTML
<div id="title">
Page Title
</div>
<div id="hub-zone">
This is where the content lives.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit lacinia ante sit amet varius. Curabitur eu tincidunt nisi. Aliquam eu volutpat quam. Curabitur sit amet leo vel dui ultricies pharetra sit amet id
mi. Phasellus condimentum ipsum ultricies, volutpat ipsum in, consectetur arcu. Etiam sed nisi malesuada, rhoncus nisl ut, sodales dolor. Nam nisi ex, vehicula ut elit iaculis, mollis maximus dolor. Praesent euismod purus nisi, vel posuere lacus lobortis
eu. Suspendisse tristique varius finibus. Pellentesque eros ex, semper id efficitur quis, gravida varius nisl. Nullam et nulla quis enim pharetra lacinia. Donec eu elit convallis, pharetra sem et, scelerisque eros. Vestibulum id tempus sapien, vel placerat
urna. Aliquam viverra elit eu porta blandit. Suspendisse porta suscipit nulla, quis dapibus erat viverra eget. In efficitur varius porta. In eu sagittis massa. Suspendisse potenti. Donec maximus mi id magna fringilla sollicitudin. Etiam quis porta sem,
nec blandit diam. Proin ullamcorper luctus lorem vitae faucibus. Ut a suscipit nunc. Vivamus tellus tellus, tempus in ante et, pulvinar vulputate nunc. In quis arcu non lorem rhoncus varius ut ac orci. Sed fermentum purus sed justo congue, eu commodo
leo fringilla. Maecenas accumsan turpis eget vestibulum sodales. Mauris ultrices rutrum posuere. Cras interdum mi ut ultricies aliquam. Nunc sit amet est hendrerit, condimentum dui non, auctor sapien. Phasellus efficitur tempus elit ut blandit. In id
mauris vitae turpis dignissim ornare quis quis purus. Mauris convallis arcu a nunc tempus, congue pulvinar est ullamcorper. Sed pretium efficitur turpis, eu vulputate libero pellentesque porta. Proin tristique enim est, eget laoreet urna venenatis in.
Proin ultricies nisi semper, ultricies purus at, fringilla nulla. Fusce nec sagittis tortor, non mattis tellus. Proin et eros et diam convallis...
CSS
#title {
font-size: 2em;
margin-bottom: 20px;
}
#hub-zone {
height: 400px;
background-color: yellow;
overflow: scroll;
}
#sgrip {
background: blue;
border: blue solid 1px;
cursor: s-resize;
height: 25px;
bottom: 0;
}
#bottom {
margin-top: 20px;
}
JavaScript
$("#hub-zone").resizable({
handles: "s"
});