How Mike's Site is Built
By Mike Hall
March 25, 1999
This site itself uses DHTML to create the look of a Windows 95 desktop. It consists of three frames, one for the icons and start menu at left (1), a frame containing this page which is layed out to resemble a windowed application (2) and one directly below it that contains the rest of the desktop taskbar (3).
Both Netscape Communicator 4 (NS4) and MS Internet Explorer (IE4) are supported. But since dynamic HTML is implemented differently in each, different objects and methods are used to create the dynamic effects. Both browsers support style sheets but the differences between NS4 and IE4 makes it too unwieldly to use them for both, so the NS4 version uses layers while the IE4 version uses style sheets.
To tell which browser is being used, checks are made in the JavaScript code for the existence of a certain object ('document.layers' for NS4 and 'document.all' for IE4) to determine what code to execute. This is useful because it also prevents scripting errors from occuring in older versions of both browsers, allowing for some backward - compatibility.
First, JavaScript is embedded in the pages to create the proper HTML code (either layers or style sheets) as the page is being loaded via 'document.writeln()' statements.
These layers or style sheets are used for the taskbar and start menu, allowing for the them to always be placed at the bottom of the browser window even if the window is resized by repositioning them using the 'onResize' event handler in the <body> tag to rerun the proper function.
The start menu remains hidden until the start button is pressed. Once displayed, start menu items are highlighted when the mouse pointer passes over them using image rollovers (each item is actually a separate image). The menu is hidden again whenever the mouse button is click in any frame using event capturing. NS4 does this by capturing the 'onMouseDown' event while IE 4 uses the 'onClick' event handler in the <body> tag.
The bulk of the code is in menu.html while taskbar.html contains some of the same code for positioning the taskbar and handling a mouse click in it's frame. Each of the window-like pages includes the code in onclick.js to handle mouse clicks in that frame.
Mike's site is available at:
• http://members.aol.com/MHall75819/index.html
Click here to receive updates on the latest articles.
|
 |
Now Available:
Click to Order!Search for books on DHTML
Tech News:
Hot Forum Topics
|
