March 11, 2009
jQuery has a powerful collection of selectors which make selecting a specific collection of elements much simpler. Among my favorites are :text, which matches one-line text inputs, and :checked, for determining what checkboxes in a group have been selected. But sometimes our filter criteria relies on domain specific information.
March 10, 2009
This post highlights a difference between jQuery 1.2 and later in how relative values are handled, which I recently discovered when upgrading a site from jQuery 1.2 to the new 1.3. If you’re about to do the same, or have recently broken your site after upgrading and don’t know why, this post is for you. It will be easier to explain with an example, so here’s how the problem manifested for us:
On our main website we use jQuery to slide the pages into view when a user clicks on a navigation link. This is a variation of the “Coda Slider”, named because it mimics the website for Panic software’s Coda editor. In a nutshell, we have a div which acts as a viewport (we’ll call it #viewport), with another div inside which contains the pages (which we’ll call #slideContainer). #viewport has its position property set to relative, and its child, #slideContainer, has its position set to absolute. So when we increase or decrease the value of #slideContainer’s left property, it will slide right or left respectively to reveal new pages. Here’s an example:
March 05, 2009
Nothing exposes the gap between web apps and desktop applications more than plain HTML forms. Fortunately, by leveraging Javascript we can start to close this gap while maintaining a consistent experience for users using screen readers and old browsers.
We’ve identified 10 ways in which normal HTML forms fall short, and dug up the Javascript and CSS code you’ll need to fix them. Although the best enhancements are so intuitive as to be unnoticed, rest assured your visitors would thank you if they knew.
Note: Many of the solutions in this list depend on jQuery, our javascript framework of choice.
