Resizing a div by resizing its borders

  • Thread starter Pil (Trustworthy from Experience)
  • Start date
P

Pil (Trustworthy from Experience)

What I have so far is this

http://mxamples.googlepages.com/drag-borders.html

But this script has a few disadvantages. The main disadvantage is in
my eyes that the drag event isn't smooth enough, I mean if the mouse
cursor is too fast it will loose the border and therefore the dragging
of the border will stop.

Thats the reason why the borders in the example are so fat. Making the
borders smaller would show at once what I mean because its no more
possible to grab the borders with the cursor.

I know that this can be done in another way, and I've done similar
things already a few years ago. But I cannot - by no means - remember
the trick.

So I'll try to describe it again what I mean: Dragging can have at
least two results. The first result is seen in my example above that
loses its object if the pressed mouse cursor goes out of the defined
area. The second result would continue dragging as long as the cursor
remains pressed - independant if it goes out of the defined area.

The second result can be seen - for example - here:

http://www.twinhelix.com/javascript/dragresize/demo/

(But this code is obfuscated, so I cannot detect or learn anything).

Thanks for ræading, and I hope that someone can give me a hint to the
right direction.
 
P

Proper

Attach the mousemove listener to the document, not the rectangle.

Yes, of course, this can be done also.
But its unfortunately not the solution of the problem.
 
P

Proper

Ok, checked it out. I should have said its unfortunately not the whole
solution.
The mouse coordinates must be in global scope too.
But my example remains nevertheless (very) sluggish compared to the
other example.
Seems I should rewrite the code completely.
 
P

Proper


Yes, thanks. This library seems usable just as well as my mentioned
library above. Although - I'm not searching for a library, I'm
searching for a solution of my problem. And this may require about 10
or 20 lines of code and to understand what happens. So why should I
use a library with 100 or 200 lines of code?

But it seems that this problem has no general solution yet, and the
people who solved it are not willing to share it.
 
D

David Mark

Yes, thanks. This library seems usable just as well as my mentioned
library above.
No.

Although - I'm not searching for a library, I'm
searching for a solution of my problem. And this may require about 10
or 20 lines of code and to understand what happens. So why should I
use a library with 100 or 200 lines of code?

Sound enough reasoning.
But it seems that this problem has no general solution yet, and the
people who solved it are not willing to share it.

There are only about ten million "general solutions" for this
"problem." But why do you need a general solution? Looks like your
specific question has been answered.
 
S

SAM

Le 4/20/09 8:46 AM, Proper a écrit :

Nowhere as there is not "specific" question, no?

mousedown on icone in bottom-right,
drag this image,
mouseup,
this time the resizing works (almost) fine.
The drop (or to leave the resizing): click once more
The mousemove listener is attached to the document and the mouse
coordinates are global, but the initial problem seems to remain.
Seems I'm using the wrong approach from the beginning. What is wrong
and why?

Probably a stopPropagation to fix somewhere ?
Or a click event to be changed in a mousedown/mouseup one ?

Perhaps refer to the parent or the object
(instead of the page or window)


Simple :
<http://www.quirksmode.org/css/resize.html>
but only with Safari ...

Some ideas ? :
<http://www.quirksmode.org/js/dragdrop.html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top