Dynamic HTML (DHTML) Articles

Synopsis: What used to be true doesn't always remain true. One of the frequently asked JavaScript questions I used to be asked was: "How can I read and write to a text file?" - this article describes one answer based on Google Gears

Techniques: AIR, Google Gears, Google, AJAX, offline browser access

Synopsis: First steps into Ajax and GWT, describes whats been happening on irt.org recently and work done elsewhere

Techniques: Google, BT Beta, Eclipse, GWT, Betwixt, AJAX

Synopsis: Bouncing balls, geometry and physics - geometry and physics in JavaScript by Marco Brandizi

Techniques: Mathematics, geometry and physics, Dynamic HTML, layer, all

Synopsis: This article shows how to include a multi-dialogue form all on one page. The working example presented in this article will show how to split a form into several parts, but display each part form on the same page without requesting the next form from the server, and allow the user to go back and amend any of the previous forms without losing data already entered. This article will also introduce techniques for coping with the W3C Document Object Model (DOM) which is supported by both Internet Explorer and the upcoming release of Netscape Navigator. Written by Martin Webb.

Techniques: JavaScript, Form, document.layers, document.all, W3C DOM Level 1, W3C DOM Level2, DOM nodes, getElementById, removeChild(), hasChildNodes(), createRange(), selectNodeContents(), appendChild(), createContextualFragment(), innerHTML, document.write(), DOM ranges

Synopsis: This article, by Abby Beifeld, demonstrates how to get around the limitations of HTML selection lists by using HTML tables in their place. The article shows how to highlight table rows as they are selected and display the results for the selected item on the same page. The example provided will work in MSIE 4+ and Netscape 4.x browsers.

Techniques: DHTML, Dynamic HTML, JavaScript, tables, frames, highlighting rows in tables

Synopsis: As we have already seen in previous articles, scripting events can add a needed flair to your web pages without the hassle of using a plug-in. In this article, Ryan Detert will introduce you to you some of the brand-new Internet Explorer 5.0 specific drag-and-drop events.

Techniques: Drag and Drop, Internet Explorer 5.0, Event handlers, target and source events, ondragstart, ondrag, ondragenter, ondragover, ondrop, ondragleave, ondragend, clearData(), effectAllowed, dropEffect, setData(), getData()

Synopsis: This article, written by Martin Webb, will attempt to solve one of the most annoying problems that developers come across when developing with DHTML - How to place a dynamic (visible/invisible) layer relative to a table cell, or, how to position an absolute layer relatively.

Techniques: DIV, SPAN, DHTML, Layers, positioning, relative, absolute, events, visibility, offsetLeft, offsetTop, posLeft, posTop, left, top, width, clientWidth, clientHeight, scrollLeft, scrollTop

Synopsis: David Gardner discusses DHTML (Dynmaic HTML), and what it is. Showing how to manipulate images and layers on the screen in both Netscape Navigator and Internet Explorer

Techniques: DHTML, Nestcape Navigator 4, <layer>, Internet Explorer 4 and 5, Dynamic content, Dynamic movement, cross-browser DHTML, resources

Synopsis: This article, by Martin Webb, will demonstrate how to get the best image manipulation techniques out of each browser, using a mixture of Frames, Images, Floating Frames, Tables, Layers, JavaScript, DHTML and Microsoft's Multimedia effects. The completed working example of a slide puzzle presented at the end of the article will work on all Microsoft and Netscape browsers as far back as Netscape Navigator 2 and Microsoft Internet Explorer 3.

Techniques: JavaScript, images, frames, tables, IFRAME, DIV, SPAN, multimedia effects

Synopsis: Have you ever been to a site where words or sentences are composed of what appear to be two blended colors? Ever wondered how on earth to do it without using a fancy program or wracking your brain trying to figure out which letter should be what color to generate a nice blend in straight HTML coding? Well in this tutorial Ryan Detert plays around with some of the more advanced features that JavaScript offers, as well as some advanced techniques in order to get a nice shading effect.

Techniques: JavaScript, text, font, color, gradients, Gourad shading, hexidecimal numbers

Synopsis: Microsoft Internet Explorer 4.0 offers a powerful line of DHTML commands and functions. We previously covered many of the Visual Filter effects in our article, Testing IE4's Visual Filters. This time we return to the one main Visual Filter that we left out: Lights.

Techniques: Microsoft Internet Explorer, filters, multimedia, lights, visual effects,AddCone, AddPoint, ChangeColor, ChangeStrength, Clear, MoveLight

Synopsis: Written by Ben Allen - An article on using META tags to create a page transition

Techniques: MSIE4, HTML, Web, Page, META, tag, tags, site, transition, filters

Synopsis: The introduction of proprietary methodologies to induce "dynamic effects" in otherwise static documents have led to a state of chaos on the World-Wide Web (WWW). Pankaj Kamthan discusses the Document Object Model (DOM) Level 1, an application programming interface (API) for HTML and XML documents, which brings order by standardizing these efforts.

Techniques: DOM, Document Object Model, W3C Recommendation, Objects, node, child, descendent, element, leaf, method, parent, root node, sibling

Synopsis: Using DHTML, and specific to Windows users, Internet Explorer 4.0 offers developers access to a variety of filters that can be applied to images and text.

Techniques: Multimedia in Microsoft Internet Explorer, Visual Filters, Cascading Style Sheets, JavaScript, Alpha, Blur, Chroma, Drop Shadow, Flip Horizontal, Flip Vertical, Glow, Gray, Invert, Mask, Shadow, Wave, Xray, Transition Filters, Blend, Reveal, Page Transition Filters

Synopsis: Written by Ben Allen - An article on using DHTML to display a temporary page whilst an image - or the rest of the page continues to load.

Techniques: JavaScript, Client Side, DHTML, Dynamic, HTML, images, layers

Synopsis: Martin Webb describes how to use the positioning abililties of Dynamic HTML to create dynamic positioning, dynamic 'tooltips', placement, movement, and clipping effects

Techniques: DHTML, Dynamic HTML, JavaScript, Layers, DIV, SPAN, layers, clipping, style, all, zIndex

Synopsis: Dynamic HTML, or DHTML, promises many things to Web developers, but as we've learned from the past, DHTML has its limitations (namely, different versions of the Document Object Model). This series of articles explores the basic concepts of DHTML and provide you with examples to try out in both IE and Netscape 4.

Techniques: DHTML, Dynamic HTML, Objects, CSS, Cascading Style Sheets, Positioning, all object, layer object, layer, div, span, ilayer, innerText, outerText, innerHTML, outerHTML, styles, altering content, text rollovers

Synopsis: See how you can use JavaScript to enhance your Thank You page to let the user know that what they sent is exactly what you received.

Techniques: JavaScript, CGI, forms, thank you page

Synopsis: Keith Drakard takes you through the various steps needed to make a really fancy background fader.

Techniques: fancy, background, fader

Synopsis: Written by Michael Bednarek. It is possible to position elements on the page in both Microsoft and Netscape's implementation of Dynamic HTML. By dynamically altering the positions of elements over time, we can create simple animation effects. In this article you will learn how

Techniques: Microsoft Layers, Netscape Layers, DHMTL, DIV, Style, top, left, document.all, document.layers

Synopsis: Written by Paul Rundle. In this article we introduce you to layers compatible with both NN4 and MSIE4. You will learn how to show images and text using layers. Layers enable you to position text or pictures anywhere on the page. The layers shown in this example are compatible with both NN4 and MSIE4, however the section on altering the contents of layers is only suitable for MSIE4, as NN4 does not provide support for innerText, outerText, innerHTML and outerHTML layer properties.

Techniques: Microsoft Layers, DHMTL, DIV, Style Sheets, CSS, STYLE, absolute position, relative position, visibility, layer properties, innerText, outerText

Synopsis: Written by Josh Sahrmann. This article introduces the basic concepts about the LAYER tag introduced in Netscape Navigator 4. How to overlap text and images, and how to embed html from another document inside the current document.

Techniques: Netscape Layers, DHTML, LAYER, ILAYER, positioning layers, Layer source

Synopsis: Have you ever wanted to display a different page in another language for non-English visitors to your site? This article explains how, in Netscape Navigator 4 and Microsoft Internet Explorer 4, you can trap which language the visitors browser is using and then show them either a pre-translated version of your page. For Microsoft Internet Explorer 4 the article also shows how to use page transitions to disolve a document into the translated document.

Techniques: navigator, language, browserLanguage, substring, RevealTrans, transitions, setTimeout

Synopsis: Shows how to create a dynamic Family Tree that you can navigate around. It uses arrays to hold the data to be displayed in the Family Tree. The example included uses the British Royal Family to demonstrate the varying amounts of information that can be held.

Techniques: Frames, objects, document.open(), document.write(), document.close(), dates, age, date of birth, onMouseOver, onMouseOut, dynamic content, this

Synopsis: Illustrates a method for sorting tables dynamically. The first method uses the search property of the location object to reload the document, which is extended to demonstrate a generic solution for all tables. The second method shows the new data binding facility available in Microsoft Internet Explorer 4.

Techniques: Tables, sorting, data binding, search parameter, objects, sorting objects, text files

Synopsis: When you want users to be able to get a bird's-eye view of your site, a site map is the way to go. Its featured in Developer.com: http://www.developer.com

Techniques: In the words of Developer.com "This JavaScript solution is one of the fastest and easiest you'll find."