Illuminati Karate

We recently created a contact submission form on a client’s Facebook page, and were not satisfied with the default user experience. For starters, the form opened a new window, and there was no way to redirect the user back to a confirmation message on the Facebook page.

We decided to submit the form via AJAX instead, and show the confirmation message directly on the Facebook page. This way the user would not have to leave the Facebook page, resulting in a smoother user experience. We couldn’t find a good explanation of how to do this on Google, so after figuring it out I decided to go ahead and write it up.

The following example will show you how to submit a basic contact form using AJAX from within your Facebook page. All HTML and Javascript that follows should be pasted directly into the “Edit FBML” screen on Facebook.

Continue reading “Submitting a Contact Form via AJAX From Your Facebook Page” »

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.

Continue reading “Write Your Own jQuery Selectors” »

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:

Continue reading “Relative Offsets Are Handled Differently Between Versions of jQuery” »

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.

Continue reading “10 Javascript Tricks for Better Forms” »