| home / programming / javascript / gr / column6 / 1 |   [previous] |
|
|
|
The minimize bar is just a <span> element appended to the bottom of the document body. The window without the content is appended to this <span> element with the position style set to static. Lastly, the minimize button is changed to a restore button.
| JSWindow.prototype.onRestore = function() { |
||
| this.jsWindow.restore(); | ||
| } JSWindow.prototype.restore = function() { |
||
| // return the window to the document body document.body.appendChild(this.oDiv); // return the window position
to saved values |
||
| } | ||
As one would expect, restore is more or less the reverse of minimize. The window table is moved from the minimize bar back to the document body and its position styles revert to what they were before being minimized. Next, a new second row is added to the table; the content is inserted and made visible again. The restore button also reverts back to a minimize button.
The last thing needed to make this window class complete is a close button:
| JSWindow.prototype.onClose = function() { |
||
| this.jsWindow.close(); | ||
| } JSWindow.prototype.close = function() { |
||
| // remove content from browser document this.oContent.parentNode.removeChild(this.oContent); // remove from browser document this.oDiv.parentNode.removeChild(this.oDiv); |
||
| } | ||
In the close() method the content element and window table element are removed from their respective parent nodes. The reason the content is removed is if the window is minimized, the content will be contained in the document body and not in the window table.
Now, let’s have a look at how this window framework is used:
| <html> <head> <style> .JSWindowTitleStyle { |
|||
| font-weight: bold; fond-size: 14px; background-color: lime; cursor: default; |
|||
} // the windows code goes here. function createNewWindow() |
|||
| var oDiv = document.createElement("div"); oDiv.style.width = "250px"; oDiv.style.height = "80px"; oDiv.innerHTML = "This is a new window<br>blah blah blah blah blah blah..."; new JSWindow(document.getElementById('wName').value, oDiv, 10, 10); |
|||
} function createWindows() |
|||
| new JSWindow("Window 1", document.getElementById("Div1"),
30,100); new JSWindow("Window 2", document.getElementById("Div2"), 300,0); new JSWindow("Window 3", document.getElementById("Div3"), 300,100); |
|||
} </script> |
|||
| <div id="Div1" style="width:250px;height:60px;"> | |||
| This is window 1<br> blah blah blah blah blah blah blah blah blah blah blah... |
|||
| </div> <div id="Div2" style="width:300px;height:50px;"> |
|||
| This is window 2<br> <input name="favoritecolor" type=text value=green> |
|||
| </div> <div id="Div3" style="width:200px;height:100px;"> |
|||
| This is window 3<br> <input id=wName value="New Window"> <button onclick="createNewWindow();">Create</button> </div> |
|||
| <div id=debug></div> | |||
| </body> </html> |
|||
In this example page, there are three <div> elements contained within the body of the document. They will be used as the contents of three windows. In the onload handler for the <body>, three new JSWindow objects are created, one for each <div> element. The content of Window 3 contains a button that will dynamically create a new window with a user supplied window name.
I have endeavoured to make this code as browser compatible as possible, meaning that it’s been tested with the latest versions of Internet Explorer (6.0) and Netscape (7.1) –this accounts for over 80% of users). To appease the small but appreciable set of users who have disabled JavaScript, this code will fail gracefully by simply leaving the content alone.
I’ve used a simple table to provide the structure of the window frame and simple table cells with textual characters to provide the buttons, but this isn’t necessary. Using a few images would produce a more aesthetically pleasing design, but for the sake of brevity (and any potential copyright issues) I have left it as text.
To see a working demonstration of this code, click here.
Guyon Roche is a freelance web developer in
| home / programming / javascript / gr / column6 / 1 | [previous] |
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
