Movable - Resizable

These windows are created by javascript using the jQuery library.
Move them around by dragging the title bar.
Resize by dragging the East, SE, or South edge.
Double Click anywhere in a window to bring it to the top.
Click the X in the upper-right-corner to hide it.
Click a Button, Link, or Image below to show or hide its window.

Block level tags become Movable - Resizable when they have class="movable_resizable".

A grab cursor appears over the Title Bar and window's edges during mouseover.

Drag the Title Bar to move the window around the view port.

Grab the East, SE, or South window edge to resize.

Scroll bar(s) automatically appear when needed. Scroll positions are preserved while a window is hidden.

Use CSS to set the initial location and size of the window (left, top, width, height).

Use CSS to set the minimum and maximum width and height.

Stacking order or z-index can be set with CSS. This window starts with the highest z-index of all thse on this page.

Double Click anywhere in a window to bring it to the top (z-index higher than all others).

Place the window Title Bar text in the "title" attribute of the HTML tag.

Clicking on Buttons, Links, and Images in the document with the same "name" attribute as the window's tag toggles it between show and hide.

Click X in the upper-right corner to hide a window.

The <HTML>

<script type="text/javascript" src="../admin/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../admin/movable-resizable.js"></script>
<div id="foo" name="num_1" class="movable_resizable" title="#1 - This window has a red border">The window's text goes here.</div>
<input name="num_1" type="button" value="Window #1" />

The CSS

#foo{
	min-width:300px; // min/max - width/height are optional, absolute min = 75px */
	min-height:150px;
	max-width:1000px;
	max-height:500px;
	position:absolute; /* must be absolute of fixed */
	width:400px;
	height:300px;
	top:380px;
	left:50px;
	background-color:#ece9d8; /* white if not specified */
	color:black;
	padding-left:15px;
	padding-right:15px;
	border:10px red solid;
	z-index:5;
	overflow:auto;
	margin:20px; /* automatically set to zero */
	/* display:none; initially hides window */
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum odio sit amet dui commodo non pretium lorem pellentesque. In adipiscing urna a ante suscipit sed faucibus lorem luctus. Donec pulvinar sollicitudin ante commodo adipiscing. Nunc varius nulla eget nisl vestibulum pulvinar. Nullam rutrum turpis et diam laoreet elementum. Nullam massa mi, porttitor tempus elementum ut, iaculis congue quam. Proin a odio bibendum diam accumsan sodales non nec mauris. Praesent vitae magna eros, id suscipit mauris. Quisque ornare consectetur lobortis. Integer quis nunc libero, lobortis imperdiet risus. Vivamus eget justo at nisl iaculis fermentum quis vel arcu. In hac habitasse platea dictumst. Sed porta tincidunt sapien id iaculis.

Integer posuere eros ut sapien semper viverra. Curabitur laoreet placerat ante, sed semper ipsum laoreet in. Suspendisse massa nunc, euismod id convallis non, rutrum ut dui. Praesent venenatis orci vel quam faucibus aliquet. Pellentesque in mi nisl, pulvinar imperdiet lectus. Sed faucibus orci nec ante iaculis ut dictum purus laoreet. Aliquam laoreet erat ac elit porta auctor. Duis eget ante lectus. Nullam massa metus, ornare quis volutpat sed, aliquam ac velit. Ut eros justo, pulvinar ut consectetur sit amet, laoreet eget nibh. Phasellus interdum varius neque.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi non nunc nunc. Suspendisse potenti. Quisque viverra cursus volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at suscipit elit. Morbi congue, neque vel vulputate interdum, nulla diam euismod sem, iaculis feugiat nibh magna sed urna. Fusce nec mauris metus, ut pretium velit. Curabitur sed diam tortor. Nullam enim leo, consectetur sed mollis vitae, rutrum cursus felis. In sed dignissim tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vehicula neque non tellus mollis gravida eget nec lorem. Pellentesque vitae velit leo, eget luctus quam. Curabitur luctus tellus vitae sapien commodo tempor. Aenean elementum vehicula orci vitae consequat. Proin suscipit tempus nunc et porta. Integer quis elit id mauris placerat interdum at id est.

Fusce vehicula pretium elit vitae interdum. Praesent mattis, lectus vel tincidunt facilisis, justo quam fringilla nibh, at elementum ligula risus id risus. Ut consequat commodo consectetur. Quisque id ipsum est, at molestie massa. Donec ut nunc quis lacus posuere pharetra. Maecenas sagittis elementum tortor, et tempor augue tempus a. Morbi sapien arcu, sodales non vestibulum non, bibendum fermentum nisi. Fusce volutpat enim in mauris bibendum sit amet blandit ipsum tempor. Aliquam dapibus fringilla nulla, sed blandit justo condimentum sit amet. Sed vel mauris vel metus vehicula iaculis eu quis orci. Vestibulum ipsum arcu, cursus in porttitor eu, sagittis non turpis. Sed ac quam dui, vel mollis risus. Donec blandit sodales aliquam. Suspendisse fermentum, esteu euismod lobortis, turpis libero pharetra massa, id sodales ligula elit id orci. Mauris eget est dui, vitae ultrices risus. Quisque vitae velit eget velit vehicula placerat.

This icon toggles me.

I have CSS position:fixed. My location remains stationary when you scroll the main browser window.

Keep me on TOP by double clicking anywhere in my window.

This is made from a <p> rather than a <div> tag.

Almost any block level HTML tag can be made Movable-Resizable by giving it class="movable_resizable".

Movable - Resizable Web Page Windows