/* Column layouts */
.column { float:left; overflow:hidden;}
.columns { margin-bottom:20px; padding-top:10px; }
.three.columns .first { width:200px; padding-right:20px; }
.three.columns .second { width:200px; padding:0 20px; }
.three.columns .third { width:200px; padding-left:20px; }
.two.columns .first { width:300px; padding-right:20px; }
.two.columns .second { width:300px; padding-left:20px; }

This lets us code the XHTML like this:

<div class="three columns">
     <div class="first column">
         Column 1
     </div>
     <div class="second column">
         Column 2
     </div>
     <div class="third column">
         Column 3
     </div>
<div style="clear:both;"></div>
</div>  

… which is pretty nice semantically.

We’ve changed and tweaked the formula a bit since we posted this, and are thinking of releasing a 1.1.  If there’s anything any of you would like to see QA do that it doesn’t already, please let us know in the comments!

Every higher ed website is going to have landing pages with a ton of links. Your various audiences each demand one-click access to what they need, but the resulting page is rarely very scannable and its hard to categorize these sundry links in ways that meet the expectations of all your visitors.

Enter Quick Access. Quick Access is a lightweight Javascript solution we first created for Haverford College to address this problem (we later ported this to jQuery for versions for Kenyon College and Southwestern University). It’s best summed up with: “Just start typing what you’re looking for.”

Quickaccess dynamically searches links in a particular div for text and keyword matches. To add quickaccess to your page, all you need is your existing series of links; to additional keywords, just use standard HTML comments (<!– –>) within the links.

I’ve ported the latest version to a jQuery plugin. You can see a robust example here and grab the source here. Getting started is as simple as:

$('input#inputselector').quickaccess({selector:'.searchselector'});

And of course you’ll need a recent version of jQuery.

It’s largely undocumented at the moment but it’s super-straightforward; configuration settings and examples appear as comments at the start of the JS source.

We hope you find it useful, and let us know if you have any questions!