| home / programming / javascript / gr / column6 / 1 |    [previous][next] |
|
|
|
The onBringToFront() method is used as the onmousedown event handler for the table created in the constructor. This calls the bringToFront() method on the JSWindow object through the JSWindow property (also assigned in the constructor).
All the bringToFront() method does is append the table to the end of the document body. Since an HTML element can only have one parent, it will not be duplicated, merely moved. HTML elements lower down in the document are placed over earlier elements, so after this method is called it will be the top window.
Now, let’s look at moving windows around. On most windows-oriented platforms, users can move windows around by clicking on the title and dragging the window to the new position. This is implemented in two parts:
First, an onmousedown event handler is added to the table cell containing the window title:
| JSWindow.prototype.tdOnMouseDown = function() { |
||
| this.jsWindow.onMouseDown(); | ||
| } JSWindow.prototype.onMouseDown = function() { |
||
| // record that a mouse down has just occurred this.bDown = true; // link from document body to this JSWindow object document.body.jsWindow = this; // save body mouse handlers // set new handlers. |
||
| } | ||
Initially, the onmousedown event sets a flag to indicate that the mouse button has just been pressed. This is used later in the onmousemove handler. The mouse move handler is attached to the document body object rather than the title cell as it is more responsive – if the mouse moves too quickly it can leave the title cell and the move would stop. Since the document body is not exclusive to the JSWindow object, the old handlers are saved so that they can be reinstated when the window move has completed.
| JSWindow.prototype.bodyOnMouseMove = function(evt) { |
||
// get the event object this.jsWindow.onMouseMove(e); |
||
| } JSWindow.prototype.onMouseMove = function(evt) { |
||
// if mouse not down, stop the move (for IE only) // handle move |
||
| } else { |
||
| this.oDiv.style.left = Math.max((this.dx + evt.x),0) + "px"; this.oDiv.style.top = Math.max((this.dy + evt.y),0) + "px"; |
||
| } | ||
| } | ||
The bodyOnMouseMove() method attempts to find the event object for the mouse move event. This can come from different sources depending on which browser is being used (standards are great, everyone should have one). It then calls the onMouseMove() method of the JSWindow object.
The first time the mouse move handler is called; the difference between the mouse position and the window is calculated and recorded. In subsequent calls, these values are used to reposition the window based on the new position of the mouse.
One problem is that if the window is moved above or to the left of the document body (i.e. negative top or left values), it will no longer be accessible. To prevent this, the top and left values are limited to zero or higher values.
Another problem is that if the user drags the mouse outside the browser window, Internet Explorer stops generating the mouse events (Netscape on the other hand does not). So if the user were to start moving a window then move the mouse off the page and then release the mouse button, the window would continue moving when the mouse returns to the browser again. To fix this problem, the onMouseMove() method must test the state of the mouse button before processing the move.
| JSWindow.prototype.bodyOnMouseUp = function() { |
||
| this.jsWindow.onMouseUp(); | ||
| } JSWindow.prototype.onMouseUp = function() { |
||
| document.body.onmouseup = this.saveMouseUp; document.body.onmousemove = this.saveMouseMove; document.body.jsWindow = null; |
||
| } | ||
When the user has finished moving the window, the onmouseup event will be raised. The saved onmouseup and onmousemove handlers from the document body object are reinstated.
Another common windows feature is minimize - the window is reduced to a small box that is placed in a convenient location, but out of the way of the other windows.
| JSWindow.prototype.onMinimize = function() { |
||
| this.jsWindow.minimize(); | ||
| } JSWindow.prototype.minimize = function() { |
||
// hide the content |
||
| } | ||
| home / programming / javascript / gr / column6 / 1 | [previous][next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: May 13, 2004
URL: http://webreference.com/programming/javascript/gr/column6/1
