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.

Javascript / DHTML Calendar Example

An example which builds a cool dynamic html calendar using the Javascript date object. It uses the MSIE 5.0+ DOM to create some MOUSEOVER/MOUSEOUT effects. Sorry for the proprietary DOM usage... at some point I'll rewrite this example using DOM compliant code. (Note: at this point 90+% of users can run this example despite the proprietary nature of the code.)

syntax:

see example

links:
/examples/javascript_dhtml_calendar.html

Javascript Date Object

Quick reference of Javascript DATE object.

syntax:

Include in <script type="text/javascript"> section. var myDate = new Date(); myDate.property = value; myDate.method(); </script>

links:

Javascript Expose Library

An indispensable part of any Javascript library. This library exposes DOM collections, properties, and methods. Just call the method and pass it a reference to the object your want exposed.

syntax:

See example

links:
/examples/javascript_show_items.html
http://esqsoft.com/tools/expose.js (Remote expose library, use it from the web, actively maintained)

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.

syntax:

See example

links:
/examples/javascript_scrolling_menu.html

Drop Menu

An example that uses DHTML, Javascript, and CSS to build a menu which will open and close when clicked. This example is still being developed. It also illustrates one of the biggest frustrations about Netscape 4.x namely that it's DOM (Document Object Model) is far less useful than IE's DOM.

syntax:

see example

links:
/examples/onclick_drop_menu.html

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.

syntax:

see example

links:
/mercury/mouseover_swaps.html
/fiesta1/mouseover_swaps.html

Javascript Letter WOW Example

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

syntax:

see example

links:
http://bilbo.eshire.net

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

syntax:

see example

links:
examples/css_button_beautification.html

More...