Web Development Lab

Putting the Pieces Together.

This section is inspired by feedback both through emails from site visitors and clients. This seems like the best place to put it until the site is redesigned—not planned at this time.

Any and all constructive feedback is appreciated..

Articles on Writing Better Code.

  Remote Scripting, XML-RPC, and AJAX

AJAX Quick Tip: AJAX in a Nutshell

AJAX Quick Tip: Reusing an xmlHttpRequest(XHR) Object

AJAX Quick Tip: Threaded/Concurrent Ajax Requests

Remote Scripting Article: Remote Scripting Overview on technology to enable communication between a Web page and the server.

AJAX How-To: Remote scripting with a hidden iframe

AJAX How-To: RPCs using the XMLHttprequest object.

  Javascript Solutions

JavaScript How-To: Make adding or removing event handlers across browser brands and legacy code easier with this Add/Remove Event Script.

JavaScript How-To: Improve Web 2.0 applications and DHTML by Adding Methods to HTMLElement.prototype (Firefox, et al and IE).

JavaScript How-To: Make common date operations easier by adding these extended date methods to the JavaScript Date object.

JavaScript Demo: Calculator that can do simple arithmetic with basic functions. Shows use of Math object.

JavaScript Quick Tip: Stop image flicker: Cach Background Images in IE 6

JavaScript Quick Tip: Roll your own document.getElementsByclassName method.

JavaScript Quick Tip: Code to overcome a browser's same-origin security policy.

JavaScript How-To: JavaScript solution to position element at the right edge of a left justified container.

JavaScript How-To: A collection of useful regular expressions illustrating their use in script as a solution to common tasks.

JavaScript How-To: browser and operating system detection has source code for three different solutions you can take for your projects.

  Dynamic HTML (DHTML)

DHTML quick tip: Click Images/Image Changes in response to a mouse click on the image or a button. It's basic, even old fashion but very compatible.

DHTML How-To: Create Mouse Over effects

DHTML How-To: Create Dynamic Tool Tips with Images that display on mouse rollovers.

DHTML How-To: Dynamically Load Tables.

DHTML How-To: Dynamically Sort Tables.

DHTML How-To: Table cell rollover effects.

DHTML How-To: Table row rollover effects.

DHTML How-To: Table Column Rollover effects.

DHTML How-To: Simultaneous Table Column and Row Highlighting effects.

DHTML Demo: A basic Mouse Rollover Exercise that changes link buttons. Doesn't use CSS.

DHTML Demo: A game: an animated Atom with 4 electrons spinning around a nucleus to shot.

  Cascading Style Sheets (CSS)

CSS How-To: Position: Fixed; hack for IE 6.x and 5.x.

CSS How-To: Flush right positioning of typographic elements at the end of line or end of paragraph.

CSS Quick Tip: Extend Hover in IE using CSS to any element you want not just links.

CSS Quick Tip: Drop Shadows for headings or single line block elements.

CSS Quick Tip: Cross browser coding for list indentation.

  HTML and XHTML

(X)HTML Basics: Image map click on the colored shapes. Don't forget the blue area!

(X)HTML Basics: Frame with a row on top and two columns below.

(X)HTML Basics: Frame with the orientation opposite the above entry. It has a full length column on the right and two rows on the left.

  Tools

Have a question on handling key events and the key codes they generate. Here is a quick look at the codes generated by the three key events: keydown, keypress, and keyup.

Trying to get the same appearence across browsers can be difficult. Here is a quick study on fonts size.

• Absolute Font Sizes
• Relative Font Sizes

Trouble with positioning objects? This page reports the numeric properties reported by the browser. It is the start of pages to test properties available and their values of different browser.

Browser safe color chart

50% gif to simulate opacity just save the image to use.