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)
Here is an example using Javascript to create a cool hangman game.
While Javascript is by no means an optimal game programming language,
it can be combined with HTML and CSS to create some interesting games to
put on your website. (No downloading necessary, a big advantage for
non administrator users and folks pressed for time.)
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>
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.
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.)
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.
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.
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.
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.
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...
http://hangman.bappy.com