Google

"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 and DHTML libraries and effects mostly. 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, I've tried to rewrite examples to embrace standards which have become better supported by browsers. 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. If you're feeling benevolent, a link with some appropriate keywords is always appreciated. If your application has good commercial potential, a donation would be appreciated as well. Regardless, very best wishes for your success. - Thomas Ballard (contact info)

Looking for a place to host your project or client? Find web hosting and information at www.hosting411.info.
Looking for stuff for your website? Find web design, templates, games and more at www.ESQsoft.com.
More resources on our sitemap.

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...