Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #17193 > unrolled thread

Resize a <div>

Back to article view | Back to comp.lang.javascript

Contents

  Resize a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-11-12 17:04 +0100
    Re: Resize a <div> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-11-12 19:30 +0100
      Re: Resize a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-11-13 22:38 +0100
      Re: Resize a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-11-15 14:30 +0100
        Re: Resize a <div> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-11-15 14:51 +0100

#17193 — Resize a <div>

Code below is the core of what I use to let a <div> be resized by dragging 
an icon in the bottom-right corner.
(I deleted the bits relevant for reporting to the server.)
It works (FF, Chrome, IE8) but it is not ideal. In Chrome and IE underlying 
text gets 'blacked' sometimes and in FF the mouse-up goes unnoticed. FF 
dragging is smooth though.
Check http://84.86.145.75 to see why I am not satisfied. (Fully formated 
script via menu File - Inspect source.)
I must be able to do better and I hope that you can give suggestions.
Tom

//script type="text/javascript"
function stopEventProgression(evt) {
  evt.cancelBubble = true;
  if (evt.stopPropagation) {evt.stopPropagation()};
}

var moveForm = (function(){
// Object with two methods: start(evt) and move(evt) to manage dragging a 
<div>
// which will be a Delphi form.
  var wndw = null,offsetX,offsetY,StlX,StlY;
  function move(e){
  // Will move the window
    if (!wndw || !wndw.style) return;
    var evt = e || window.event;
    wndw.style.left = (evt.screenX-offsetX)+'px';
    wndw.style.top = (evt.screenY-offsetY)+'px';
    stopEventProgression(evt);
  }
  function stop(evt){
    wndw = null;
    document.onmousemove = null;
    document.onmouseup = null;
  }
  var _start = function(e){
  // Attached to each Delphi form's navigation element onMouseDown
  // Start the move by clicking the element
  // Use the event parameters to get the initial mouse position 
(offsetX,offsetY)
    var evt = e || window.event;
    if (!evt) {return};
    var el = evtSource(evt);
    if (!el) {return};
    // find the window
    wndw = thisForm(el);
    if (!wndw) {return};
    document.onmousemove = move;
    document.onmouseup = stop;
    offsetX = evt.screenX-wndw.offsetLeft;
    offsetY = evt.screenY-wndw.offsetTop;
  };
  return {start : _start}
}());

[toc] | [next] | [standalone]

#17194

Tom de Neef wrote:

> Code below is the core of what I use to let a <div> be resized by dragging
> an icon in the bottom-right corner.
> (I deleted the bits relevant for reporting to the server.)
> It works (FF, Chrome, IE8) but it is not ideal. In Chrome and IE
> underlying text gets 'blacked' sometimes and in FF the mouse-up goes
> unnoticed. FF dragging is smooth though.
> Check http://84.86.145.75 to see why I am not satisfied. (Fully formated
> script via menu File - Inspect source.)
> I must be able to do better and I hope that you can give suggestions.

You need to prevent the default action for mouse events and selection events 
on the content of the resizable element while you are resizing it.

However, it might be better by now to set the CSS `resize' property on the 
element that you want to be resizable, and use scripting only as fallback.

<http://www.impressivewebs.com/css3-resize/>

> //script type="text/javascript"
> function stopEventProgression(evt) {
>   evt.cancelBubble = true;
>   if (evt.stopPropagation) {evt.stopPropagation()};
> }

Not a good idea.  You are preventing elements higher in the document tree 
from receiving the event (thereby potentially crippling the user interface), 
but you are not preventing the elements themselves from reacting to this 
event and other events.

Besides,

  if (evt.stopPropagation)

is insufficient and error-prone a feature test.  Unless it was fixed in 
MSHTML, this might throw an exception if the method was implemented.

Consider

  if (jsx.object.isHostMethod(evt, "stopPropagation"))

or similar code instead.
 

PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the 
root of the knowledge tree you build on a particular subject, pruning the 
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

[toc] | [prev] | [next] | [standalone]

#17208

"Thomas 'PointedEars' Lahn" <PointedEars@web.de> wrote:
>
>> Code below is the core of what I use to let a <div> be resized by 
>> dragging
>> an icon in the bottom-right corner. In Chrome and IE
>> underlying text gets 'blacked' sometimes and in FF the mouse-up goes
>> unnoticed.
>
> You need to prevent the default action for mouse events and selection 
> events
> on the content of the resizable element while you are resizing it.
>
> However, it might be better by now to set the CSS `resize' property on the
> element that you want to be resizable, and use scripting only as fallback.
>
> <http://www.impressivewebs.com/css3-resize/>
>
>> //script type="text/javascript"
>> function stopEventProgression(evt) {
>>   evt.cancelBubble = true;
>>   if (evt.stopPropagation) {evt.stopPropagation()};
>> }
>
> Not a good idea.  You are preventing elements higher in the document tree
> from receiving the event (thereby potentially crippling the user 
> interface),
> but you are not preventing the elements themselves from reacting to this
> event and other events.
>
> Besides,
>
>  if (evt.stopPropagation)
>
> is insufficient and error-prone a feature test.  Unless it was fixed in
> MSHTML, this might throw an exception if the method was implemented.
>
> Consider
>
>  if (jsx.object.isHostMethod(evt, "stopPropagation"))
>
> or similar code instead.
>

Thank you.
Tom

[toc] | [prev] | [next] | [standalone]

#17259

"Thomas 'PointedEars' Lahn" wrote:
>
>>[..] In Chrome and IE underlying text gets 'blacked' sometimes [..]
>
> You need to prevent the default action for mouse events and selection 
> events
> on the content of the resizable element while you are resizing it.

There were no elements with mouse event triggers contained in the resizing 
<div>.
I have finally found my error:
the mousemove event handler did not return a value. Adding 'return false' 
cured the problems.
Tom

[toc] | [prev] | [next] | [standalone]

#17260

Tom de Neef wrote:

> "Thomas 'PointedEars' Lahn" wrote:
>>>[..] In Chrome and IE underlying text gets 'blacked' sometimes [..]
>>
>> You need to prevent the default action for mouse events and selection
>> events on the content of the resizable element while you are resizing it.
> 
> There were no elements with mouse event triggers contained in the resizing
> <div>.

Wrong.

> I have finally found my error:
> the mousemove event handler did not return a value. Adding 'return false'
> cured the problems.

Which is equivalent to preventing the default action.


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web