I was playing around with jquery and I wanted to see if it was possible to generate a cheat sheet of all the fonts on your system. Its also a good run through of how to load a SWF with a callback.

View a demo

The steps I used to generate this are:

• Load SWF
• Javascript calls to Actionscript fonts() method via ExternalInterface
• Get the list of system fonts in Flash via Font.enumerateFonts(true)
• Curse Flash for giving you a list of font names, where half of them are garbage.
• For each font name, in javascript, create a test which adds a DOM element temporarily with a fallback font family set. For example, font-family: 'Apple Garamond Pro', 'Times New Roman';, where Times New Roman is your fallback.
• Then check the actual width (via offsetWidth). If it does not match the offsetWidth of the fallback font, then we know it rendered ok. (The original idea is from http://www.lalit.org/lab/javascript-css-font-detect)

The only caveat is, if the actual font width and the fallback font width do match, then you would have a false negative. So its not bulletproof.

The actionscript to enumerate the fonts and call back out is pretty simple:

Expose the method in the constructor using ExternalInterface:

FontList.as

I used swfobject to load the SWF. Also be sure to enable allowScriptAccess.

The javascript to test the fonts is at: font-detect.js

You can use it by including:

In the end, I don’t think this is useful in practice, but I thought I would share anyway. Its on github too.

Updated: Now uses call straight to actionscript, doesn’t marshall JSON first so its much faster, and other refactoring.

The behavior class is defined in behavior.js (The idea of parsing the entire DOM came from a co-worker at revolutionhealth.com). This traversal maybe be expensive but if you had a ton of behaviors that register using CSS selectors, this might be faster (Don’t quote me on this though).

If you have a link, and wanted to provide an AJAX call without being obtrusive:

<a class="bvr-observe-click-xhrTheFunction" href="/the/href">The link</a>

The AJAX request:

1
2
3
4
5
6

function xhrTheFunction(event) {  
  var element = Event.element(event);
  var url = element.readAttribute("href");
  new Ajax.Updater("div_to_update", url, { });  
  Event.stop(event);
}

To create and apply the behavior, starting at id=”content”:

1
2

var dclBehavior = new Behavior();
dclBehavior.apply($('content'));

It will automatically register for the event observe. In other words it would do the following for you automatically:

 Event.observe(theLinkElement, "click", function(event) { xhrTheFunction(event) });

You could also handle other common tasks through bvr-* naming conventions. And you could also manually register your behaviors.

I am using this over at dclicio.us, in a couple places, if you want to see it in action.

Update:This is just a proof of concept (not entirely functional). The idea is to parse the DOM all in one shot so if you have a ton of behaviors, you don’t have to deal with alot of selector rules.
You could add other naming conventions, probably make them less verbose, change it to do binding, etc. Its definately not a good solution if you are only observing clicks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);

if ((version >= 5.5) && (document.body.filters)) {        
  var i;
  var length = document.images.length;
    for(i = 0; i < length; i++) {
      var img = document.images[i];
      var re = /\w+\.[Pp][Nn][Gg]\w*/;
      if (img && re.exec(img.src)) {
        var imgTitle = img.title ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
        imgStyle = img.parentElement.href ? "cursor:pointer;" : "";
        imgStyle += "width:" + img.width + "px; height:" + img.height + "px;";
        imgStyle += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'" + img.src + "\', sizingMethod='scale');";
                
        var strNewHTML = "&lt;span " + imgTitle + " style=\"display:inline-block; " + imgStyle + " \"></span>";

        img.outerHTML = strNewHTML;
        i = i - 1;
    }
  }
}

download

Then add this somewhere in your <head>

1
2
3

<!--[if lt IE 7]>
<script defer type="text/javascript" src="/javascripts/pngfix.js"></script>
<![endif]-->

The only other requirement is you specify a width and height on your image_tags

<%= image_tag("fam/date.png", :alt => "ical", :width => "16px", :height => "16px") %>

Though you should use CSS for most images, this is a fast way to make your png’s work in IE6.