"How To" - Dynamic HTML and JavaScript Examples

Welcome -- What is this place? The content on this site has been developing since around 1998. It's a collection of Javascript, HTML, and CSS effects and libraries. Since these have developed over many years, some are pretty embarrassing to look back on, having been so heavily influenced by the disparaging days of the browser wars. As my skills have matured over the years, and as I've revisited examples to use them in newer projects, I've tried to rewrite examples to embrace standards which have thankfully finally become better supported by browsers.

Another aspect of this site that may not be obvious is that this is one of the few remaining examples of "WRAP", a server-side templating language built for Community Architect to support massive scaling to support web "communities". It's actually still a pretty cool little language.

You are free to use or modify examples to suit your needs. If you find anything useful, drop me a line, I'd love to hear about your experience, and any suggestions for simplification, improvements, or even development philosophy.

Using Javascript To Create Games

It may be a little unconventional, but JavaScript is actually really fun to use to write games that will run in a web browser without plugins or special software. Here are some examples of games in varying states of completion. Take a moment to view the source to see how to do the animation, board building, game loop, and other game programming tricks using JavaScript to create and drive HTML and CSS.

Draw Hexagonal Shapes with HTML5 and JavaScript

HTML5 introduces the canvas tag which makes drawing a snap. Here are two examples showing how to draw a hexagon, one using the HTML5 canvas and the other--a technique involving a grid.

Phone Number Auto Focus Example

A client was using customer phone numbers to look up account info. They wanted a form which would automatically move the focus to the next control when the customer entered the expected number of digits into each field, ending on the submit button. This code does that.

Building Dynamic User Interfaces from JSON

You don't need to resort to a framework to build UI for AJAX applications on the web. Here are some examples showing how to construct user interfaces which consume JSON. In the case of building a data table dynamically, the JSON can allow your data to specify the columns and data and make your code reusable without needing to modify it each time you want to build a new variant. Similarly, plotting data onto a graph using HTML5 can also be done dynamically, in a reusable fashion.

AJAX UI Widgets

Well, technically the first example doesn't require AJAX...but it's a feature that's often used with AJAX applications to visually acknowledge a user's input during a loading wait state.

Javascript / DHTML Calendar Example

This example builds a date widget/calendar using Javascript date object, some CSS, and HTML.

Expose DOM Elements

A quick way to introspect an HTML/DOM object and enumerate it's properties and their actual instantiated values. I use this frequently in IE where the Firebug plug-in popular in FF isn't available.

Javascript Letter WOW Example

CSS LetterSpacing Effect + dynamic HTML. The effect uses a Javascript timer to expand and contract the space between letters.

Modal Exit Dialog Example

This example shows how to utilize functionality in the browser to allow a user to save their work before they exit a page accidentally.

Window Onload and Resize Example

An example using Javascript to capture an onload or onresize event and cause an action to be triggered.

Scrolling Menu

An example that uses DHTML, Javascript, and CSS to build a responsive HTML scrolling menu. The example works for Internet Explorer 4 and higher. This example demonstrates how to use events with table elements and how to use DIV to render responsive hot zones on menu items which can receive and act on a variety of events.

Dynamic Arrays

An example that uses JavaScript to create dynamic arrays which associate an image and a url to link to if the image is clicked. When one of the images is mousedover a larger version of the number is swapped in a central graphic. With this method a dynamic image swap can be done (with pre-cached images) and dyamic links can be associated with the images. A nifty example and done in cool colors.

CSS Form Input and Button Style Beautification

These examples were created to illustrate the ability of CSS to influence the appearance of HTML FORM controls. This was an effort to convince the developers at Freeservers.com to use HTML buttons instead of the images in their interface for contextual HELP.

One serious disadvantage to using images in this context is they require an additional trip to the server to grab the image, or many additional trips if you have browser caching turned off as most developers do. Worse, if you want to add dynamic behaviors such as a highlight when the mouse moves over the buttons, or to simulate the button depressing when a click occurs on it, these are done with image swaps which require more trips to the server... and at the worst possible time from an animation perspective. This process can be excrutiating when you are expecting instantaneous interactions on the part of the interface. So the obvious solution is to use HTML FORM controls in the interface instead of a graphic because they can react instantly to user interaction. The problem was that pre-CSS you couldn't "beautify" the ugly gray buttons. This is a problem no longer...