jQuery Effect Sequencer
2010 November 01
- Comments
- Topics
-
I've got the opportunity to build a client-heavy web experience with a big emphasis on transitions and effects. This is probably something that would have been built using Flash just a short time ago, but today we're using everyone's favorite JavaScript library, jQuery.
Just before diving in, I attended jQuery Boston and got totally inspired by a few key talks on JavaScript architecture, mobile web apps, and one gnome-filled piece from Karl Swedberg titled jQuery Effects: Beyond the Basics. This was a really jam-packed presentation that had something for all levels of jQuery ninja. My favorite part was a little recursive function called sequencer that calls animations, one after the other, on a collection of elements. If you try to do something like this directly (without the sequencer):
$('#Gnomes').children().animate({height: '100px'}, 'fast');
jQuery is going to perform the animations simultaneously, which may or may not be desired. I grabbed the sequencer because I wanted to create a tiling-in effect for a list of items of a dynamic length. In the process, I generalized the sequencer a bit, so it works with not only animate, but the shortcuts we've all come to love such as hide/show, slideIn/slideOut, and so on, and packaged it as part of a small transitions framework that's hopefully going to allow me to do some rapid prototyping on the transitions in my site. Read on for the demo and github link!
Continue reading jQuery Effect Sequencer
Sorting jQuery DOM Elements
2010 March 28
- Comments
- Topics
-
While updating the jQuery version referenced by a website I was working on, I found an interesting trick you can do with collections of DOM elements as of jQuery 1.3.2 (February 2009). Prior to this release, selecting a collection of DOM elements would return a plain old JavaScript object. Now, you get an array.
This may not jump out at you as exciting in and of itself, but for me the
ability to use array methods on these collections was really helpful. By writing a simple array sort method, I was able to grab one giant alphabetically ordered list of items from any number of smaller, categorized lists on my page, and then display that list in different ways on the fly.
Continue reading Sorting jQuery DOM Elements
Scrolling In-Page Links with jQuery
2009 July 06
- Comments
- Topics
-
In-page links (or, links that jump to specific areas of the current page) are definitely useful for lengthy or text-heavy sites, and often essential when these pages are consumed by screenreaders or "legacy" mobile devices. But they can also be disorienting for many reasons — did I just move up the page? Down it? With the instantaneous transition the browser provides by default, a user is left to guess.
I wouldn't be the first to suggest overriding this behavior with a scrolling effect that illuminates which direction you've traveled, and also how far. A global, automatic solution would be ideal. For animated effects, a robust JavaScript library can save a lot of time, and I'll use the popular jQuery library for this example. Out of the box, jQuery does not have this functionality, and although there is an appropriate plugin, I was determined to cobble together my own solution so as to avoid loading an additional plugin only to use it in this one instance.
Continue reading Scrolling In-Page Links with jQuery