...

View Full Version : How to Resize a DIV using the mouse



neomaximus2k
02-05-2007, 11:41 AM
Hey guys,
I have been looking at the free webbased text editors around and noticed that they allow you to resize a DIV tag with the mouse, does anyone have any ideas how they achieved this because all my attempts just fail :(

vwphillips
02-05-2007, 12:51 PM
web base text editors are different
North and east need looking at but this quick mod of one of my apps may help,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Edit ReSize (30-December-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk


function zxcEditReSize(zxcdp,zxcfw,zxcfh){
zxcReSize=false;
var zxcary=[['w-resize',0,0,5,zxcfh],['e-resize',(zxcfw-5),0,5,zxcfh],['n-resize',0,0,(zxcfw),5],['s-resize',0,(zxcfh-5),(zxcfw),5]];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcdimg=zxcS('IMG',{position:'absolute',zIndex:'20',left:zxcary[zxc0][1]+'px',top:zxcary[zxc0][2]+'px',width:zxcary[zxc0][3]+'px',height:zxcary[zxc0][4]+'px',cursor:zxcary[zxc0][0]});
zxcdimg.src='http://www.vicsjavascripts.org.uk/StdImages/'+'Blank.gif';
zxcdimg.title='MouseDown to ReSize the Edit Panel';
zxcdp.appendChild(zxcdimg);
zxcAddEvt(zxcdimg,'zxcResizeDown','mousedown');
}
}

function zxcResizeDown(zxcevt){
var zxcdp=this.parentNode;
zxcRSize=[zxcdp,zxcMse(zxcevt)[0],zxcMse(zxcevt)[1],parseInt(zxcdp.style.width),parseInt(zxcdp.style.height),parseInt(zxcdp.style.left),parseInt(zxcdp. style.top),this.style.cursor];
}

function zxcDPReSize(zxcdp,zxcmse){
var zxcnw=(zxcRSize[3]+zxcmse[0]-zxcRSize[1]);
var zxcnh=(zxcRSize[4]+zxcmse[1]-zxcRSize[2])
if (zxcRSize[7]=='e-resize'&&zxcnw>50){ zxcS(zxcdp,{width:(zxcnw)+'px'}); }
if (zxcRSize[7]=='s-resize'&&zxcnh>50){ zxcS(zxcdp,{height:(zxcnh)+'px'}); }
var zxcnw=(zxcRSize[3]-zxcmse[0]+zxcRSize[1]);
var zxcnh=(zxcRSize[4]-zxcmse[1]+zxcRSize[2]);
if (zxcRSize[7]=='n-resize'&zxcnh>50){ zxcS(zxcdp,{top:(zxcMse()[1]-2)+'px',height:(zxcnh)+'px'}); }
if (zxcRSize[7]=='w-resize'&&zxcnw>50){ zxcS(zxcdp,{left:(zxcMse()[0]-2)+'px',width:(zxcnw)+'px'}); }
}

function zxcS(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

var zxcRSize;

function zxcPDrag(zxcevt){
if (zxcRSize){ zxcDPReSize(zxcRSize[0],zxcMse(zxcevt)); return; }
}

function zxcPMseUp(){
document.onselectstart=null;
if (zxcRSize){
var zxcimgs=zxcRSize[0].getElementsByTagName('IMG');
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
if (zxcimgs[zxc0].style.cursor){
if (zxcimgs[zxc0].style.cursor=='e-resize'){ zxcS(zxcimgs[zxc0],{left:(parseInt(zxcRSize[0].style.width)-5)+'px',height:zxcRSize[0].style.height}); }
if (zxcimgs[zxc0].style.cursor=='w-resize'){ zxcS(zxcimgs[zxc0],{left:'0px',height:zxcRSize[0].style.height}); }
if (zxcimgs[zxc0].style.cursor=='n-resize'){ zxcS(zxcimgs[zxc0],{top:'0px',width:zxcRSize[0].style.width}); }
if (zxcimgs[zxc0].style.cursor=='s-resize'){ zxcS(zxcimgs[zxc0],{top:(parseInt(zxcRSize[0].style.height)-5)+'px',width:zxcRSize[0].style.width}); }
}
}
}
zxcRSize=null;
}


function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ return [event.clientX,event.clientY]; }
else {return [event.pageX,event.pageY-window.pageYOffset]; }
}

var zxcEvt=0;

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco['on' + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxco,zxcfun,zxcevt){
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}
zxcAddEvt(document,'zxcPDrag','mousemove');
zxcAddEvt(document,'zxcPMseUp','mouseup');


//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--

function InitReSize(){
var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV')
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0].className){
if (zxcdivs[zxc0].className.match('zxcResize')){
zxcEditReSize(zxcdivs[zxc0],zxcdivs[zxc0].offsetWidth,zxcdivs[zxc0].offsetHeight);
}
}
}
}

//-->
</script>

</head>

<body onload="InitReSize();" >
<div class="RealRule zxcResize" style="position:relative;left:200px;top:200px;width:200px;height:100px;background-Color:red;" ></div>
</body>

</html>

may be better but you will have to play


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Edit ReSize (30-December-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk


function zxcEditReSize(zxcdp,zxcfw,zxcfh){
zxcReSize=false;
var zxcary=[['w-resize',0,0,5,zxcfh],['e-resize',(zxcfw-5),0,5,zxcfh],['n-resize',0,0,(zxcfw),5],['s-resize',0,(zxcfh-5),(zxcfw),5]];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
var zxcdimg=zxcS('IMG',{position:'absolute',zIndex:'20',left:zxcary[zxc0][1]+'px',top:zxcary[zxc0][2]+'px',width:zxcary[zxc0][3]+'px',height:zxcary[zxc0][4]+'px',cursor:zxcary[zxc0][0]});
zxcdimg.src='http://www.vicsjavascripts.org.uk/StdImages/'+'Blank.gif';
zxcdimg.title='MouseDown to ReSize the Edit Panel';
zxcdp.appendChild(zxcdimg);
zxcAddEvt(zxcdimg,'zxcResizeDown','mousedown');
}
}

function zxcResizeDown(zxcevt){
var zxcdp=this.parentNode;
var zxcmse=zxcMse(zxcevt);
zxcRSize=[zxcdp,zxcmse[0],zxcmse[1],parseInt(zxcdp.style.width)||zxcp.offsetWidth,parseInt(zxcdp.style.height)||zxcp.offsetHeight,parse Int(zxcdp.style.left)||zxcp.offsetLeft,parseInt(zxcdp.style.top)||zxcp.offsetHeight,this.style.curso r];
}

function zxcDPReSize(zxcdp,zxcmse){
var zxcnw=(zxcRSize[3]+zxcmse[0]-zxcRSize[1]);
var zxcnh=(zxcRSize[4]+zxcmse[1]-zxcRSize[2])
if (zxcRSize[7]=='e-resize'&&zxcnw>15){ zxcS(zxcdp,{width:(zxcnw)+'px'}); }
if (zxcRSize[7]=='s-resize'&&zxcnh>15){ zxcS(zxcdp,{height:(zxcnh)+'px'}); }
var zxcnw=Math.abs(zxcRSize[3]-zxcmse[0]+zxcRSize[1]);
var zxcnh=Math.abs(zxcRSize[4]-zxcmse[1]+zxcRSize[2]);
if (zxcRSize[7]=='n-resize'&zxcnh>15){ zxcS(zxcdp,{top:(zxcmse[1]-12)+'px',height:(zxcnh)+'px'}); }
if (zxcRSize[7]=='w-resize'&&zxcnw>15){ zxcS(zxcdp,{left:(zxcmse[0]-10)+'px',width:(zxcnw)+'px'}); }
}

function zxcS(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

var zxcRSize;

function zxcPDrag(zxcevt){
if (zxcRSize){ zxcDPReSize(zxcRSize[0],zxcMse(zxcevt)); return; }
}

function zxcPMseUp(){
document.onselectstart=null;
if (zxcRSize){
var zxcp=zxcRSize[0];
zxcRSize=null;
var zxcimgs=zxcp.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
if (zxcimgs[zxc0].style.cursor){
if (zxcimgs[zxc0].style.cursor=='e-resize'){ zxcS(zxcimgs[zxc0],{left:(parseInt(zxcp.style.width)-5)+'px',height:zxcp.style.height}); }
if (zxcimgs[zxc0].style.cursor=='w-resize'){ zxcS(zxcimgs[zxc0],{left:'0px',height:zxcp.style.height}); }
if (zxcimgs[zxc0].style.cursor=='n-resize'){ zxcS(zxcimgs[zxc0],{top:'0px',width:zxcp.style.width}); }
if (zxcimgs[zxc0].style.cursor=='s-resize'){ zxcS(zxcimgs[zxc0],{top:(parseInt(zxcp.style.height)-5)+'px',width:zxcp.style.width}); }
}
}
}
zxcRSize=null;
}


function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ return [event.clientX,event.clientY]; }
else {return [event.pageX,event.pageY-window.pageYOffset]; }
}

var zxcEvt=0;

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco['on' + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxco,zxcfun,zxcevt){
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

zxcAddEvt(document,'zxcPDrag','mousemove');
zxcAddEvt(document,'zxcPMseUp','mouseup');


//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--

function InitReSize(){
var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV')
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0].className){
if (zxcdivs[zxc0].className.match('zxcResize')){
zxcEditReSize(zxcdivs[zxc0],zxcdivs[zxc0].offsetWidth,zxcdivs[zxc0].offsetHeight);
}
}
}
}

//-->
</script>

</head>

<body onload="InitReSize();" >
<div class="RealRule zxcResize" style="position:relative;left:200px;top:200px;width:200px;height:100px;background-Color:red;" ></div>



</body>

</html>

neomaximus2k
02-05-2007, 03:33 PM
Thanks Vic, luckily for me I created a formula and set the overflow to visible meaning that the DIV tag is always the correct width :) thanks for the script tho I have saved it for use in a future release

vwphillips
02-05-2007, 06:10 PM
you will probable have to use overflow:hidden if there is inner content.
Suggest nesting the content in another DIV with fixed width and height.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum