Usability / Accessibility Tutorials
CSS jQuery Markup Usability / Accessibility
Adding Events to Adding Events in jQuery
Earlier this week I posted a usability tip about using CSS and MooTools' custom event functionality to automatically add the "pointer" cursor when an element gets a "click" event attached to it. I received numerous requests for a jQuery version and I think I've figured out how to replicate the functionality.
Read Post View DemoCSS Markup MooTools Usability / Accessibility
Adding Events to Adding Events in MooTools
Note: This post has been updated.
Read Post View DemoBlog PHP Usability / Accessibility
PHPTVDB: Using PHP to Retrieve TV Show Information
I'm a bigtime TV/movie buff. If it's ever seen the light of day on HBO or BBC America, I've seen it (and quite possibly filmed my own made-for-TV-short-film). Unfortunately IMDB doesn't provide an official API for movies and TV shows but thankfully TVDB does.
Read Post View DemoCSS Markup MooTools Usability / Accessibility
Fixing sIFR Printing with CSS and MooTools
While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix the sIFR printing issue.
Read Post View DemoCSS jQuery Markup Usability / Accessibility
jQuery topLink Plugin
Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery.
Read Post View DemoCSS Markup MooTools Usability / Accessibility
“Top” Watermark Using MooTools
Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is that I may want to get to the top of the page from somewhere in the middle. Using MooTools, we can create a "top" link as a watermark that follows the users down the page.
Read Post View DemoCSS Markup MooTools Usability / Accessibility
MooTools Font-Size Scroller with Cookie Save
Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why I've built a MooTools-driven font-size slider that saves the user's preference into a cookie. Let me show you how to add this to your websites.
Read Post View DemoUsability / Accessibility
5 Features Your Login System Must Have
It seems like every website has some login system nowadays and half of the time the content provided in these protected areas should be freely available anyway. A bad login system can be a plague for your web app. If you do need to create a login system for your website, be sure to have the key features that will make your login system user friendly.
Read PostGoogle JavaScript Markup Usability / Accessibility
Create a NoScript Compatible Select Form Element with an onChange Event
I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to switch between sites is by choosing the site from a dropdown list. Once the dropdown list changes, the page automatically reloads with the requested site content.
Read PostMooTools Usability / Accessibility
MooTools 1.2 Tooltips: Customize Your Tips
I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually an image or link). Netflix is a perfect example of useful tooltips. When you hover over a movie title, a tooltip displays with a quick summary, cast list, and movie rating. Thanks Netflix — you've saved me yet another page load!
Read Post View Demo