Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Resizing a div by resizing its borders (http://www.velocityreviews.com/forums/t938465-resizing-a-div-by-resizing-its-borders.html)

Pil (Trustworthy from Experience) 04-18-2009 07:56 PM

Resizing a div by resizing its borders
 
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.


rf 04-18-2009 10:31 PM

Re: Resizing a div by resizing its borders
 
Pil (Trustworthy from Experience) wrote:
> 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.


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



Proper 04-19-2009 07:15 AM

Re: Resizing a div by resizing its borders
 
On Apr 19, 12:31 am, "rf" <r...@z.invalid> wrote:

> 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.

Proper 04-19-2009 09:00 AM

Re: Resizing a div by resizing its borders
 
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.

SAM 04-19-2009 09:49 AM

Re: Resizing a div by resizing its borders
 
Le 4/19/09 11:00 AM, Proper a écrit :
> 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.


have a look here :
<http://www.walterzorn.com/dragdrop/dragdrop_e.htm>

--
sm

Proper 04-19-2009 07:06 PM

Re: Resizing a div by resizing its borders
 
On Apr 19, 11:49 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

> <http://www.walterzorn.com/dragdrop/dragdrop_e.htm>


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.




David Mark 04-19-2009 07:47 PM

Re: Resizing a div by resizing its borders
 
On Apr 19, 3:06*pm, Proper <p...@arcor.de> wrote:
> On Apr 19, 11:49 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
> wrote:
>
> > <http://www.walterzorn.com/dragdrop/dragdrop_e.htm>

>
> 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.

Proper 04-20-2009 06:46 AM

Re: Resizing a div by resizing its borders
 
On Apr 19, 9:47 pm, David Mark <dmark.cins...@gmail.com> wrote:
> Looks like your
> specific question has been answered.


Where?

This is what I have now

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

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?


SAM 04-20-2009 10:19 PM

Re: Resizing a div by resizing its borders
 
Le 4/20/09 8:46 AM, Proper a écrit :
> On Apr 19, 9:47 pm, David Mark <dmark.cins...@gmail.com> wrote:
>> Looks like your
>> specific question has been answered.

>
> Where?


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

> This is what I have now
>
> http://mxamples.googlepages.com/drag-borders2.html


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>

--
sm

Proper 04-21-2009 07:35 AM

Re: Resizing a div by resizing its borders
 
On Apr 21, 12:19 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

> mousedown on icone in bottom-right,
> drag this image,



Thank you, that was a good hint. The event should not happen on an
image because in this case the browser wants to drag the image. This
is what I have now

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

Resizing the box with the button works very well now.
Dragging the borders is not perfect yet.

I'll have a look at your other suggestions.



All times are GMT. The time now is 04:26 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.