Revisions:
The DynWindow Object is a DHTML object which creates a draggable window and contains a scroll object to view external files - mimicing how a real OS-window works. Possible uses for this is for creating some very spiffy dialog windows or providing an alternative way to view html documents.
I didn't take as much time to make this object truely customizable, but the source code should be easy enough to follow along that you can extend it any way you need. This object uses each of the DynLayer, Drag, and Scroll objects, and is a perfect example of how well these objects can be made to work together.
Initialization:
First of all you must include all 4 of dynlayer.js, scroll.js, drag.js, and dynwindow.js.
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="scroll.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="dynwindow.js"></SCRIPT>
The DynWindow works in the exact same manner that the Select and Scroll objects works, and thus it's initialization is similar as well. Somewhere in your JavaScript before final loading of the page you call the following:
objectName = new DynWindow(x,y,width,height) objectName.build()
Example:
mywindow = new DynWindow(50,50,300,300) mywindow.build()
In the init() function you call the DynWindow's activate() method and initialize the code to activate the Drag Object:
function init() { mywindow.activate() // initialize mouse events document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) }
The mouseDown, mouseMove, and mouseUp functions are from the Drag Object lesson except I have added a call to routeEvent(e) for Netscape. This is so that both the document, as well as layers can recieve mouse events.
function mouseDown(e) { if ((ns4 && e.which == 1) || ie4) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop drag.mouseDown(x,y) if (drag.active) { // put more code here to do something else when starting a drag return false } else { if(ns4 && e.target!=document) routeEvent(e) return true } } } function mouseMove(e) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop if (drag.active) { drag.mouseMove(x,y) // put more code here to do something else while dragging return false } else { if(ns4 && e.target!=document) routeEvent(e) return true } } function mouseUp(e) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop if (drag.active) { drag.mouseUp() // put more code here to do something else when finished a drag return false } else { if(ns4 && e.target!=document) routeEvent(e) return true } }
In the BODY of your document you must write the DynWindow's div property:
<SCRIPT LANGUAGE="JavaScript"> document.write(mywindow.div) </SCRIPT>
Usage of the DynWindow
The DynWindow actually contains very little new code, it just packages the Drag and Scroll Objects into one new object.
There's 3 main methods:
close() - actually only hides the top-level layer, called when you click the close button on the window
minimize() - I didn't really know what to do with this method, so I just made it also hide the window when you click the minimize button. If you plan on implementing this object you'll probably want to extend the code to do something else like create an icon or something.
setTitle(title) - sets the title of the window using the style tag .windowTitleStyle (also see Scroll Attributes).
There's a few other internal methods (for doing the rollovers on the images etc). Feel free to browse the source code to see how they operate.
DynLayer Attributes
The DynWindow applies a lyr property which points to the top-level layer initialized as a DynLayer. Using this you can hide, show, or move the entire Window using the DynLayer Methods:
mywindow.hide()
Scroll Attributes
The DynWindow also contains a Scroll Object, so you can apply any of the scroll methods to the scroll object inside the DynWindow. This is done by the scroll property:
mywindow.scroll.load('file.html')
The external files must call mywindow.scroll.activate() and it's probably a good idea to set the title of the window at the same time:
<BODY onLoad="if (parent.Scroll) {parent.mywindow.scroll.activate(); parent.mywindow.setTitle('Text Page 1'); }">
Extending and Customizing
This object is experimental, and there's about a million different ways I can forsee that someone would want to customize it (eg. file menus, window borders, different colors, shadows etc.), so I just left the customizing up to you. To edit any of the images used, position of the layers etc, you will have to edit the actual code in the object. The DynWindow code is quite small, and should be easy to follow. If you have any questions about what parts to edit please post them to my DHTML Forum.
View dynwindow1.html for a DynWindow example. View Source Code
Download: dynwindow.js
View Source: dynwindow.js
Home | Next Lesson: Clock Object |