This page contains a collection of detailed articles, walkthroughs, and how to guides relating to X/HTML, CSS, JavaScript, web images and graphics, Photoshop and Fireworks.
CSS
- Strict CSS Form: This article demonstrates creating a nicely styled and XHTML Strict validating form.
- Simple CSS Form: This article demonstrates how to CSS to display an attractive XHTML form. This table-free form is simple to update, and highly accessible.
- Fancy CSS Box: How to style an expandable box using sliding background images and CSS.
- Fancy HRs: How to use CSS to style HRs (header rules) with a custom image. Includes solutions for Internet Explorer 6 and 7.
- Clearfix, with an IE7 solution: A robust method to contain floated elements that escape out of their containers.
- Equal Height CSS Boxes: A solution for when the web design calls for multiple independent content boxes to have the same height.
- CSS Width Specifications: Width can only be specified on block level elements, not inline level elements.
Web Graphics (Photoshop & Fireworks)
- IE6 (and lower) .PNG Experiments: Experiments using the AlphaImageLoader and its derived solutions to resolve the grey backgrounds that occur when using .PNGs that contain alpha transparency pixels in Internet Explorer 6 and lower.
- Alpha Transparent .PNGs in IE6 Using Fireworks: A demonstration and walkthrough of using Fireworks to edit existing .PNG images to prevent the grey background that occurs when viewing .PNGs that contain alpha transparency pixels in Internet Explorer 6.
- Photoshop .PNGs into .GIFs: This Photoshop walkthough will show you how to use actions to create new anti-aliased .GIF images from your .PNGs, and how to add the code to your web pages to show the new .GIFs to Internet Explorer 6.
jQuery
- jQuery - Hide Extra List Items: This is a handy way to tidy up long lists. This will hide extra items in a list, and add "show more" and "show fewer" links to show and hide the extra items in the list.
- jQuery - Smooth Animations (or, fixing a jumpy animation): For months, I had been unable to solve a problem with jQuery's animation engine: after adding style declarations to elements, the animation would become "jumpy". Demonstrated here is the solution I found, which essentially stores the heights of animating elements before they are hidden, and then re-applies those heights just before starting the animations.
- jQuery - Vertical Show/Hide using slideToggle(): This article demonstrates using the slideToggle() function to show and hide items in a definition list.
- jQuery - Tablesorter Plug-In: This article demonstrates table functionality added by jQuery's Tablesorter plug-in. Includes sorting, and dynamic alternate row coloring.
- jQuery - Core Table Functions: A demonstration of functions related to tables that are included with the core jQuery library. Includes alternate row coloring and highlighting the row the visitor's mouse is hovering over.
JavaScript
- Simple This: A demonstration of how JavaScript's "this" keyword can be used to quickly change an image's properties.
- JavaScript Sortable Table: This article pulls together a couple of JavaScript functions to add sorting functionality to an HTML table. This article dates from before I was familiar with jQuery; these days I would use the jQuery library and the Tablesorter Plug-in to get the job done.
- JavaScript - Random Quote: A friend asked me to write a JavaScript to randomly display one of several quotes from the movie Jaws. So I whipped up this little script up using an array and the Math library.
If you have any questions or comments about these articles, please Contact Me.