carolineartz
3/8/2014 - 1:41 AM

click & drag resize div

click & drag resize div

click-drag-resize.html
content_copyfile_download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>temptitle</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
<!--
var curHeight=0
var curPos=0
var newPos=0
//global var to track mouse button status
var mouseStatus='up'

//set the initial position of the resize-bar
function setPos(e){
curevent=(typeof event=='undefined'?e:event)
mouseStatus='down'
curPos=curevent.clientY
tempHeight=document.getElementById('mydiv').style.height
heightArray=tempHeight.split('p')
curHeight=parseInt(heightArray[0])
}

//reset the position of the resize-bar when the mouse moves while button down
function getPos(e){
if(mouseStatus=='down'){
	curevent=(typeof event=='undefined'?e:event)
	newPos=curevent.clientY
	var pxMove=parseInt(newPos-curPos)
	var newHeight=parseInt(curHeight+pxMove)
	newHeight=(newHeight<5?5:newHeight)
	document.getElementById('mydiv').style.height=newHeight+'px'

	}
}

//-->
</script>

<style type="text/css">
#main	{margin-top:10px;}
h1,select,textarea,button { margin-left: 10px;}

body {height:100%;}

#mydiv	{
	font-family: arial,helvetica,sans-serif;
	position:relative;
	margin: 0 0 0 10px;
	top:0px;
	left:0px;
	width:350px;
	border: 1px solid #808080;
	overflow: auto;
} 
 
#statusbar	{
	cursor: s-resize;
	position:relative;
	display:block;
	background: #c0c0c0 url(images/vscroll1.gif) no-repeat top center;
	font-size: 0px;
	margin:0 0 0 10px;
	height:25px;
	border: 1px solid #808080;
	padding:0;
	width: 350px;
} 
</style>

</head>
<!--note that onmouseup, global var mouseStatus is set to 'up' //-->
<body  onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<h1>Drag Resize Div</h1>
<p>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.</p>
<div id="mydiv" style="height: 250px;">
<p>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. </p>
<p>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.</p>
</div>
<div onmousedown="setPos(event)" id="statusbar" ></div>
</body>
</html>