CSS, jQuery, JavaScript and Web Graphics Articles

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

• Fantastic Tabs: This X/HTML and CSS technique differentiates the current page or section from others in a navigation bar, using a single stylesheet and without requiring any server side code.
• 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.
• Strict CSS Form: A nicely styled form for Strict doctypes.

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.