dragging a block element border to resize

[jeffg]

I have a DIV that needs to give the user the ability to grab its right
border to resize the width of the block. I know that CSS supports
properties such as cursor : col-resize to provide the visual indication
that the element can be dragged with the mouse. But I cannot for the
life of me figure out how to make the event fire only when the pointer
is over the right border.

I've searched this group many times and can't find anything on this.
So, please, help. Any code snippets would be appreciated.

Jeffg

[Rob]

jeffg wrote:

I have a DIV that needs to give the user the ability to grab its right
border to resize the width of the block. I know that CSS supports
properties such as cursor : col-resize to provide the visual indication
that the element can be dragged with the mouse. But I cannot for the
life of me figure out how to make the event fire only when the pointer
is over the right border.

I've searched this group many times and can't find anything on this.
So, please, help. Any code snippets would be appreciated.

Jeffg

What I would probably do (and I'm no expert on this) is instead of relying
on the mouse to be over the said element, rely on the mouse being at a
certain location on the screen -- then on a left click event have the block
resize.

So get the location of the border. When the mouse hits that location trigger
an event.

I don't think it's possible to have CSS trigger a javascript event, hence
why I would go by pointer location.