CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: resize element

  1. 06-23-2016, 12:43 PM #1
    vwphillips
    vwphillips is offline Elite Coders
    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/
    Reply With Quote Reply With Quote
  2. 06-24-2016, 02:47 PM #2
    vwphillips
    vwphillips is offline Elite Coders
    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/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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. Ultimate Fade-in slideshow: Resize current image on window resize - NEED HELP PLEASE
    By easycoder in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-21-2012, 12:03 PM
  3. Looking for code to auto resize images with window resize without reload
    By kms_web in forum Other
    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. Layer element moved when show in another resolution screen or resize browser
    By mascouta in forum JavaScript
    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
  •  

Forum Rules