Resizing a div by resizing its borders

Discussion in 'Javascript' started by Pil (Trustworthy from Experience), Apr 18, 2009.

  1. 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.
    Pil (Trustworthy from Experience), Apr 18, 2009
    #1
    1. Advertising

  2. Pil (Trustworthy from Experience)

    rf Guest

    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.
    rf, Apr 18, 2009
    #2
    1. Advertising

  3. Pil (Trustworthy from Experience)

    Proper Guest

    On Apr 19, 12:31 am, "rf" <> 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, Apr 19, 2009
    #3
  4. Pil (Trustworthy from Experience)

    Proper Guest

    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.
    Proper, Apr 19, 2009
    #4
  5. Pil (Trustworthy from Experience)

    SAM Guest

    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
    SAM, Apr 19, 2009
    #5
  6. Pil (Trustworthy from Experience)

    Proper Guest

    On Apr 19, 11:49 am, SAM <>
    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.
    Proper, Apr 19, 2009
    #6
  7. Pil (Trustworthy from Experience)

    David Mark Guest

    On Apr 19, 3:06 pm, Proper <> wrote:
    > On Apr 19, 11:49 am, SAM <>
    > 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.
    David Mark, Apr 19, 2009
    #7
  8. Pil (Trustworthy from Experience)

    Proper Guest

    On Apr 19, 9:47 pm, David Mark <> 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?
    Proper, Apr 20, 2009
    #8
  9. Pil (Trustworthy from Experience)

    SAM Guest

    Le 4/20/09 8:46 AM, Proper a écrit :
    > On Apr 19, 9:47 pm, David Mark <> 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
    SAM, Apr 20, 2009
    #9
  10. Pil (Trustworthy from Experience)

    Proper Guest

    On Apr 21, 12:19 am, SAM <>
    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.
    Proper, Apr 21, 2009
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. George
    Replies:
    9
    Views:
    4,869
    George
    Oct 25, 2004
  2. thunk
    Replies:
    1
    Views:
    292
    thunk
    Mar 30, 2010
  3. thunk
    Replies:
    0
    Views:
    453
    thunk
    Apr 1, 2010
  4. thunk
    Replies:
    14
    Views:
    599
    thunk
    Apr 3, 2010
  5. Proper
    Replies:
    0
    Views:
    189
    Proper
    Apr 18, 2009
Loading...

Share This Page