Usability / Accessibility Tutorials
MooTools Usability / Accessibility
Smooth Scrolling with MooTools Fx.SmoothScroll
I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll.
Read Post View DemoMarkup MooTools Usability / Accessibility
Checkbox Filtering Using MooTools ElementFilter
When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application. There's one more place I'd like to use it. My employer uses a basic SPAM filtering system which allows me to see emails that were incorrectly (or correctly) caught in SPAM, click a checkbox, and click a "Deliver" button. The problem is that it will catch a bunch of valid emails with very similar subject lines, so I have to hunt down all of the emails, check the email's checkbox, and keep searching. Inefficient to say the least. That's why I've used ElementFilter to find LABEL elements with the given search text and automatically check their checkboxes.
Read Post View DemoMooTools Usability / Accessibility
iPhone-Style Passwords Using MooTools PassShark
Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of a MooTools plugin, which conquers some problems that plague jQuery counterparts, was authored by valued MooTools contributors Luis Merino and Nathan Querido.
Read Post View DemoMarkup MooTools Usability / Accessibility
New York Times-Style Text Selection Widget Using MooTools or jQuery
Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents the user with a "search" icon they may click on to learn more about that term. I've tried to answer that challenge — not in bookmarklet form but in website widget form.
Read Post View DemoJavaScript Markup Usability / Accessibility
JavaScript Copy to Clipboard
Providing your users the ability to copy text to the clipboard can make your website much more convenient and valuable. Unfortunately Flash 10 broke most of the methods for doing so. Luckily a great library named ZeroClipboard exists. ZeroClipboard uses a pinch of Flash and touch of JavaScript to make copying to the clipboard happen.
Read Post View DemoAJAX CSS jQuery Markup Usability / Accessibility
Form Element AJAX Spinner Attachment Using jQuery
Yesterday I showed you how to attach an AJAX spinner next to a form element using my beloved MooTools. Today I'll show you how to implement that same functionality using jQuery.
Read Post View DemoAJAX CSS Markup MooTools Usability / Accessibility
Form Element AJAX Spinner Attachment Using MooTools
Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We're going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.
Read Post View DemoCSS Markup MooTools Usability / Accessibility
Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3
Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy.
Read Post View DemoCSS Markup MooTools Usability / Accessibility
Select Dropdowns, MooTools, and CSS Print
I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating a list in case the user prints the page.
Read Post View DemoJavaScript Markup Usability / Accessibility
QuickBoxes for Dojo
Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin, QuickBoxes, to port over from MooTools. The following is the result.
Read Post View Demo