Help with Resizing the Div element

**periaganesh** · 05-13-2010 01:07 AM

Hi,
I wrote code to resize a div element.The main aim is to resize the div element from any direction. But it is not working correctly in Mozilla. Even in IE it is working fine only if the mouse is dragged slowly. If we drag the mouse fast it is loosing the control. Are there any browser issues to be fixed. Please check it. I'm including the file.

Code:

========================HTML File============================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Resizable Div </TITLE>

<style type="text/css">
	div.one{
		position : absolute;
		border:2px dashed #000;
		background-color:white;
		top : 100px;
		left : 100px;
		height : 150px;
		width : 150px;
	}	
</style>


<script>
	var cursorType = "";
	var isCursorOnBorder = false;
	var isDragActivated = false;
	
	//this is onmousedown event
	function activateResize(elementID,e){
		//activate drag only if cursor is on border
		if(isCursorOnBorder){
			isDragActivated = true;	
		}
	}

	//this is an onmousemove event called from changeCursot()
	function resizeDiv(elementID,e){
		//window.status = event1.type;
		//check drag is activated or not
		if(isDragActivated){
			var curevent=e;
			//coordiantes of the event position
			var x = curevent.clientX;
			var y = curevent.clientY;
			var element = document.getElementById(elementID);

			//top left positions of the div element
			var topLeftX = element.offsetLeft;
			var topLeftY = element.offsetTop;

			//width and height of the element
			var width = element.offsetWidth;
			var height = element.offsetHeight;

			//get the cursor sytle [e,w,n,s,ne,nw,se,sw]
			var cursor = cursorType.substring(0,cursorType.indexOf('-'));

			if(cursor.indexOf('e')!=-1)
			{
				element.style.width = Math.max(x - topLeftX,8);
				
			}
			if(cursor.indexOf('s')!=-1)
			{
				element.style.height = Math.max(y - topLeftY,8);				
			}
			if(cursor.indexOf('w')!=-1)
			{
				element.style.width = Math.max(width + (topLeftX - x),8);
				element.style.left = x;				
			}
			if(cursor.indexOf('n')!=-1)
			{
				element.style.height = Math.max(height + (topLeftY - y),8);
				element.style.top = y;				
			}
		}
	}

	//this is an onmouseup event
	function deActivateResize(elementID,event){
		if(isDragActivated){
			isDragActivated = false;								
		}
		
	}

	//this is an onmousemove event
	function changeCursor(elementID,e){
		

		//code start for changing the cursor
		var element = document.getElementById(elementID);
		var topLeftX = element.offsetLeft;
		var topLeftY = element.offsetTop;
		var bottomRightX = topLeftX+element.offsetWidth;
		var bottomRightY = topLeftY+element.offsetHeight;
		var curevent=e;
		var x = curevent.clientX;
		var y = curevent.clientY;
		//window.status = topLeftX +"--"+topLeftY+"--"+bottomRightX+"--"+bottomRightY+"--"+x+"--"+y+"--"+isDragActivated;
		
		//change the cursor style when it is on the border or even at a distance of 8 pixels around the border
		if(x >= topLeftX-8 && x <= topLeftX+8){
			if(y >= topLeftY-8 && y <= topLeftY+8 ){
				isCursorOnBorder = true;
				cursorType = "nw-resize";
			}
			else if(y >= bottomRightY-8 && y <= bottomRightY+8){
				isCursorOnBorder = true;
				cursorType = "sw-resize";
			}
			else if(y > topLeftY-8 && y < bottomRightY+8){
				isCursorOnBorder = true;
				cursorType = "w-resize";
			}
			else{
				isCursorOnBorder = false;
				cursorType = "default";
			}
		}
		else if(x >= bottomRightX-8 && x <= bottomRightX+8){
			if(y >= topLeftY-8 && y <= topLeftY+8){
				isCursorOnBorder = true;
				cursorType = "ne-resize";				
			}
			else if(y >= bottomRightY-8 && y <= bottomRightY+8){
				isCursorOnBorder = true;
				cursorType = "se-resize";				
			}
			else if(y > topLeftY-8 && y < bottomRightY+8){
				isCursorOnBorder = true;
				cursorType = "e-resize";				
			}
			else{
				isCursorOnBorder = false;
				cursorType = "default";
			}
		}
		else if(x > topLeftX-8 && x < bottomRightX+8){
			if(y >= bottomRightY-8 && y <= bottomRightY+8){
				isCursorOnBorder = true;
				cursorType = "s-resize";				
			}
			else if(y >= topLeftY-8 && y <= topLeftY+8){
				isCursorOnBorder = true;
				cursorType = "n-resize";				
			}
			else{
				isCursorOnBorder = false;
				cursorType = "default";
			}
		}
		else{
			isCursorOnBorder = false;
			cursorType = "default";
		}
		document.getElementById(elementID).style.cursor = cursorType;
		//end of code for changing the cursor

		resizeDiv(elementID,e);
	}	
</script>
</HEAD>

<BODY onmousemove="javascript : changeCursor('id1',event);" onmouseup="javascript : deActivateResize('id1',event);">
	<div id = 'id1' class="one" onmousedown="javascript : activateResize('id1',event);"></div>	
</BODY>
</HTML>
============End of HTML file================================

Thread: Help with Resizing the Div element

Thread Tools

Display

Threaded View

Help with Resizing the Div element

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions