"How To" - Dynamic HTML and JavaScript Examples

JavaScript and Flash Games

JavaScript is great for traditional client-side validation and dynamic behaviors, it's also great for less conventional uses such as game programming, on the web. Flash, of course has become popular for writing web games too, but some of the cooler aspects involve supporting customizations, such as the jigsaw puzzle examples below.

links:

http://hangman.bappy.com   Website Hangman (Customizable)
http://www.hosting411.info/games/spackman/spackman.html   Arcade Game
http://bilbo.eshire.net/magic-square.htm   Puzzle Square
http://www.mavenspun.com/jigsaw-puzzles/index.htm   JigSaw Puzzles

Dynamic Pop Up Example

This example pre-loads an image, determines it's width and height, and creates (or resizes) a pop up child window and renders the image in that child.

syntax:

Include in <head> section (or in the <body> section before calling properties or methods of the popup script.)

links:
/examples/dynamic_pop_up_window.html

CSS Interface

Cascading Style Sheets are very powerful. By using them to implement site designs and interface you can save serious time. When implemented externally and called in through the <LINK> tag simple changes can have wide impact.

syntax:

Include in <head> section <style type="text/css"> className,tagName{ rule: value; }</style> <link rel="stylesheet" type="text/css" href="style.css"> Include within specific HTML tags <div class="className"></div> (when a class is defined elsewhere) <span style="rule:value;"></span>

links:
/interfaces/alien_interface
/interfaces/golden_ball_interface
/interfaces/woodland_interface
/interfaces/randy_blue

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.

syntax:

See example

links:
/examples/phone_number_field_autoforward.html

Window Onload and Resize Example

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

syntax:

Include in <body> tag <body onload="function();" onresize="function();"> or, document.body = function(){ /* stuff */ }; document.onresize = function(){ /* stuff */ };

links:
/examples/javascript_onresize.html

More...