Javascript « rel.me

View the demo now

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:

public function fonts():Array {
  return Font.enumerateFonts(true).sortOn("fontName", Array.CASEINSENSITIVE);
}

Expose the method in the constructor using ExternalInterface:

ExternalInterface.addCallback("fonts", fonts);

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.

I created a behaviors javascript class to handle all my (prototype) Event observe registrations. Annotating DOM elements with the metadata needed to register itself automatically, which would save you from having to call Behavior.register(..).

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:

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”:

12	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

rel.me

Archives For Javascript

Font detection with Javascript and Flash

Automating JS behavior registration

Javascript IE PNG fix

Follow “rel.me”