DHTML Lab: Dynamic HTML Tutorials, DHTML Scripts, Programming, Tools, Code, and Examples - dhtmlab.com | WebReference

DHTML Lab: Dynamic HTML Tutorials, DHTML Scripts, Programming, Tools, Code, and Examples - dhtmlab.com

DHTML Lab Logo

Looking for our popular hierarchical menu script? Read all about it in our new menu-only section.

dynomat logo

Visit our site's interactive tool section. Generate cut-and-paste code based on our column techniques. Pull in empty; drive out full.

Good EATS!

Come to the DHTML Diner for a quick snack. In between columns nibble on our code snippets, short techniques, and answers to FAQs.

Every other week, a new column with practical examples to use in your web pages.
All our examples, with source code, focus on cross-browser and backward compatibility.
A 4th generation browser is not required to follow and appreciate the columns.

Be sure to visit
JavaScript.com for all your JavaScript needs.
Doc JavaScript and the JavaScript Tip of the Week Archive for more JavaScript tips, and
The JavaScript Source for cut-and-paste scripts.

Please note: HierMenus is protected by copyright laws. Use of the HierMenus code requires a paid licensing agreement.

For more information about licensing the HierMenus Code from QuinStreet, please send us an E-mail via the link below. It will be helpful for you to include information about your organization, the usage planned for HierMenus and how we can reach you.

Contact: Barry Pullen
Telephone: (203) 662-2868
Click here for contact form

New to DHTML Lab:

[71] Dynamic HTML Lab: Pop-up Calendar 1.2

In the first maintenance release of our Popup Calendar, we added better navigation bar styling and the ability to clear read-only input fields. In this latest release, we include new functionality that enables you to separate form elements to display any combination of a user-selected date, month and year. By Peter Belesis. 1021

[70] Dynamic HTML Lab: Fun with Mozilla Border Radii

The Mozilla people have jumped the gun on CSS3 and prematurely put an end to purely rectangular elements with their curved elements and borders. Here's a preview of what to expect in CSS3, and a demonstration of what you can do right now in Gecko browsers. By Peter Belesis. 1007

[69] Dynamic HTML Lab: Pop-up Calendar 1.1

The first maintenance release of our new, but already popular, Popup Calendar includes better navigation bar styling, the ability to clear read-only input fields and fixes a couple of minor problems missed the first time around. By Peter Belesis. 0916

[68] JavaScript Programming: dltypeof() v1.0, An Introduction

Anyone who has written a JS application of any complexity will have come across the frustrations associated with the limitations of the typeof() operator. Developers are left wishing that it could provide them with more meaningful information, or that a similar, more powerful, operator existed to help identify object types to our applications. This article will show you how to do just that. By Peter Belesis. 0830

[67] Dynamic HTML Lab: Pop-up Calendar 1.0

In a much anticipated article, Peter Belesis returns with this piece on a DHTML Lab Popup Calendar. Among its many features: No knowledge of JavaScript is necessary; only a beginner's aquaintance with HTML and CSS syntax is all that's needed.

HierMenus 6.0.1: Release Notes
Seen any good bugs lately? The purely maintenance oriented HierMenus 6.0.1 corrects a few deficiencies pointed out by our customers, including the annoying Internet Explorer mouse wheel bug.

HierMenus 6.0: Release Notes
We are pleased to announce the release of HierMenus version 6.0. Our most flexible HierMenus ever, V6 offers support for menu and item specific parameter settings, enhanced menu positioning options, and many other new features.

HierMenus Version 6 Sneak Preview
We're putting the finishing touches on HierMenus version 6 now. Among the highlights: Menu and item specific parameter settings, new styling options (including support for menu and item class names), and support for Internet Explorer filters and transitions.

Synchronized Link Rollovers
Though often not realized, it is possible in HierMenus to synchronize an image-based link's rollover action to the display and hiding of its designated menu. This quick tutorial shows you how.

When TLC Isn't Enough
Need to position your HierMenus based on something other than the Top-Left Corner? With only a few lines of custom code, you can position a menu based on its top, bottom, left, or right corner.

HierMenus 5.3.1: Release Notes  IE4 NS4 DOM
HM 5.3.1 addresses cross-frame menuing problems found in the latest browser releases, including Safari 1.1 and Opera 7.21/7.22.

HierMenus 5.3: Release Notes  IE4 NS4 DOM
HierMenus is ready to roll--rollover, that is. Support for embedded image rollovers leads the list of HM5.3 improvements, which also includes "more" image positioning enhancements and fixes for right-to-left page directionality.

HierMenus 5.2.1: Release Notes  IE4 NS4 DOM
A pair of fixes are included in this HM maintenance release; correcting problems with scrolling menus that shouldn't be and dealing with Safari's spoof settings.

HierMenus 5.2: Release Notes  IE4 NS4 DOM
Among the highlights: new menu creation options, including the ability to create all menus on-the-fly, as well as the ability to override HM's Keep-In-Window logic for all or individual top-level menus.

Hiding Page Elements  IE4 NS4 DOM
Are form <select> elements encroaching on your well designed DHTML elements? What you can't run from you may just be able to hide. Have a look at this mass-element hiding solution that works equally well both in and out of HierMenus.

HierMenus 5.1: Release Notes  IE4+ NS4+ Konq 3 Opera 7 Safari 1
Our latest HierMenus release features a space-optimized code set (in addition to our standard verbose scripts) that cuts the byte count nearly in half. Additional fixes and revisions accommodate independent navigation page reloads and other minor corrections.

Browser Specific Parameter Settings
Need to set your menu font size differently depending on the user's browser? Using JavaScript's conditional operator, you can easily choose between two parameter values as HM is loaded. This quick tutorial shows you how.

HierMenus 5.0.1: Release Notes  IE4+ NS4+ Konq 3 Opera 7
New scrolling menu-related parameters and bug fixes for Netscape 4.x lead the list of improvements in our latest HM release.

HierMenus 5.0: Release Notes  IE4+ NS4+ Konq 3 Opera 7
HierMenus 5, complete with Opera 7 support and cross-frames functionality, is now available. Read up on the new parameters and some of the cross-browser difficulties that cross-frames menuing entails.

HM5 Status Report: Adding Opera  IE5+ NS4+ Konq 3 Opera7+
HM5 development, with cross-frames compatibility and support for Opera 7, is well underway. Learn along with us as we discuss the necessary steps for creating Opera friendly HierMenus.

DHTML Diner: Element Page Coordinates, Part 4  IE4+ NS6+
Do you know where your elements are?
More in our series examining position retrieval of HTML elements.
We conclude our discussion of IE for Windows with a look at layout-defining static, absolutely-positioned and relatively-positioned elements.

[66] HierMenus Go Forth, XXX:
Version 4.3 - The Complete Script (Full-Window)
  NN4 IE4+ NS6 Konq
Greatly improved menu rollover timing and response aligning HM with MS-Windows OS menu behavior.

[65] HierMenus Go Forth, XXIX:
Version 4.2.3 - The Complete Script (Full-Window)
  NN4 IE4+ NS6 Konq

Support for Konqueror (UNIX / Linux) browser introduced.

[64] HierMenus Go Forth, XXVIII:
Version 4.2.2 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
New menu scrolling options. Mousewheel support for IE6Win. Minor improvements and fixes.

Recent Content:

[63] HierMenus Go Forth, XXVII:
Version 4.2.1 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Scrolling for IE4 Windows and IE5 Macintosh enabled.

[62] HierMenus Go Forth, XXVI:
Version 4.2 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
New major feature!
Scrolling capability for tall multi-item menus.

[61] HierMenus Go Forth, XXV:
Version 4.1.3 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Includes a major improvement for IE6 standards-compliance mode and a minor IE fix.

[60] HierMenus Go Forth, XXIV:
Version 4.1.2 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Another important interim release of HM4.
Support for the new, stricter IE6 standards-compliance.

A new section devoted to issues arising out of browser and/or platform quirks.
Can you help us solve any of them?

Latest DHTML Diner Entreé:

DHTML Diner: Element Page Coordinates, Part 3  IE4+ NS6+
We continue our series examining position retrieval of HTML.
This time we discuss elements contained in table cells in Netscape 6, Netscape 7 (yes, there are differences) and Mozilla.

DHTML Diner: Element Page Coordinates, Part 2  IE4+ NS6+
The second installment of our series examines position retrieval of elements contained in table cells in IE. Our standard functions need to be modified to account for the BORDER, FRAME and RULES attributes of table elements.
Along the way, we learn everything there is to know about the above attributes, with the help of an in-page interactive tool.

DHTML Diner: Element Page Coordinates, Part 1  IE4+ NS6+
A detailed look at HTML element hierarchies as exposed in JavaScript. Learn the difference between a parentElement, a parentNode and an offsetParent.
More importantly, in this first of several articles we revisit the old problem of determining the exact pixel position of HTML elements, both static and positioned. We begin with a discussion of position retrieval in IE4+ for Windows and NS6+. There are many surprises.

DHTML Diner: Positioned Elements and OS Controls, Applets and Plug-ins  NN4 IE4+ NS6 Opera
Why do some page elements burn holes in regular HTML elements positioned over them? Which elements display this visibility persistence and in which browsers on what platforms? All these questions answered in our revised updated version of one of DHTML Lab's earliest articles.

Latest DHTML Dynomat Tool:

DHTML Dynomat: Dynamic Headline Fader, Version 3.0  NN4 IE4+
A tool update to accompany Version 3.0 of the Fader script.
All parameters and improvements introduced in Column 27 can now be applied in our interactive tool, making a new updated Fader on your page only a cut and a paste away.

Recent Columns:

[59] HierMenus Go Forth, XXIII:
Version 4.1.1 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
An important interim release of HM4.
The IE5+ memory issue is resolved, improving performance in IE for Windows and greatly increasing speed in IE for Macintosh.

[58] HierMenus Go Forth, XXII:
Version 4.1 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
A major release of HM4, introducing support for variable-width menus.

[57] HierMenus Go Forth, XXI:
Version 4.0.14 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Includes support for new behavior introduced in Netscape 6.1 and Mozilla 0.9.3

[56] HierMenus Go Forth, XX:
Version 4.0.13 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
- introduction of "more" image rollover
- avoidance of IE error message due to user array syntax error
- better menu hide timer handling
- improved menu tree z-index assignment

[55] HierMenus Go Forth, XIX:
Version 4.0.12 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Fixes include:
- avoidance of IE error message
- permanent menu problems.

Improvements include:
- form input value persistence in NS4 after window resize
- new HM_ChildSecondsVisible parameter for child menu hide timer

[54] HierMenus Go Forth, XVIII:
Version 4.0.11 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Minor fixes including better keep-in-window repositioning.
Minor improvements including introduction of tree-level choice of menu-display event (click or mouseover). Better menu-display event handling by permanent top-level menus.

[53] HierMenus Go Forth, XVII:
Version 4.0.10 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Improved JS expression handling for all parameters.
Better relative menu positioning. Outstanding issues resolved.

[52] HierMenus Go Forth, XVI:
Version 4.0.9 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Vastly improved menu positioning, including:
  - Acceptance of JS expressions for top-level menu positioning
  - Repositioning upon window resize for IE and Gecko browsers
  - Optional centering of permanent menus

[51] HierMenus Go Forth, XV:
Version 4.0.8 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
The IE5Mac BACK-Button problem explained and fixed. Better rendering for IE5Mac and IE6Win when DOCTYPE DTD URL's are used. And lastly, a minor positioning fix for child menus in NS4.

[50] HierMenus Go Forth, XIV:
Version 4.0.7 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Newly introduced bug fix and improved permanent menu behavior.

[49] HierMenus Go Forth, XIII:
Version 4.0.6 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
Even faster NS4 menu creation, onLoad event handler conflicts addressed, and the colon returns!

[48] HierMenus Go Forth, XII:
Version 4.0.5 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
More improvements. The IE4 and IE5Mac item vertical spacing problem is isolated. Faster NS4 menu creation.

[47] HierMenus Go Forth, XI:
Version 4.0.4 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
More minor fixes.

[46] HierMenus Go Forth, X:
Version 4.0.3 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
HM in browser-specific files for faster loading and easier maintenance. Major changes to menu creation logic fixing reported problems in NS4 IE5Mac and NS6.

[45] HierMenus Go Forth, IX:
Version 4.0.2 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
After even more feedback, even more tweaks.

[44] HierMenus Go Forth, VIII:
Version 4.0.1 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
After much feedback in record time, the first tweaks for HM4.

[43] HierMenus Go Forth, VII:
Version 4 - The Complete Script (Full-Window)
  NN4 IE4+ NS6
The complete HM4.0 external script for full window use, presented as-is, before the usual detailed discussion. Includes all the features promised in previous columns and a few new ones. Introduces support for Netscape 6.

With our wishes for a very Happy, Safe and Prosperous New Year. Enjoy!

[42] HierMenus Go Forth, VI:
Version 4 - The Page-Specific Parameters (cont'd)
  NN4 IE4+ NS6
The last of the new Page-Specific Parameters discussed.

[41] HierMenus Go Forth, V:
Version 4 - The Page-Specific Parameters (cont'd)
  NN4 IE4+ NS6
More of the new Page-Specific Parameters outlined in detail.

[40] HierMenus Go Forth, IV:
Version 4 - The Page-Specific Parameters
  NN4 IE4+
Our discussion of HM Version 4 continues with the new Page-Specific Parameters. These JavaScript variables replace the Version 3 in-page Global Parameters. They are optional and affect the look and behavior of menus on a per-page basis. Less chance for errors and lighter pages for HM users.

[39] Introduction to IE Data Binding  IE4+
Perfect for intranets, Data Binding builds pages on the client using HTML merged with data, as the data is being transmitted. Combined with DHTML this means faster, more interactive pages for your users.
By Ian McArdle and Paul Thomas.

[38] HierMenus Go Forth, III:
Version 4 - The External Arrays - Menu and Item Parameters
  NN4 IE4+
Our discussion of the Version 4 menu-building arrays concludes with a detailed look at the elements that define menu items. New parameters expand the HM functionality beyond just cascading menus, allowing you to create:

  • labelled menus,
  • pop-up tool tips,
  • description boxes,
  • and much more

And, of course, we include an in-page tool to help you convert your old arrays by simple cut-and-paste!

[37] Building A Great DHTML Chaser  NN4 IE4+
A new DHTML Lab writer, Aaron Boodman, begins a series devoted to DHTML in the Real World. In this new thread, authors will share their DHTML implementation experiences with us.
Aaron created a cross-browser DHTML-intensive application for GreatEqualizer.com, from which he has extracted three techniques to discuss in detail. In this column, he demonstrates his elegant script for creating a DHTML Chaser, whose position persists in your browser window during scrolling. How it achieves the persistence is what makes Aaron's script unique!

[36] HierMenus Go Forth, II:
Version 4 - The External Arrays - New Menu Tree Parameters
  NN4 IE4+
We continue our discussion of the Version 4 menu-building arrays, with a look at the new additional Tree-Specific Overhead Parameters. Learn how to create permanent top-level menus, horizontal menus, toolbars, and more using HM. Solutions provided for form element persistence and associated image rollovers. Include "more" images optionally or position child menus directly under top-level horizontal menus. Will the new features never cease!
Included at no extra cost is an in-page tool to help you convert your old arrays by simple cut-and-paste!

[35] HierMenus Go Forth, I:
Version 4 - The External Arrays
  NN4 IE4+
The much-heralded and long-awaited Version 4 of the Hierarchical Menu Script is finally here. Well, almost. In the first of a series of articles, we look at the new Version 4 menu-creating arrays. No prior knowledge of the script is necessary as we begin a complete discussion of a major version. Hopefully, it's been worth the wait!

[34] Speeding Up Frame Rates For DHTML Animation in Win98  IE4+ NN4
a.k.a. Everything you always wanted to know about setTimeout() and setInterval() but were afraid to test.
More on DHTML Animations and trying to overcome timer and inherent OS clock problems. This time guest writer Mark Szlazak provides us with extensive test results, and several ingenious workarounds.

[33] Array Power, Part III  IE4+ NN4 
The final installment of our three-part series. We take a detailed look at the most powerful and complex array method available in the Navigator JavaScript core language and the ECMAScript Version 3 specification but missing from Internet Explorer: splice(). This versatile method is a must for Web Applications, and to facilitate its use, along with all the other prototyped methods, we create a use-everywhere external JS file, arrayprototype.js, that includes all the code we have created in this series.

[32] Array Power, Part II  IE4+ NN4 
In the second of our three-part series, we look at two more methods available in the Navigator JavaScript core language and the ECMAScript Version 3 specification but missing from Internet Explorer: push() and pop(). We make them available for Explorer using the Array.prototype object, but also standardize the behavior of push() across all Navigator versions, given that JavaScript 1.2 and JavaScript 1.3 define the method in different ways.

[31] Array Power, Part I  IE4+ NN4 
The Navigator JavaScript core language and the ECMAScript Version 3 specification contain several, powerful methods for the Array object not found in Explorer's JScript engine. These methods are essential in the creation of Web Applications and so far have been little used given the lack of cross-browser support. In the first of a three-parter, we create new array methods for Explorer using the Array.prototype object, allowing authors to finally use them in cross-browser applications.

[30] Identifying Installed Fonts  IE4+ NN4 
Be kind to your server, load pages faster for the user and give your Web applications a sleeker, more professional look. Use dingbat fonts already installed on user systems in place of downloaded images. In this tutorial, we use cross-browser and cross-platform DHTML to identify installed fonts, with a single function. Your users will thank you.

[29] DHTML Application Toolbars  IE4+ 
More on building interfaces for web applications.
Using techniques discussed in previous columns, we build application-like toolbars for Internet Explorer. Both text-only and more complex text and image toolbars complete with keyboard access are discussed.

[28] Smooth animation using DHTML  NN4 IE4+
Do your DHTML animations look different on different browsers and platforms? Have you ever wanted to sit down and create benchmark tests and run them on many different browser-system configurations?
Well, don't! Morten Wang has done it for us.
DHTML Lab welcomes its first guest writer in the first of a series of articles devoted to comprehensive DHTML animation tests.

[27] Dynamic Headline Fader, Version 3.0  NN4 IE4+
The Fader keeps coming back. New features include no-fade (flip) and multiple headline display options.
The many other modifications in this version make it compatible with more browser versions than you can fade/flip a stick at, with special attention to old-but-still-used browsers like IEmac 4.0 and Navigator 4.0 - 4.03.

[26] IE4 / IE5 Rendering Differences  IE4+
Did your pages look fine in Explorer 4, but a little weird in Explorer 5?
Find out why in our first look at rendering differences between browser versions.
Live examples, screenshots, explanations and proposed solutions to each are thrown in at no extra cost.

[25] Dynamic Headline Fader, Version 2.0  IE4+ NN4
   - Addendum I (v2.01)
Upgrade your Dynamic Headline Fader to this new release. Version 2.01 improvements include:
- absolute and relative positioning
- more parameter variables for better styling
- dynamic class creation and styling for both browsers
- optional replay upon user double click
- a more elegant script
- IE4mac support
- NS4mac support
- workaround for broken filters in IE
- and more

[24] Accessing the User-Defined System Colors, Part I  IE4+ 
Introducing a new thread at DHTML Lab: Creating Web Applications.
The first step in the programmatic creation of web pages, that look and act like OS applications, is the correct use of the user-defined system colors. We'll look at how each of these colors is set by the user, what effect they have on browser rendering, and how they are reflected into Explorer DHTML. Then we'll create draggable OS-like popup dialogs, complete with active and inactive colored titlebars, that adapt to any color scheme the user has chosen.

[23] Scrollbars for Navigator 4 Positioned Elements (LAYERs), Part I  NN4

Add vertical OS-type scrollbars to your Navigator 4 positioned elements. Learn to script all scrollbar events in the first of two columns devoted to giving your scroll controls a professional look and feel.

Full arrow button, thumb dragging and elevator bar functionality included at no extra cost.

[22] JavaScript Enhancement with VBScript  NN4 IE4+
Learn how to combine VBScript with JavaScript in Explorer, without sacrificing functionality in other browsers. We show how to call VBScript functions from JavaScript, and introduce a customizable cross-browser dialog box library to finally replace the droll alert(), confirm(), and prompt() dialogs.
  Related Dynomat Tool: Cross-Browser JavaScript Dialogs

[21] Hierarchical Menus, Version 3  NN4 IE4+  
   - Addendum (v3.01)
   - Addendum II (v3.02)
   - Addendum III (v3.03)
   - Addendum IV (v3.04)
   - Addendum V (v3.05)
   - Addendum VI (v3.06)
   - Addendum VII (v3.07)
   - Addendum VIII (v3.08)
   - Addendum VIIIa (v3.08a)
   - Addendum IX (v3.09)
   - Addendum X (v3.10)
   - Addendum X-1 (v3.10.1)
   - Addendum X-2 (v3.10.2)

[20] Hierarchical Menus, Version 2  NN4 IE4+  
   - Addendum (v2.1)

[19] Cross-Browser Visibility Transitions   NN4 IE4+
Hide or show your positioned elements with flair. Using the Explorer 4 Reveal Transition Filters and Navigator 4 clipping, we create a cross-browser transition library. Cinematic effects like wipe, box-in and split-screen transitions can be applied to any positioned element with a simple function call to a re-usable external JavaScript file.

[18] Hierarchical Menus in Frames   NN4 IE4+  

[17] Dynamic Synchronized Frames  NN4 IE4+
Frames as static navigational tools are dying. Add new life to the frameset concept with dynamic synchronized frames. Parallel frames scroll in tandem, allowing for the publication of large spreadsheets with row and column headers kept aligned at all times. Track longitude on maps without the use of atomic clocks. Keep your table headers on-screen. Any large columnar page can now make it to the Web intact, so paste those pieces back together, and learn to love frames all over again.

[16] Dynamic Page Segments  NN4 IE4+
Minimize page scrolling, do away with redundant framesets and organize your already existing pages into popup page segments. This fully cross-browser and backward-compatible technique can give your existing page a new look in minutes, or allow you to organize your lists into popup filecards.

[15] Cross-Browser Hierarchical Menus  NN4 IE4+  

[14] Hierarchical Menus, Part I - Concepts/NN4  NN4  

[13] Dynamic Headline Fader  NN4 IE4+
Use transitions to display live, linked, fading headlines in the same page space. This technique includes our first look at transition filters, to be included in CSS2. Our cut-and-paste code grabs current headlines from a simple updatable, text file, and creates a customizable fader anywhere in your page flow for both DHTML browsers, with alternate content for older browsers.

[12] Expandable/Collapsable Outlines  NN4 IE4+
Maximize the use of precious page real estate with on-demand expandable outlines. Our cross-browser technique allows outlines anywhere in your page flow, without the use of frames or dedicated pages. Learn how the two browsers handle the CSS display property, and how to use the powerful Explorer tags() and item() methods.
Experience expandable/collapsable outlines on our links page.

[11] DHTML Lab Jigsaw Puzzle, Part IV - Cross-Browser  NN4 IE4+
Jigsaw puzzle mania continues with a streamlined, full-featured cross-browser version.

[10] DHTML Lab Jigsaw Puzzle, Part III - NN4  NN4
Our popular single-image, low-bandwidth, jigsaw puzzle, adapted in its entirety for Navigator 4. Using a new set of images, we discuss the complete code necessary for creating, breaking, solving and customizing the puzzle.

[09] DHTML Lab Jigsaw Puzzle, Part II - IE4+ (cont'd)  IE4+
Continuing our series on puzzles, we complete our creation of a low-bandwidth, customizable jigsaw puzzle for Explorer 4. We discuss solving, both manual and automatic, adding a control panel and changing puzzle images and piece dimensions on-the-fly.

[08] DHTML Lab Jigsaw Puzzle, Part I - Concepts/IE4+  IE4+
Just for fun, a fully customizable low-bandwidth jigsaw puzzle. Any image, local or on the web can be loaded into the puzzle template and split into a user-defined number of pieces. Using positioned elements, clipping, and drag & drop, the DHTML Lab Jigsaw Puzzle demonstrates the steps necessary in the creation of dynamic applications. We start with an Explorer 4 version.

[07] Drag & Drop, Part II - Explorer 4/Cross-browser  NN4 IE4+
Concluding our two-part series on drag and drop, we look at dragging in Explorer 4. Combined with the Navigator script from Part I, we create a cross-browser version. Using this technique, you can add drag & drop capabilities to any page with a universally-accessible external file.

[06] Drag & Drop, Part I - Concepts/Navigator 4  NN4
In the first of a two-part series, we examine the concept of dragging a CSS-positioned element on your page. A technique useful in such diverse applications as games, education and e-commerce, drag & drop is discussed in the context of the two browsers separately. This column, we look at creating drag code for Navigator 4.

[05] Dynamic Content in Internet Explorer 4+  NN4 IE4+
IE4 introduces four new object properties and two new methods for dynamically updating an already-displayed page. Any element's contained HTML can be retrieved, modified, or deleted. Our live in-page examples demonstrate all three of these options. We conclude with a script for a dynamic client-side Q&A quiz.

[04] Database Front End  NN4 IE4+
Using JavaScript multi-dimensional arrays, CSS-positioned updatable elements and image swapping, we build a simple front end for a client-side database. An example of combining techniques to create a new dynamic application.

[03] Dynamic Images  NN4 IE4+
Tired of supplying thumbnail images to your readers to avoid long pages or server connections? With DHTML, your images can zoom out in-page. We build a cross-browser backward-compatible application for creating zoomable images that can be appended to all existing documents with just one line! The step-by-step coding will also allow you to experience first-hand the procedures used in creatingcross-browser/cross-version dynamic pages.

[02] Low Bandwidth Rollovers  NN4 IE4+
With Dynamic HTML we no longer have to rely on single image swapping for menu rollover effects. Combining Cascading Style Sheet positioning and clipping with JavaScript scripting we can load multiple frames in one image and selectively display any frame. Learn to create lightweight dynamic menus, with techniques that can be applied to sophisticated graphic animations.

[01] New JavaScript Event Handlers  NN4 IE4+
Introduce yourself to new, dynamic events. This column, we discuss how to use the new onMouseDown and onMouseUp event handlers to create custom dynamic link buttons with a Rollover-Click effect.

Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: July 23, 1997
Revised: June 17, 2004

URL: http://www.webreference.com/dhtml/