Click & Drag Resizable Div

This example shows a div that is resizeable via click and drag. Clicking on the resize-bar sets the initial resize-bar position. Moving the mouse over the body (including child elements) resets the position of the resize-bar, which changes the height of the div.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas aliquam massa sed dui. Aliquam ornare metus a purus. Nullam pellentesque, tellus at viverra pellentesque, lorem dolor placerat lectus, vitae suscipit augue lorem eu est. Phasellus laoreet. Mauris tempus. Sed malesuada suscipit lacus. Fusce enim magna, pharetra sed, tincidunt at, gravida auctor, neque. Curabitur quis felis eu libero commodo sollicitudin.

Proin sodales condimentum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ante nunc, tempus vitae, convallis blandit, dignissim eu, libero. Nulla facilisi. Donec vestibulum tortor eget metus. Curabitur facilisis, massa in auctor mattis, turpis augue posuere ipsum, quis mattis elit turpis non dolor. In augue purus, semper eget, congue et, tincidunt nec, est. Suspendisse auctor quam sit amet pede. Phasellus vel mi. Donec sed pede. Donec feugiat arcu ut massa.



You can copy the page html from the textarea below and save it to your local system.