Menu
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================================