Filament Group, Inc: Lab

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

2009-07-01T15:15:01Z

Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it's even a challenge to get the margins to appear consistently across browsers. To remedy this we developed a concise jQuery plugin based on progressive enhancement that leverages an input element's built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

2009-06-19T13:27:00Z

We recently contributed a number of our own plugins to the jQuery UI labs repository, a new branch of the jQuery UI project dedicated to future plugin development. Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it's built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

2009-05-20T15:50:00Z

Using em units in CSS layout allows for page components to scale in unison with a user's font-size preferences. But developing in ems within dynamically updating web apps can be very tricky. In an earlier lab article, we released a script to quickly convert pixel values to ems (and vice versa) to support page scalability throughout a web site or application. We've rewritten the plugin to better follow jQuery syntax and reduce code weight, and are now releasing an updated version for download.

Update: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support

2009-04-24T20:20:00Z

We dusted off our original sliding doors button to give it a much needed update. The button now works with image sprites thanks to the CSS contributions of Louis Walch, and also works with a single block of CSS (we’ve removed the now unnecessary conditional comments for IE) in all major browsers including IE versions 6 through 8.

Access-Oriented Web Design: Building highly-interactive web apps that work for everyone

2009-04-24T16:01:00Z

Yesterday, our own Scott Jehl had the opportunity to present our "Access-Oriented Web Design" methodology to the Web Publishing group (AKA WebPub) at MIT.

"Access-Oriented Web Design" is an approach we've been formulating for a while that describes our recommended approach to safely applying progressive enhancement in websites and applications so they deliver an accessible and functional experience to the widest audience possible.

This presentation builds upon our A List Apart article, "Test-Driven Progressive Enhancement", which details the capabilities testing library we've developed here at Filament Group.

The presentation was videotaped by MIT WebPub and is posted below. You can also view the "Access-Oriented Web Design" presentation slides in PDF format.

Update: jQuery UI Slider from a Select Element - now with ARIA Support

2009-04-16T20:48:00Z

We've updated our popular jQuery UI selectToUISlider plugin with ARIA support, making the jQuery UI slider widget more accessible to users on assistive devices. The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

2009-04-02T20:32:00Z

We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. In the process of refining the script, we morphed it into more of a menu system, which can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.

SXSW 2009: We’re Texas-Bound!

2009-03-12T14:18:01Z

The 2009 SXSW Interactive Conference starts tomorrow and the entire Filament crew will be in attendance! We're very excited to meet up with some of our online friends, and the sunny (hopefully) Texas weather will provide a nice break from this Boston blizzardry.

This year will be particularly exciting as we've been selected as finalists in the 2009 SXSW Web Awards for our work on jQuery UI ThemeRoller! If you'll be in Austin this week too, we'd love to meet up and chat. We'll be on Twitter @filamentgroup throughout the week, so feel free to follow along with us for the week and drop us a message if you're around. We hope to see you there!

jQuery UI 1.7 Now Released!

2009-03-06T18:35:00Z

Today marks the release of jQuery UI version 1.7. In many ways, this release is the start of an entirely new direction for the library. As core team members and official sponsors of jQuery UI, we're very proud of the team's efforts and the result of all of our hard work.

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?

2009-03-03T18:21:00Z

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element. The experiment is very interesting and really cool, but the practical takeaway wasn’t immediately clear.

Recently however, we've been working on building the markup for upcoming jQuery UI widgets, we came across a case that prompted us to take another look at the technique. The tooltip widget design, fairly common in websites these days, uses a small triangular "speech bubble" pointer that is typically created quite easily with a background image. However, we wanted to maintain our commitment to keeping our jQuery UI widgets entirely themable, and using an image for that purpose wouldn't fit with the flexibility jQuery UI requires. How to solve this problem without any need for images? That challenge led us to the experimental approach using polygonal CSS, shown below.

jQuery Plugin for Requesting Ajax-like File Downloads

2009-03-02T19:03:01Z

Ajax has changed the way we build web apps, allowing rich communication between the client and server without any need to refresh the page. But despite its power and flexibility, Ajax has numerous shortcomings such as a same-domain request policy and the inability to receive data without polling the server. For these limitations, we've seen workarounds such as JSONP and Comet.

One issue we have not yet seen addressed is the Ajax’s inability to receive a response in any form but text. Since it is now common for web applications to offer options for exporting your data in desktop app formats — such as .doc or .xls — we wrote a jQuery plugin to facilitate requests from the front end that result in a file for download. The plugin does not actually use Ajax, but its syntax follows the conventions of jQuery's native Ajax functions, making it a natural addition to our jQuery toolset.

Using Multiple jQuery UI Themes on a Single Page

2009-02-18T18:10:00Z

If you're using the jQuery UI CSS Framework to design an entire interface, you may find that one theme is not enough. This quick tutorial will highlight a new feature in the jQuery UI Download Builder which allows you to easily use multiple themes on a single page.

Contest: Win a Free Pass to SXSW Interactive for the Coolest Use of the jQuery UI CSS Framework

2009-02-12T18:31:00Z

To celebrate ThemeRoller's selection as a finalist for the SXSW Web Award for Technical Achievement, we're holding a contest to give away one free pass to the SXSW Interactive Festival to the person who creates the coolest use of the new jQuery UI CSS framework.

Introducing the ThemeRoller Firefox Developer Bookmarklet

2009-02-12T17:50:01Z

We've been hinting at it for a while... and it's finally ready: the ThemeRoller Firefox Developer Bookmarklet! The bookmarklet lets you pull ThemeRoller into any page on the web and roll a custom theme for any markup that uses the jQuery UI CSS Framework.

Filament Group’s ThemeRoller selected as a finalist in 2009 SXSW Web Awards

2009-02-10T17:31:00Z

We're thrilled to announce that jQuery UI ThemeRoller has been selected as one of 5 finalists in the category of Technical Achievement at the 2009 SXSW Web Awards. It's an honor to be selected among such impressive applications and we're very excited for the event which is now just weeks away!