Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation How to Resize a DIV using the mouse

    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
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    web base text editors are different
    North and east need looking at but this quick mod of one of my apps may help,
    Code:
    <!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

    Code:
    <!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,parseInt(zxcdp.style.left)||zxcp.offsetLeft,parseInt(zxcdp.style.top)||zxcp.offsetHeight,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>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>
    Last edited by vwphillips; 02-05-2007 at 12:57 PM.
    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
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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.
    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/


  •  

    Posting Permissions

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