« May 2006 | Main | July 2006 »

June 30, 2006

links for 2006-06-30

June 29, 2006

links for 2006-06-29

June 28, 2006

links for 2006-06-28

June 27, 2006

links for 2006-06-27

June 24, 2006

links for 2006-06-24

June 23, 2006

links for 2006-06-23

June 22, 2006

links for 2006-06-22

June 21, 2006

links for 2006-06-21

June 20, 2006

links for 2006-06-20

June 19, 2006

links for 2006-06-19

June 18, 2006

links for 2006-06-18

June 17, 2006

links for 2006-06-17

June 16, 2006

links for 2006-06-16

June 15, 2006

links for 2006-06-15

June 14, 2006

links for 2006-06-14

June 13, 2006

links for 2006-06-13

June 12, 2006

links for 2006-06-12

June 11, 2006

Hover Detail

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?

links for 2006-06-11

June 10, 2006

links for 2006-06-10

June 09, 2006

links for 2006-06-09

June 08, 2006

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

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.

Tom,, who runs (ran?) it as compiled MacPerl, calls it College Radio Loser because

using it is like sitting down at a college radio station with some fool that's bothered to learn all the names of the songs!

The most important assumption I made was that all mp3s are named

ARTIST - SONG.MP3
since I already had a procedure to handle and correct malformed mp3 names.

I still use loser to organize badly tagged tracks. Sometimes I'll delete the id3 tags first, then let the script rename them based on their file names. Five years later, I see a lot of things that could be different about this code. However I think I've never updated it because it continued to serve it's singular purpose so well.

links for 2006-06-08

June 07, 2006

Explicitly Trigger A JavaScript Event Handler


<script type="text/javascript">
function foo(){ alert("Hello World") }
</script>
<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

links for 2006-06-07

June 06, 2006

Set a nested DOM property with Javascript, using square bracket notation

In the comp.lang.javascript Javascript Best Practices document, I came across an interesting discussion of the reasons for preferring square bracket notation to eval().

The consensus seems to be that eval is evil, and that "if it exists in your page, there is almost always a more correct way to accomplish what you are doing."

So instead of

eval('document.body.style'+propertyName+'='+myValue)
I could write
document.body.style[propertyName]=myValue
That is certainly cleaner, to my eye. And the bracketed syntax is Perl-ish to boot :)

But what if I want to set the value of an arbitrary property? For instance, I have a function

setProp(El, propertyName, myValue)
that is called like this:
setProp('document', 'body.style.backgroundColor', 'silver')
That sets the value of the property document.body.style.backgroundColor to 'silver'.

Likewise, if I pass different parameters:

setProp('someDiv', 'style.top', '55px')
will set the appropriate property value in the element named someDiv.

Using eval(), the body of this function could be one line:

function setProp(El, propertyName, myValue) {
    eval(El+'.'+propertyName+'='+myValue);
}

This looks convenient on paper. The thing is that each call to eval() starts a new compiler. Which is not very convenient for my users.

So I came up with another way to do the same thing, without using eval. In the process I got to apply some very simple ideas from SICP, such as storing a reference to a method in a variable. Another Lisp-ish practice that benefitted me was transforming my property string into a list.

function setNestedProperty(El, propertyName, myValue){ 
  var thePointer = El;
  for (var i=0; i < propertyName.length; i++){
    if (i == (propertyName.length - 1)){
      thePointer[propertyName[i]] = myValue;
      return;
    }
    thePointer = thePointer[propertyName[i]];
  }
}
which is called this way:

setNestedProperty('document', ['body', 'style', 'backgroundColor'], 'silver');

setNestedProperty('someDiv', ['style', 'top'], '55px');

Here is a working example of setting a nested DOM property with square bracket notation.

links for 2006-06-06

June 05, 2006

Position an element above the fold dynamically with JavaScript

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.

Here's the pertinent bit of the example:

function aboveTheFold (someId, elTop, elHeight) {
  if (document.body.clientHeight < (elTop + elHeight)) {
    positionElOnscreen(someId, elTop, elHeight);
  }
}

function positionElOnscreen(someId, elTop, elHeight) {
  var topz= elTop;
  var heightz= elHeight;
  topz = (document.body.clientHeight - (heightz + 20));
  document.getElementById(someId).style.top = topz;
}

I call aboveTheFold from the event handler that "shows" my popup.

NOTE: The "extra" variables (topz, heightz) are a necessary workaround, see http://www.quirksmode.org/js/cross_dhtml.html.

June 04, 2006

links for 2006-06-04

June 03, 2006

links for 2006-06-03

June 02, 2006

links for 2006-06-02

June 01, 2006

links for 2006-06-01