The symptoms of this bug are that when you set the CSS display property to block from none the element doesn't appear. In fact, it has a height of zero.

The bug only happens in a specific markup situation, as such I've never seen it before now - but it's worth being aware of since debugging the issue would normally start in the JavaScript, when in fact it's Webkit that's the problem.

The bug occurs when your hidden content is an inline element, containing <br /> tags and proceeded by another inline element. It's tricky to explain, but can be seen in the source code of the example below:

View the demonstration of the bug

The fix, after a lot of debugging, turned out to be simply to follow the inline element with a block element. Somehow the height in the first example is being set to zero allowing the inline span to sit above the element. In the second example, the block element clears the newly displayed span and it appears correctly.

It's pretty convoluted, which is why it reminds me a of an IE bug!

<xsl:variable name="show_comments">
  <xsl:choose>
    <xsl:when test="//QUERY_STRING/show_comments"><xsl:value-of select="//QUERY_STRING/show_comments"/></xsl:when>
    <xsl:otherwise>0</xsl:otherwise> <!-- default value -->
  </xsl:choose>
</xsl:variable>

Note: //QUERY_STRING is a made up variable

I know XSLT might be a bit random for me, but client wants: client gets

In working to these grid layouts, I've created a couple of tools to make generating and working with the grids a little easier.

Generating the Grid

There's a few tools for generating PSDs and calculations for grid, but since I'm a real lazy guy - I actually want something to generate the CSS for me.

I use 29digital's grid calculator to work out the details of the grid. Then once the right grid is configured, I'll use the following bookmarklet to generate the CSS required:

Grid CSS

This gives me a CSS grid layout such as the following for a 6 column 66px wide grid layout with 14px gutter:

.column { margin: 0 14px 14px 0; float: left; }
.last { margin: 0 0 14px 0; }
.span1 { width: 66px; }
.span2 { width: 146px; }
.span3 { width: 226px; }
.span4 { width: 306px; }
.span5 { width: 386px; }
.span6 { width: 466px; }

Working with the Grid

The next step I'll take when working up the markup, is to include the code from ctrl+shift+g.

The default way of interacting with this code is to use ctrl+shift+g - but this triggers the find function both in Safari and Firefox 3 - and in Firefox it triggers the grid and find at once, then you're stuck in the find box not being able turn the grid back off easily.

So, another little bookmarklet to toggle the grid:

Toggle grid

All simple stuff, but makes getting a simple grid layout working quicker and easier for the lazy developer

The main problem my server faced was that when a large influx of traffic came in all at once, say if Smashing Magazine publishes a post covering a couple of tutorials, all the apache processes would be busy serving up 30Mb video files - traffic starts to build, the server starts to choke and it all goes downhill.

S3 to the rescue, but I also wanted to make sure I could keep track of the download stats.

Step 1 - Upload to S3

For the Mac, I've traditionally used Cyberduck for transferring files. In the last 6 months or so, they added support to upload directly to S3 'buckets'. I've tried the Firefox plugin (it was a bit clunky) and before finding Cyberduck support S3, I had used JungleDisk.

The advantage of Cyberduck is that a) it's free, and b) it's super easy to use - it treats it just like a traditional connection.

Once the files are uploaded, you need to make sure the files have read permission set on everything you want your users to see.

Step 2 - Tidy URLs

So first off - this URL sucks:

http://8b8a7422192806b94844336167669d2-default.s3.amazonaws.com/coda-slider.mov

It's too long, and ideally it matches the domain your site is running from.

Digital Magazine have a superb article on how to configure S3 to give you really clean URLs.

One tip I can offer when you're setting this up, you need to ensure your 'bucket' name matches the domain you redirect to.

In my case, it was going to be media.jqueryfordesigners.com, so the bucket name (actually just a new directory if you're using Cyberduck) had to match exactly.

I could now access all the files I had uploaded to the bucket, and marked as read through this clean URL:

http://media.jqueryfordesigners.com/coda-slider.mov

However, there's just one more simple step to keeping track of all the downloads.

Step 3 - Track

To completely track the downloads, and make use of nice clean URLs, we need two things:

1. .htaccess
2. A logging script (taken almost entirely from Linklove's analytics without JavaScript)

As mentioned, in my case the target URL is:

http://media.jqueryfordesigners.com/video.fmt

This is achieved by creating a logging script called media.php which requires the query string url=video.fmt. The actual URL the user will see is:

http://jqueryfordesigners.com/media/video.fmt

This way I can process the call via the media.php script, then redirect the user off the real location.

.htaccess

mod_rewrite is used to keep the URL clean and redirect the request to the right script:

<IfModule mod_rewrite.c>
Options +FollowSymLinks +ExecCGI
RewriteEngine On
RewriteBase /

RewriteRule ^media/(.*)$ /media.php?url=$1 [L]

# other rules here...
</IfModule>

Logging Script

<?php
$var_utmac='UA-1234567-8'; // your urchin code
$var_utmhn='jqueryfordesigners.com'; // your domain
$var_utmp='media/'.$_GET['url']; // this is the file name that will be logged in Google Analytics

// Shouldn't need to change these...
$var_utmn=rand(1000000000,9999999999); //random request number
$var_cookie=rand(10000000,99999999); //random cookie number
$var_random=rand(1000000000,2147483647); //number under 2147483647
$var_today=time(); //today
$var_referer=@$_SERVER['HTTP_REFERER']; //referer url
$var_uservar='-'; //enter your own user defined variable

// the Analytics URL - make sure this is still one line
$urchinUrl='http://www.google-analytics.com/__utm.gif?utmwv=1&utmn='
  .$var_utmn.'&utmsr=-&utmsc=-&utmul=-&utmje=0&utmfl=-&utmdt=-&utmhn='
  .$var_utmhn.'&utmr='.$var_referer.'&utmp='
  .$var_utmp.'&utmac='
  .$var_utmac.'&utmcc=__utma%3D'
  .$var_cookie.'.'.$var_random.'.'.$var_today.'.'.$var_today.'.'
  .$var_today.'.2%3B%2B__utmb%3D'
  .$var_cookie.'%3B%2B__utmc%3D'
  .$var_cookie.'%3B%2B__utmz%3D'
  .$var_cookie.'.'.$var_today
  .'.2.2.utmccn%3D(direct)%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D'
  .$var_cookie.'.'.$var_uservar.'%3B';

// the request to Google is handled sent
$handle = fopen ($urchinUrl, "r");
$test = fgets($handle);
fclose($handle);

// finally we redirect the user to the real location of the file
header('Location: http://media.jqueryfordesigners.com/' . $_GET['url']);
?>

The slides were updated for SkillSwap, and then also for the ThoughtWorks talk I gave, and in addition, I've recorded screencasts for each of the demos.

Slides

PDF download

Screencasts

The screencast runs all as one, and runs for 15 minutes. They're branded as jQuery for Designers, but it was so they still had the Creative Commons license on them.

QuickTime screencast of jQuery examples (alternative flash version)

Live Examples

I've also included all the code for the examples:

• Tabs
• Namespace events
• Simple Ajax
• Effects

I've looked at flash solutions, since a SWF had access to enumerate the fonts, but ultimately if it could be done without flash, it would/should be faster and smarter.

So here's my pure JavaScript (okay, and a little CSS) solution: font.js

Usage

Include the font.js script in your page.

It relies on jQuery so include that somewhere too.

$(document).ready(function () {
  font.setup(); // run setup when the DOM is ready
});

Then to test:

font.isInstalled(fontname); // returns true or false

Simple.

Example

I mention this little idea, and a fuller blog post on this later, but I've installed it and make use of it to preview a font-family list:

http://font-family.com/sandbox/optima,monaco,courier,random

How It Works

Comic Sans to the Rescue

For the first time in my career I've found a genuine use for Comic Sans. Due to it's huge Johnny Nomates status in typography circles, it's never been used as inspiration for any other fonts (I may generalising).

What makes this important is that: Comic Sans, in all it's glory, is actually unique.

From there it's a simple case of comparing the font in question against Comic Sans and if they match, it's not installed.

Basic Matching

Since we've no way to examine the font, nor look, programmatically, at the characters, we're limited to just checking the width of the rendered text.

As such, this can cause some false negatives if the font has characters exactly the same width as Comic Sans. However, this is less likely due, again, to it's uniqueness.

Tricks

The key to a successful match are two tricks:

1. Large fonts. Having the font size cranked right up, increases the margin for errors, i.e. if there's a subtle difference that would be hidden between pixels, increasing the font exaggerates this making it easier to spot.
2. Use wide letters. I'm using 'w' and 'm' against each other. It's almost arbitrary, but again, it increases the margin for error, and hence asserting the font is installed.

The key change I've made is to de-couple the API search engine from the front end. What this has resulted in, is a fairly simple API to create any number of bespoke front ends to the jQuery API browser.

Since the engine now runs separately, it's been easy to create different front ends.

So now the following front ends are available with the latest API:

• Live API browser
• Visual jQuery (Yehuda Katz will be releasing this to the original URL soon)
• Offline AIR app

There's no reason this can't be utilised within a Dashboard app (or update the existing one), implemented as an iGoogle widget and so on.

Feedback for AIR app

Currently there's no icon for the app - any designers out there want to contribute? Please get in touch.

Originally the app had a quick silver "smoke" look to it, but I've since changed it a straight window so it can be minimised, maximised, etc.

I'm also aware the window settings don't save and the auto updater might ask each time you open the app - there will be updates to fix this very soon!

Build Your Own

Grab an SVN Copy

I've got all the code in Google's SVN repo (though I'm also mirroring across in git - but it's pretty new to me).

If you're app is online, I strongly recommend pulling the code, or at the least the API database, directly out of the SVN repo to ensure you're running from the latest API.

• api-loader.js
• api-docs.js (this is 600k all on one line)
• api-docs.xml (required if you construct the database in the browser/app)

If you're working offline, I encourage you to build in an auto update feature, if only to refresh the database.

API Loader

Before loading the database, you must import the api-loader.js library which holds the callback to mount the functions on the API database (since it's all contained within one object)

<script src="api-docs.js" type="text/javascript"></script>

API Database

The API database is loaded in one of two ways:

• Import the pre-packaged JSON database
• Converted from XML

The pro of the JSON version is that the browser doesn't have to do any processing before the data is available. The con is that it's almost twice the size of the raw XML version. I'm looking at what I can do to optimising the JSON version.

Loading the Database

JSON

<script src="api-docs.js" type="text/javascript"></script>

XML

Call the loadDocs function when the DOM is ready.

There is an option to point the XML database to a different location via the xmldoc variable. If you've exported XML from the wiki (via createjQueryXMLDocs.pl) then the XML is compatible. For example, the API browser currently works with all the jQuery Ui documentation (I'll be adding this soon).

$(loadDocs);

Using the Database

The API database is a global variable called jquerydocs.

When the database is loaded it triggers a api-load-complete event on the document.

$(document).bind('api-load-complete', function () {
  alert(jquerydocs.version);
});

jquerydocs

The jquerydocs is an array with properties and a single find function. Running a query on the database returns the same structure back filtered by the given string.

>>> console.dir(jquerydocs);

'categories' : [Object name=Core subcategories=[5], 8 more...],
'data' : [Object jquery1=Object, 226 more...],
'letters' : ["a", "b", "c", 20 more...],
'searchNames' : ["jquery1", "jquery2", "jquery3", 224 more...]
'startdoc' : "API",
'timestamp' : "2008-06-03T15:40:58Z"
'version' : "1.2.6"
'find': function()

Querying

The best way to get familiar with the API database is to drop jquerydocs in to Firebug and look at the properties.

Generally everything is queried through the find function.

The find function takes two parameters, the second being optional:

1. Query
2. Field filter

If the field filter isn't passed in, the query will search for functions, selectors and properties that 'start with' the query string.

A few examples:

// all API functions starting with 'trigg'
jquerydocs.find('trig');

// all functions in the category start with 'ajax'
jquerydocs.find('ajax', 'category');

Running Live Examples

// this would be the ID of the result
var id = 'trigger141',
  item = jquerydocs.data[id],
  i = 0,
  blank_iframe = '/index_blank.html',
  examples = $('exampleHolder'), // arbitrary placeholder
  html = [];

for (i = 0; i < item.examples.length; i++) {
  if (item.examples[i].html) {
      html.push('<iframe id="' 
        + item.examples[i].id 
        + '" src="' 
        + blank_iframe 
        + '"></iframe>');
  }
}

examples.append(html.join(''));

// runExample is a helper in api-loader.js
runExample(item);

Online/Offline Differences

If you're running offline, you'll need to ensure the following:

1. In api-loader.js, change where example_jquery is pointing to - currently it points to the Google jQuery copy 1.2.6. If you're running online, this will update when the loader script is updated.
2. Again in api-loader.js, change where blank_iframe points to. This is required for the live examples. If you don't run the examples in your code, then you shouldn't need to change this.

So I've built a little jQuery plugin to do the work for me.

Maxlength Plugin

The plugin simply reports back the number of characters left the user has, with a few extra bells and whistles.

Download the maxlength jQuery plugin

Demonstration

View the maxlength demo

This demo shows off two example, one limiting on characters and one limiting on words.

Example Code

<form action="/comment">
  <p>Characters left: <span class="charsLeft">10</span></p>
  <textarea maxlength="10" class="limited"></textarea>
</form>
<script type="text/javascript">
  $('textarea.limited').maxlength({
    'feedback' : '.charsLeft'
  });
</script>

The default version of the maxlength plugin reads the maxlength attribute from the text element. However, since this isn't a valid HTML attribute if added to a textarea you can configure the plugin to read the value from a hidden input:

<form action="/comment">
  <p>Characters left: <span class="charsLeft">10</span></p>
  <textarea class="limited"></textarea>
  <input type="hidden" name="maxlength" value="10" />
</form>
<script type="text/javascript">
  $('textarea.limited').maxlength({
    'feedback' : '.charsLeft',
    'useInput' : true
  });
</script>

The plugin can be applied to input elements, but if you want to limit by words, rather than characters, you need to put the maxlength as a hidden input (otherwise the browser will use it's default behaviour to limit the user's input).

Plugin Options

• feedback - the selector for the element that gives the user feedback. Note that this will be relative to the form the plugin is run against.
• hardLimit - whether to stop the user being able to keep adding characters. Defaults to true.
• useInput - whether to look for a hidden input named 'maxlength' instead of the maxlength attribute. Defaults to false.
• words - limit by characters or words, set this to true to limit by words. Defaults to false.

function getQuery(s) {
  var query = {};

  s.replace(/\b([^&=]*)=([^&=]*)\b/g, function (m, a, d) {
    if (typeof query[a] != 'undefined') {
      query[a] += ',' + d;
    } else {
      query[a] = d;
    }
  });

  return query;
}

// usage:
// var o = getQuery('maps.google.co.uk/maps?f=q&q=brighton&ie=UTF8&iwloc=addr');
// console.dir(o);

Note that if a query string key is found more than once, it's value is appended. If you don't want this functionality, remove the test for undefined.

Pretty early on I could see how Microformats, particularly the hCalendar should be applied, but what Chris really wanted to do the job was an automatic feed that your calendar software could subscribe to, and that would automatically updates, then, time permitting, Microformats could be added.

Ah ha! The solution lied entirely in Microformats!

I'm not sure how I missed this nugget because it's been there for a good while now, and it helps build exactly the functionality that Chris needed:

http://feeds.technorati.com/events/

Technorati offer the solution in two forms: one off download, and live subscribe, the difference being the protocol - http and webcal respectively.

By passing in my URL with hCalendar marked up Microformats, Technorati will parse the page and return it in an iCal format.

By linking to:

webcal://feeds.technorati.com/events/http://2008.dconstruct.org/schedule/

I will have a live calendar in iCal of the dConstruct event schedule (which is actually where I spotted the webcal subscription method). Alternatively I can add it manually (the URL) in my Google Calendar app.

No doubt Chris will be updating Thumbslap to include the Microformats via the user's homepage shortly!