Here are some examples of games in varying states of completion.
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.
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.
CSS LetterSpacing Effect + dynamic HTML.
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
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.
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...