Results 1 to 2 of 2

Thread: resize element

  1. #1
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default resize element

    response to email request

    I found a script that uses drag-drop javascript on this URL: http://www.dynamicdrive.com/forums/s...reloading-page



    It works great but I also wanted to use “resize” AND drag-drop on the same DIV elements and be persistent like the drag-drop is on the above URL. I downloaded your resize script also but it does not maintain the size on browser refresh (which is what I want. Any chance of a drag-drop and resize DIV script that is persistent or maybe you know of a script already. I am a novice at JS so if you respond keep in mind I am REALLY new to JS. You really have to “dumb it down” for me.



    Thanks in advance.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    	#root {
    		position:absolute;
    		height:300px;
    		width:300px;
    		background-color:#F4F4F4;
    		border:1px solid #333;
    		}
    
    	#handle {
    		margin:12px;
    		padding:2px;
    		width: 90%;
    		color:white;
    		background-color: navy;
    		font-weight: bold;
    		}
    </style>
    
    </head>
    
    <body>
    
    <div id="root" style="left:50px; top:100px;">
    	<div id="handle">Handle</div>
    	Some text
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Element Resize (23-June-2016)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    var zxcReSize={
    
     Init:function(o){
      var p=document.getElementById(o.ID),e=o.Edge,days=o.Persistence,c=this.cookie('zxc'+o.ID);
      if (p){
       o.obj=p;
       o.e=typeof(e)=='number'&&e>0?e:5;
       o.days=typeof(days)=='number'&&days>0?days:typeof(days)=='string'&&day.charAt(0).toUpperCase=='S'?'S':-1;
       o.rsz=0;
       this.addevt(document,'mousedown','down',o,p);
       this.addevt(document,'mouseup','up',o,p);
       this.addevt(document,'mousemove','move',o,p);
       if (c){
        c=c.split(':');
        p.style.left=c[0]+'px';
        p.style.top=c[1]+'px';
        p.style.width=c[2]+'px';
        p.style.height=c[3]+'px';
       }
      }
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     down:function(o,p1,e){
      var w=this.css(p1,'width'),h=this.css(p1,'height'),m=this.mse(e),p=this.pos(p1);
      o.rsz=m[0]>=p[0]&&m[0]<=p[0]+o.e?1:m[0]>=p[0]+w-o.e&&m[0]<=p[0]+w?2:m[1]>=p[1]&&m[1]<=p[1]+o.e?3:m[1]<=p[1]+h&&m[1]>=p[1]+h-o.e?4:0;
      p1.style.cursor=o.rsz==0?'default':'move';
      o.m=m;
     },
    
     up:function(o,p,e){
      o.rsz=0;
      p.style.cursor='default';
      var v=this.css(p,'left')+':'+this.css(p,'top')+':'+this.css(p,'width')+':'+this.css(p,'height');
      o.days!=-1?document.cookie='zxc'+p.id+'='+v+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
     },
    
     move:function(o,p1,e){
      var w=this.css(p1,'width'),h=this.css(p1,'height'),m=this.mse(e),p=this.pos(p1),rsz=m[0]>=p[0]&&m[0]<=p[0]+o.e?1:m[0]>=p[0]+w-o.e&&m[0]<=p[0]+w?2:m[1]>=p[1]&&m[1]<=p[1]+o.e?3:m[1]<=p[1]+h&&m[1]>=p[1]+h-o.e?4:0;
      p1.style.cursor=rsz==0?'default':'move';
      if (o.rsz!=0){
       if (o.rsz<3){
        p1.style.width=Math.max(this.css(p1,'width')+(o.rsz==1?o.m[0]-m[0]:-o.m[0]+m[0]),5)+'px';
        o.rsz==1?p1.style.left=this.css(p1,'left')-o.m[0]+m[0]+'px':null;
       }
       else {
        p1.style.height=Math.max(this.css(p1,'height')+(o.rsz==3?o.m[1]-m[1]:-o.m[1]+m[1]),5)+'px';
        o.rsz==3?p1.style.top=this.css(p1,'top')-o.m[1]+m[1]+'px':null;
       }
       o.m=m;
       return this.ertn(e);
      }
     },
    
     ertn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
     }
    
    
    }
    
    
    zxcReSize.Init({
     ID:'root',    // the unique ID name of the element to resize. (string)
     Edge:5,       //(optional) the size of the edge to mouse down resize. (number, default = 5)
     Persistence:1 //(optional) to restore the previous position and size. (number=days or 'session, default = no persistence)
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    this can be used in conjunction with the email script
    Last edited by vwphillips; 06-23-2016 at 01:03 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/

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I have added drag to the script

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    	#root {
    		position:absolute;
    		height:300px;
    		width:300px;
    		background-color:#F4F4F4;
    		border:1px solid #333;
    		}
    
    	#handle {
    		margin:12px;
    		padding:2px;
    		width: 90%;
    		color:white;
    		background-color: navy;
    		font-weight: bold;
            cursor:move;
    		}
    </style>
    
    </head>
    
    <body>
    <input type="button" name="" value="Reset" onclick="zxcReSizeDrag.Reset('root');" />
    <div id="root" style="left:50px; top:100px;">
    	<div id="handle">Handle</div>
    	Some text
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Element Resize Drag (23-June-2016)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    var zxcReSizeDrag={
    
     Init:function(o){
      var p=document.getElementById(o.ID),e=o.Edge,days=o.Persistence,c=this.cookie('zxc'+o.ID),h=document.getElementById(o.HandleID);
      if (p){
       o.p=p;
       o.e=typeof(e)=='number'&&e>0?e:5;
       o.days=typeof(days)=='number'&&days>0?days:typeof(days)=='string'&&day.charAt(0).toUpperCase=='S'?'S':-1;
       o.rsz=0;
       o.s=this.css(p,'left')+':'+this.css(p,'top')+':'+this.css(p,'width')+':'+this.css(p,'height');
       this.addevt(document,'mousedown','down',o,p);
       this.addevt(document,'mouseup','up',o,p);
       this.addevt(document,'mousemove','move',o,p);
       h?this.addevt(h,'mousedown','ddown',o,p):null;
       if (c){
        c=c.split(':');
        p.style.left=c[0]+'px';
        p.style.top=c[1]+'px';
        p.style.width=c[2]+'px';
        p.style.height=c[3]+'px';
       }
       this['zxc'+o.ID]=o;
      }
     },
    
     Reset:function(id){
      var o=this['zxc'+id],s;
      if (o){
       s=o.s.split(':');
       o.p.style.left=s[0]+'px';
       o.p.style.top=s[1]+'px';
       o.p.style.width=s[2]+'px';
       o.p.style.height=s[3]+'px';
      }
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     down:function(o,p1,e){
      var w=this.css(p1,'width'),h=this.css(p1,'height'),m=this.mse(e),p=this.pos(p1);
      o.rsz!=5?o.rsz=m[0]>=p[0]&&m[0]<=p[0]+o.e?1:m[0]>=p[0]+w-o.e&&m[0]<=p[0]+w?2:m[1]>=p[1]&&m[1]<=p[1]+o.e?3:m[1]<=p[1]+h&&m[1]>=p[1]+h-o.e?4:0:null;
      p1.style.cursor=o.rsz==0?'default':'move';
      o.m=m;
     },
    
     ddown:function(o,p1,e){
      o.rsz=5;
     },
    
     up:function(o,p,e){
      o.rsz=0;
      p.style.cursor='default';
      var v=this.css(p,'left')+':'+this.css(p,'top')+':'+this.css(p,'width')+':'+this.css(p,'height');
      o.days!=-1?document.cookie='zxc'+p.id+'='+v+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
     },
    
     move:function(o,p1,e){
      var w=this.css(p1,'width'),h=this.css(p1,'height'),m=this.mse(e),p=this.pos(p1),rsz=m[0]>=p[0]&&m[0]<=p[0]+o.e?1:m[0]>=p[0]+w-o.e&&m[0]<=p[0]+w?2:m[1]>=p[1]&&m[1]<=p[1]+o.e?3:m[1]<=p[1]+h&&m[1]>=p[1]+h-o.e?4:0;
      p1.style.cursor=rsz==0?'default':'move';
      if (o.rsz!=0){
       if (o.rsz==5){
        p1.style.left=this.css(p1,'left')-o.m[0]+m[0]+'px';
        p1.style.top=this.css(p1,'top')-o.m[1]+m[1]+'px';
       }
       else if (o.rsz<3){
        p1.style.width=Math.max(this.css(p1,'width')+(o.rsz==1?o.m[0]-m[0]:-o.m[0]+m[0]),5)+'px';
        o.rsz==1?p1.style.left=this.css(p1,'left')-o.m[0]+m[0]+'px':null;
       }
       else {
        p1.style.height=Math.max(this.css(p1,'height')+(o.rsz==3?o.m[1]-m[1]:-o.m[1]+m[1]),5)+'px';
        o.rsz==3?p1.style.top=this.css(p1,'top')-o.m[1]+m[1]+'px':null;
       }
       o.m=m;
       return this.ertn(e);
      }
     },
    
     ertn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
     }
    
    
    }
    
    
    zxcReSizeDrag.Init({
     ID:'root',     // the unique ID name of the element to resize. (string)
     Edge:5,        //(optional) the size of the edge to mouse down resize. (number, default = 5)
     Persistence:1, //(optional) to restore the previous position and size. (number=days or 'session, default = no persistence)
     HandleID:'handle'
    });
    
    /*]]>*/
    </script>
    </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/

Similar Threads

  1. Container & Image resize on browser resize
    By mickkmg in forum JavaScript
    Replies: 0
    Last Post: 06-11-2012, 11:59 AM
  2. Replies: 3
    Last Post: 02-21-2012, 12:03 PM
  3. Replies: 6
    Last Post: 11-06-2009, 10:32 PM
  4. page resize on browser window resize
    By cpeeyush in forum JavaScript
    Replies: 1
    Last Post: 01-25-2009, 10:05 PM
  5. Replies: 2
    Last Post: 06-09-2007, 11:22 PM

Bookmarks

Posting Permissions

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