www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with Resizing the Div element

  1. #1
    Join Date
    May 2010
    Posts
    2

    Help with Resizing the Div element

    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================================
    Last edited by Kor; 05-13-2010 at 02:39 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    Code:
    <!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)+'px';
    
    			}
    			if(cursor.indexOf('s')!=-1)
    			{
    				element.style.height = Math.max(y - topLeftY,8)+'px';
    			}
    			if(cursor.indexOf('w')!=-1)
    			{
    				element.style.width = Math.max(width + (topLeftX - x),8)+'px';
    				element.style.left = x;
    			}
    			if(cursor.indexOf('n')!=-1)
    			{
    				element.style.height = Math.max(height + (topLeftY - y),8)+'px';
    				element.style.top = y;
    			}
    		}
          else {
    		document.getElementById(elementID).style.cursor = cursorType;
           changeCursor(elementID,e);
          }
    	}
    
    	//this is an onmouseup event
    	function deActivateResize(elementID,event){
    			isDragActivated = false;
    			isCursorOnBorder = false;
    			cursorType = "default";
        		document.getElementById(elementID).style.cursor = cursorType;
    
    	}
    
    	//this is an onmousemove event
    	function changeCursor(elementID,e){
    
     			cursorType = "default";
    
    		//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";
    			}
    		}
    		document.getElementById(elementID).style.cursor = cursorType;
    		//end of code for changing the cursor
    
    //		resizeDiv(elementID,e);
    	}
    </script>
    </HEAD>
    
    <BODY onmousemove="resizeDiv('id1',event);" onmouseup="deActivateResize('id1',event);">
    	<div id = 'id1' class="one" onmousedown="activateResize('id1',event);"></div>
    </BODY>
    </HTML>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2010
    Posts
    2

    Thanks for the correction

    Hi,

    Thanks for correcting the code. Could you please resolve the following doubts.

    1) I didn't understand why did you make resizeDiv() as onmousemove event handler instead of changeCursor().

    2) The code is not working in mozilla. I'm using Mozilla-3.5.9 -- Is there any browser depended code in it?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    1 the cursor and isDragActivated only need to be set when isDragActivated is false, isDragActivated is now set to false on mouseup rather than on mouse move.

    note: changeCursor is called from resizeDiv while isDragActivated is false

    2 I tested in FF 3.6.3 and it works for me
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles