jQuery Tutorials
Fancy FAQs with jQuery Sliders
Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools — here's how to create the same effect using jQuery.
Google-Style Element Fading Using MooTools or jQuery
Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter — no need for more clutter. Here's how you can implement a similar system with MooTools or jQuery.
jQuery UI DatePicker: Disable Specified Days
One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here's the jQuery JavaScript I used to accomplish that.
Create a Sexy Persistent Header with Opacity Using MooTools or jQuery
I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the top of the window and the opacity set to 50%. I've implemented this technique in my current design and have gotten numerous requests for a tutorial so...here you go!
Image Reflection with jQuery and MooTools
One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.
AJAX For Evil: Spyjax with jQuery
Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax":
Dynamically Create Charts Using jQuery Flot and Google Analytics
Earlier in the week I published a popular article titled Dynamically Create Charts Using MooTools MilkChart and Google Analytics. My post showed you how to use MooTools MilkChart and a splash of PHP to create beautiful charts of Google Analytics data. I was interested in seeing what jQuery had to offer in the charting department. jQuery Flot is what I found.
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.
MooTools-Like Element Creation in jQuery
I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax.
iPhone Click Effect Using MooTools or jQuery
One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that on any page? We can easily do so using MooTools or jQuery.