Archive for the 'Code' Category

Authoring accessible Web content

Monday, December 4th, 2006

This began as a post for the JAG internal wiki. After I’d gone to all the trouble of looking everything up and spelling it right, I thought it would be worthwhile to mirror the post here.

Here are a couple of basic pointers for building Acessible Web sites. I generally am interested in Accessibility, because it’s part of the Semantic Web vision. When I come across a relevant article, I tag it with accessibility. But I became especially interested after the National Federation for the Blind sued Target, basically because Target refused to add ALT tags to their images.

In no particular order, here’s list of core techniques:

Writing JavaScript

Monday, December 4th, 2006

This began as a post for the JAG internal wiki. But I wound up looking up a lot of good links, so I thought I’d mirror the post here in order to keep those links handy.

When I want to implement a requirement, such as a business rule or DHTML behavior in JavaScript, sometimes I find that I don’t know how to implement that behavior. Sometimes this might be because the requirement is complex, as in the case of DHTML animation. Or the algorithm I am searching for may just be obscure, such as a unique ID generator that uses a closure instead of a global counter.

When I do not immediately know how to implement a requirement, I usually need that information in a hurry. I do not have time to make extensive flow charts, or to research the deep features of JavaScript. What I want is to find someone else who has already implemented something ‘’similar'’ to the requirement. And I want to see their source code.

Event Selectors JavaScript/Ajax library at Encytemedia — Design and development crossfade

Monday, November 20th, 2006

Another js library that I’d like to use some time.

"event:Selectors allow you to apply an event such as mouseover, mouseout, click, et al using a CSS style syntax."

Choose a value with two select menus

Monday, November 6th, 2006

Intermediate Web developers often stumble over the problem of getting select menus to talk to each other. One common problem is the situation where the options that are in select menu B, are dependent upon the option that has been selected in menu A.

Here is one solution to a somewhat different problem, that also involves getting two select menus to cooperate.

The problem is that we have two menus, one of which contains the first part of a choice, and the other contains the second part. Once a selection has been made, how do we collect both parts of the choice; and how do we decide what that particular choice means, in the context of the application? Here is how I would probably implement that.

Choose a value with two select menus

Neat little example of a useful JavaScript closure

Monday, September 11th, 2006

I just picked up the 5th edition of David Flanagan’s JavaScript, the Definitive Guide. I find it amusing that that book is the only JavaScript book officially recommended at comp.lang.javascript.

Closures are a powerful feature of JavaScript. However it’s often hard to explain in a few words, just what is useful about closures. Well, here on page 131 of the Rhino book, is the recipe for a unique ID generator that doesn’t require a global counter.

One thing that I personally enjoy about the Flanagan book is that he says things like “don’t pollute the global namespace.” :) This technique does not pollute the global namespace.

var uid = (
    var id=0;
    return function(){
      return id++ ;
//then just say:

var uid = (function(){var id=0; return function(){return id++ ;};})();

Why do HTML elements have different widths in MSIE than they do in Firefox?

Thursday, August 31st, 2006

Why do HTML elements have different widths in MSIE than they do in Firefox? The answer is that IE uses a different box model than Firefox. What is the box model?

I looked in Wikipedia for the answer, and this is what I learned:

The box model allows block-level elements - such as paragraphs and block-quotations - to be drawn with padding, borders, and margins.

As defined by those CSS specifications, when a width is explicitly specified for any block-level element it should determine only the width of the content within the box, then the padding, borders and margins added afterwards. Internet Explorer (prior to version 6) instead includes the padding and borders within the specified width, resulting in a narrower box when displayed.

[PPK favors the IE box model, and says,] “Web designers who create boxes for holding content care about the *visible* width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.”

[Use of the ie box model] can make division of interior space (as one might do for colums in a layout) more difficult using the IE box model.

…if there are two boxes, one inside the other, and the inner box describes its width as 50%, it will be calculated based on the width of the outer box that is reported by the current box model. Since the inner box must exist within the border and padding of the outer box, using the IE box model, the inner box’s 50% width will take up more than 50% of the content space available to it.

Internet Explorer box model bug - Wikipedia, the free encyclopedia

Hover Detail

Sunday, June 11th, 2006

Tonight I added a hover detail to the Flickr thumbnails on the right. If you mouse over a thumbnail, you can see a large version of the photo. If you click on the large photo, its Flickr page loads in a new window.

I’m using the MTFlickrPhotos plugin to generate thumbnails, and to write the HTML for the large images into a hidden DIV. I’d like to load the large images asnchronously, but I need to work out how to request images. So far I’ve just used Ajax.Updater to preload HTML.

Oh yes, did I mention that the hover details are completely hosed in IE?

given a set of id3v1 tags, infer the values of blank ARTIST and TITLE fields with Perl

Thursday, June 8th, 2006

In 2001, I wrote a Perl script to put id3v1 tags into mp3 files that didn’t have any tag information; using MP3::Info to get and set tag information.

Explicitly Trigger A JavaScript Event Handler

Wednesday, June 7th, 2006

<script type="text/javascript">
function foo(){ alert("Hello World") }
<div id="bar" onclick="foo();">click me to see an alert</div>
<div onclick = "document.getElementById('bar').onclick()" > click me to do the same thing </div>

This is trivial, but the subject came up at work today; and I wound up making a little demo, which I’ll now post.

Explicitly Trigger An Event Handler in JavaScript

Position an element above the fold dynamically with JavaScript

Monday, June 5th, 2006

I put together some JavaScript to keep an element above the fold.

This was written at the last minute for the Barney’s New York launch; to spruce up the admin tool for their new web site. I only had time to test it in IE6 and Firefox 1.x, but I believe it works in Safari as well. Additionally, I do know that this bit of code has been in use internally at Barney’s for a few months now without any complaints coming back. So it may work well on older browsers too; although I believe there are compatibility issues with document.body.clientHeight in some browsers.