Loosing events (strange ...)

[Wetono]

Hi all,

bkgnd: I'm trying to implement a resizable HTML element using CSS and JS.
Target browser is Mozilla Firefox >= 13

Following a shortened overall setup:

  
<div id="outer">  
  <div id="handle" onmousedown="init (this, event)"></div>  
</div>  

Here the div "outer" shall become resizable, when dragged using div "handle". The respective JS code could look as follows (I removed all the "security" stuff and put everything in global namespace):

  
var myElement = null;  
var myParent = null;  
function init(element, event) {  
  myElement = element;  
  myParent = myElement.parentNode;  
  // attach mousemove and mouseup handler to window (or document)  
  window.onmousemove = drag;  
  window.onmouseup = stop;  
  posx = event.clientX + window.pageXOffset;  
  posy = event.clientY + window.pageYOffset;  
}  
  
function stop(event) {  
  myElement = null;  
  window.onmousemove = null;  
  window.onmouseup = null;  
}  
  
function drag(event) {  
  if (myElement==null)  
    return;  
  posx = event.clientX + window.pageXOffset;  
  posy = event.clientY + window.pageYOffset;  
  
  var diffx = posx - posx_old;  
  var diffy = posy - posy_old;  
  posx_old = posx;  
  posy_old = posy;  
  myParent.style.width = parent.offsetWidth + diffx + "px";  
  myParent.style.height = parent.offsetHeight + diffy + "px";  
}  

What this snipped is intended to do:
If the user presses the mouse button on div "handle" the respective handler function (init) is called. The parent element as well as the handle element are stored. Furthermore handler functions "drag" and "stop" are assigned to the window (or document). The "drag" functions computes new width and height based on the mouse movements and assigns them to the parents style,
effectively resizing the parent element.

What is the problem:
This setup works quite nice (as intended) the FIRST time one uses it. So, if I grab the handler and drag it the parent element is correctly resized. When i release the handler the element remains at the selected size and behaves completely normal (with respect to e.g. inserting stuff etc). Now, if I klick again on the handler and start dragging the drag function is called say 4-6 times (I debugged it). After these calls the drag function is NOT called anymore, but the standard browser selection drag&drop functionality starts. When I then release the mouse button the D&D functionality stops and the parent (which did not change during D&D) snaps to the mouse position. Funnily my mouseup event gets lost, so that the parent stays attached to the mouse pointer (resizing correctly with respect to mouse movements).

There is one really interesting point to mention: If I drag for the first time (which as said works fine) and then klick somewhere into the page (but not on the handle itself) the following attempt to track works perfectly fine, too. Also when the dragging got corrupted and I first click and release on the handle (effectively resetting the handler functions) and then click into the page it will again work as intended in the next try. If I do not click into the page it will again become corrupted. I then (muahahaha I'm genious ;)) simulated a click event after mouseup, however, I found that it has absolutely no effect.

Guys, now I'm completely puzzled not getting this bit to work. Do you have any hints? Is it a known problem or simply my ignorance?

Cheers, Wetono

[dave]

Hi,

bkgnd: I'm trying to implement a resizable HTML element using CSS and JS.
Target browser is Mozilla Firefox >= 13

Perhaps consider using resize?

~dave

[Wetono]

Hi,

bkgnd: I'm trying to implement a resizable HTML element using CSS and JS.
Target browser is Mozilla Firefox >= 13

Perhaps consider using resize?

~dave

Thx Dave, that's a very useful hint - works like a charm. Basic problem solved!

I still remain confused about loosing the events though and appreciate every hint on that.

Wetono

[Der Martin]

Hello,

I still remain confused about loosing ...

do you mean "losing" or "loosening"? ;-)
 to lose (v): opposite of win        [single 'o']
 loose (adj): not properly attached  [double 'o']

*scnr*
 Martin