What's the best way of constantly resizing elements with the mouse?

What's the best way of constantly resizing elements using clicking and holding a resize image in the bottom-right corner of the element? Is there a specific empty element that has resizing built in or a style to use that would be better than using a while loop in JavaScript?

-------------Problems Reply------------

The general approach goes something like this:

  • When onmousedown fires on the resize target, start tracking onmousemove
  • When onmousemove fires, resize the element
  • When onmouseup fires, clear the onmousemove handler

So basically you just respond to events, there are no while loops or anything involved.

It can be somewhat tricky to accomplish so that it works nicely, so I would suggest seeing if there's a JS library you could use. A pretty simple way to get this behavior would be to use jQuery UI's resizable component

Here you go man:

http://jsfiddle.net/d9hsG/

function c(a){console.log(a)}
function coords(el){
var curleft, curtop;
curleft=curtop=0;
do{
curleft+=el.offsetLeft;
curtop+=el.offsetTop;
} while(el=el.offsetParent);
return [curleft,curtop];
}
Resizer = {
attach: function(el,minh,minw){
var rs=el.resizer=el.getElementsByClassName('drag')[0];
rs.resizeParent=el;
if(minh==undefined){
el.minh=rs.offsetHeight*2;
}
if(minw==undefined){
el.minw=rs.offsetWidth*2;
}
rs.onmousedown = Resizer.begin;

},
begin: function(e){
var el=Resizer.el=this.resizeParent;
var e=e||window.event;
this.lastx=e.clientX;
this.lasty=e.clientY;
document.onmousemove=Resizer.resize;
document.onmouseup=Resizer.end;
return false;

},
resize: function(e){
var e = e || window.event;
var x,y,mx,my,el,rs,neww,newh;
el=Resizer.el;
rs=el.resizer;
mx=e.clientX;
my=e.clientY;
neww=(el.clientWidth-(rs.lastx-mx));
newh=(el.clientHeight-(rs.lasty-my));
if(neww>=el.minw){
el.style.width=neww+'px';
rs.lastx=mx;
}
else{
rs.lastx-=parseInt(el.style.width)-el.minw;
el.style.width=el.minw+'px';

}
if(newh>=el.minh){
el.style.height=newh+'px';
rs.lasty=my;
}
else{
rs.lasty-=parseInt(el.style.height)-el.minh;
el.style.height=el.minh+'px';

}

return false;

},
end: function(){
document.onmouseup=null;
document.onmousemove=null;
}
};
window.onload=function(){
Resizer.attach(document.getElementsByClassName('resize')[0]);
}

Your HTML needs to look like:

<div class="resize"><
div class="drag"></div>
</div>

Neither one needs to be a div, but the resizeable one's class needs to be "resize" and the draggable element's class needs to be "drag".

Attach it with:

Resizer.attach(element);

...where element is the one to be resized.

Works on multiple elements, as shown in the jsfiddle. You can also pass in a minimum height and minimum width. If you don't, it automatically makes them twice the height of the draggable element.

It currently does have a problem when you're scrolled all the way down. I'm not sure how to counter it, but I'll work on it more later.

Category:javascript Views:0 Time:2011-10-01

Related post

  • Trying to avoid control "wobble" when resizing controls according to mouse position 2009-07-31

    I've got a set of controls in a line inside "FollowTableLayoutPanel1", contained within "TableLayoutPanel2". I have them resizing according to the position of the mouse cursor; the closer the mouse cursor is to the vertical centre of the control, the

  • Resizing elements in Expression Blend Preview 4 2009-12-22

    I'm walking through Adam Kinney's Blend tutorials (http://visitmix.com/labs/rosetta/EyesOfBlend/) and I'm seeing some puzzling behavior with resizing objects. Specifically, at this step (http://visitmix.com/labs/rosetta/EyesOfBlend/Drawing/#08) I'm s

  • Looking for jQuery Carousel with resizing elements. write from scratch or plugin? 2010-09-17

    I have a task ahead of me and I would like to plan the best way of attacking it before diving in. I need to make a carousel with resizing elements that animate similar to this page/plugin http://www.eogallery.com/ This gallery seems like it needs a l

  • How to resize elements inside iFrame with jQuery resizable? 2011-04-14

    I'm having some problems with a project I'm currently involved with. Here is my situation. I am dynamically building and rendering a web page to an iframe, and I am wanting to offer the user the ability to resize the div elements within that rendered

  • How do I allow a user to smoothly resize elements in Flex 3 2011-06-28

    I have a Flex 3 app that has elements that a user can add to the main canvas then resize and reposition. There are 3 key functions I am using for the resize which are as follows: When the resize begins: private function startResize(event:MouseEvent):

  • Resize a picturebox by mouse 2011-08-08

    I'm developing a WPF app and I'm trying to resize a picturebox by mouse like that how can I do that? --------------Solutions------------- There are several ways to achieve that, one of it would be to use adorners like described in this post.

  • Using PPT 07 and resizing graphics causes USB mouse to disconnect 2013-12-19

    With my Lenovo thinkpad T60 (2007 CTO) in the dock....When i run PPT 07 and try to resize any graphics, the mouse is erratic and the USB sound goes on and off...also the "battery" icon flashes....No such problems with graphics in word 07... If I plug

  • constantly resizing iframe to contents via Jquery 2010-01-28

    if found this solution on the web that re-sizes the iFrame on load. I was wondering how I can do this by setting an loop that constantly check's the active iframe's content size then resize it instantly any ideas on how to do this on Jquery? Thanks!

  • Inconsistent jQuery function when resizing elements on page load 2009-06-23

    Ahoy! I've built a little script to check the size of the left-hand margin on page load, resize a div there to fill it, and change the header div to float next to it. Here's the code: function buildHeader() { var containerMarginLeft = $(".container_1

  • jquery - Resize element ondrag when reaches container 2009-09-08

    I have a standard div that is set to both drag & resize within it's parent. I need to be able to resize the div as it is dragged into it's parent. I only need this to happen when it's dragged vertically to the bottom, so I have it setup like this

  • Resizing an image using mouse dragging (C#) 2010-03-21

    I'm having some trouble resizing an image just by dragging the mouse. I found an average resize method and now am trying to modify it to use the mouse instead of given values. The way I'm doing it makes sense to me but maybe you guys can give me some

  • jQuery: resizing element cuts off parent's background 2010-04-18

    I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/ Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as w

  • Nesting resizable elements 2010-05-04

    I am using jQuery UI's resizable for nested divs, like so: <div id="resizable1"> <div id="resizable2"> </div> </div> I'm running into a problem where disabling resizable 1 also disables resizable 2. So, if I call the following

  • Dragging, Dropping & resizing elements 2011-01-07

    I have a web page which has three <div> elements: Right_bar contains several layouts (nothing to do with this question) Bottom_bar contains several components e.g. calculator, logo, a group of buttons etc. each component uses a <div> and

  • WPF auto resize elements 2011-06-05

    When application window is resized I want that the elements in it would resize proportionally too. Is that possible? I tried googling but couldn't really find anyting related to this. My XAML code: <Window x:Class="app.MainWindow" xmlns="http://sc

  • Javascript : Image Resizing in Chrome using mouse 2011-06-15

    How can I resize images in Chrome using a mouse? i.e. when you stretch an image using a mouse. --------------Solutions------------- Someone have already made a jQuery plugin for this purpose : http://www.editorboost.net/webkitresize

  • Resize QDockWidget objects with mouse 2011-07-27

    How to resize QDockWidget objects with a mouse? There seems only 1px border to use a resize functionality. How to make this area larger? Or may be it's a QMainWindow object property? which handle this qdocks --------------Solutions------------- I ass

  • Grid of resizable elements with jQuery - are there any libraries that would support this? 2011-08-30

    I'm looking to create a 3x3 grid of elements, fixed inside of a larger parent element, that are all resizable. The catch is that I want all 9 child elements to always occupy exactly 100% of the space of the parent. So if I increase the width of the e

  • Dynamically position a div in the top left of a resizable element in JQuery UI 2011-09-05

    I'm creating a custom style for the Draggable interface of the JQuery UI you can see here: http://psdesignzone.com/help/Designer.html I'm having trouble getting the NW-Resize section working right, if you look at the top left of the box (e.g. the Nor

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.121 (s). 11 q(s)