CSS . XHTML . Javascript . DOM

Client-side.

  • Ajax Auto Suggest v.2
    February 07, 2007
    Update 2007-07-19 Version 2.1.3 - demo & guide here. Download AutoSuggest v.2.1.3 Bugfix Update 2007-07-07 Version 2.1.2 Smaller file size (under 9k) Uses encodeURIComponent instead of encodeURI bsn namespace is set as default - uses new bsn.Autosuggest(... instead of...
  • 3D in Javascript
    November 02, 2006
    This. is. amazing. Group arbitrary triangles created by piecing together right-angled triangles created by using CSS borders of varying widths and heights to create a rotating 3d object... Relatively fast on my double Dual-Core Intel Xeon machine (ahem). More 3d...
  • Block Level Commenting
    October 12, 2006
    Inspired by Jack Slocum's inline commenting system for wordpress, I got to thinking about block level commenting. Here's the result. As always, the commenting system is unobtrusive. An onload script (or similar) tells the script to parse the post body....
  • Dynamic Page Titles
    October 05, 2006
    I like the dynamic page titles on this flash site. Very simple, but I can't remember seeing it before. When the user moves to different sections of the site, flash calls a simple javascript that changes the title element in...
  • AJAX saves bandwidth (and cash)
    September 30, 2006
    Another argument for AJAX, and one that is so obvious it rarely seems to be mentioned. macrumors.com has posted statistics from their coverage of the Macworld San Francisco 2006 keynote speech given by Steve Jobs. We peaked at approximately 103,000...
  • Crossfader v1.1
    September 29, 2006
    I've just made a few changes to the Crossfader script. They was quite a lot of interest in it (see image) so I thought people might like to download the new link-enabled version. DIVs that are faded out (opacity...
  • Javascript / CSS Crossfader
    September 25, 2006
    In response to this article at ajaxian.com, and just for the sheer fun of it, here's a small-footprint object-encapsulated unobtrusive javascript crossfader. Download Crossfader v1.3 At 1.7Kb it's one hundredth of the size of the scriptaculous library used in the...
  • AutoSuggest: An AJAX auto-complete text field
    August 04, 2006
    Update 2007-02-07 Lots of changes. Demo and documentation here. Download AutoSuggest v.2 Tested on Safari 2.0.4, Firefox 2 Mac & PC, IE 6, IE 7 Update 2006-11-17 Added support for special characters. Original post 2006-08-04 I finally got around to...
  • preloadr
    July 20, 2006
    When Rolf showed me nexImage, an sort of online Photoshop, I thought "nicely done, but what's the point?" Your standard user just wants to perform a few basic actions à la iPhoto: Crop, colour correction, redeye reduction ... Something...
  • Firefox on the rise
    July 11, 2006
    One Stat has released statistics showing that Firefox now has just under 13% of the world-wide browser market, which is obviously still significantly less than IE's 83%. Interesting for me are the figures for Germany, where IE has only 56%,...
  • Don't mess with CSS!
    May 24, 2006
    The spanish obviously take correct markup seriously. Seen last year in Palma De Mallorca....
  • CSS style and Safari textfields
    April 14, 2006
    Up until now safari hasn't allowed much visual control of textfields via CSS, unlike, for example, Firefox. It's possible to argue that this is a good thing, with aqua-style input elements providing consistency across websites: when developers can only chose...
  • First Annual CSS Naked Day '06
    April 05, 2006
    Where's the style at? Dustin Diaz has announced the first annual CSS naked day. To participate, just remove the CSS styles from your site. In the spirit of promoting Web Standards along with good semantic markup and proper hierarchy structures,...
  • Yahoo Developer Network
    March 29, 2006
    I've never really had much to do with Yahoo! as a user, aside from taking note their aquisition of Web 2.0 projects over the last year or so, so I've stumbled upon the Yahoo! Developer Network rather late. (About a...
  • Footnotes with CSS and Javascript - the final word
    January 26, 2006
    I've finally got around to writing the definitive version of the footnotes script I wrote in 2005. There were a number of issues raised that I've resolved in this (probably final) version: Footnote links accessible from the keyboard Inline HTML...
  • Apple's iWeb produces dodgy mark-up
    January 16, 2006
    Apple's iWeb logo. Colin Devroe has put up a test page he produced using Apple's new iWeb. Check out the generated source code. DIVs all over the shop. Semantics out the window (div class="paragraph" being an almost textbook example of...
  • Psychedelia Bookmarklet
    January 11, 2006
    Albert Hoffman, the "father" of LSD, turns 100 today, and to celebrate I've whipped up a javascript bookmarklet that will turn any drab website into a groovy riot of colour. Drag the link below to your bookmark bar, navigate to...
  • Analyse this...
    January 03, 2006
    A new year: time to weed out those accumulated accessibility/validation problems! Run your website through the following online tests, and spend fun-filled hours correcting your markup for the simple pleasure giving them nothing to nag about....
  • JSBroadcaster - broadcasters & listeners in JavaScript
    January 01, 2006
    Here's a JavaScript version of the actionscript broadcaster/listener model "ASBroadcaster", unimaginatively called "JSBroadcaster". It's particularly useful for getting around the problems caused by having multiple functions that need to be called when a document loads, or resizes, or whatever....
  • Bookmarklets collection
    January 01, 2006
    I stumbled across this great collection of javascript bookmarklets at squarefree.com. The webdevelopment section is well worth a look if you're doing anything with JavaScript, the DOM or CSS, which you probably are. (Here's another project I found at squarefree...)...
  • Dynamic layouts with adaptive columns
    December 31, 2005
    Screen sizes are becoming increasingly diverse as mobile computing increases. While wide-screen formats are becoming more common-place in desktop monitors, with horizontal resolutions beyond 2000 pixels, mobile devices rely on much smaller portrait format screens, and run much less...
  • Mr. Inman's Favelets
    October 31, 2005
    TOP TIP: Drag Shaun Inman's Favelets into your bookmark bar. They create a list of links for all the embedded media on the page for easy downloading, plus a prompt to download a file from any url. As Shaun himself...
  • Text excerpts via CSS, javascript and the DOM
    October 27, 2005
    Excerpts (or teaser boxes) from longer texts can help the user when scanning and serve to highlight key points or quotes. Here's an example of automatically generated excerpts using CSS, javascript and the DOM. It degrades gracefully. When the makeExcerpts...
  • Animated anchor links with unobtrusive javascript
    September 30, 2005
    In a previous post I suggested that linking to anchors within a page could be a usability enhancement. I've now implemented this idea using unobtusive javascript. The script parses all of the links to anchors on the page and replaces...
  • Comment quoting with javascript bling!
    September 29, 2005
    I knocked up a quick comment-quoting script for brandspankingnew very early this morning. Try the 'quotes' button on a comment on this entry (looks better with more than a handful of comments). The script has several parts: quoteTxt to extract...
  • The Canvas Tag
    September 12, 2005
    Finally got around to having a quick play with the <canvas> tag, which is now supported in the Firefox 1.5 Beta, as well as Safari (users of other browsers won't be able to see anything). Coupled with the whole...
  • OS X style searchbox
    August 05, 2005
    I like the OS X GUI searchboxes. Here's a cross-browser version. Search box in iTunes.The OS X search box is an integral part of the OS X UI, and can be seen in a wide range of Macintosh software. It...
  • Flash-replacement slideshow with Javascript & XHTML
    August 01, 2005
    Here's an example of a flash-replacement slideshow using XHTML and Javascript/DOM. (IE uses innerHTML. See below) When javascript is deactivated, the user sees a simple XHTML page with all the images and captions underneath one-another. If javascript is activated, the...
  • CSS Footnotes revisited: Sidenotes
    July 25, 2005
    This article is outdated. Read the latest version. HTML version. XHTML version. Andreas Bovens (seen here drinking what is probably a $20 espresso in Tokyo) has a very concise CSS3 solution for footnotes/sidenotes, and asks in a comment to my...
  • Format Footnotes with Javascript & CSS
    July 20, 2005
    Having read Daring Fireball's post on footnotes in blogs, I thought it shouldn't be that difficult to come up with a css/javascript solution. Here's the result....
  • del.icio.us direc.tor: High-Performance AJAX Web Service Broker
    June 28, 2005
    Check out Johnvey Hwang's del.icio.us direc.tor "The idea behind a client-side web service broker (or intermediary, as Jon Udell calls it) is simple: assist a client in interpreting or processing information from a service, but letting the client do all...
  • AJAX search box in Movable Type
    June 24, 2005
    [NOTE: The ajax search field is OFFLINE at the moment!!!] Expanding on my previous AJAXesque auto-suggest textfield, I've adapted the standard movable type search field (on the index page) to be AJAX-enabled. The search field automatically suggests the titles of...
  • DHTML auto-complete text field
    June 20, 2005
    Been playing around with this small-footprint auto-complete textfield. It's currently fed by a hardcoded javascript array, but the idea is to hook it up to an AJAX / XMLHttpRequest....