ScrollShow is a unique photo gallery implementation that uses scrolling to display the items.  It’s similar to a carousel implementation, but simpler and more flexible.

Check it out here:

http://flesler.blogspot.com/search/label/jQuery.ScrollShow

One of the most powerful jQuery plugins is dimension.  Using dimension you can obtain the position, height & width of just about any element on the page and the window itself.

Uses:

• Determine dimensions of document
• Determine dimensions of window
• Determine scroll offsets of containers
• Set scroll offsets of containers
• Determine dimensions of container contents
• Determine absolute position of elements
• Determine dimensions & offsets of parent elements.

Find Plugin & API Documentation here:

 http://brandonaaron.net/docs/dimensions/

Yesterday I brought you Jeditable a simple plugin to handle edit in place Ajax events.  Today I bring you an Autocompleting, Inplace edit based on Jeditable by Ritesh Arawal.

This plugin extends Jeditiable with a simple AJAX call to retrieve an array of possible values based on user input. 

What it ads:

• url: location to send autocomplete request
• minChars: minimum number of chars to include in autocomplete request
• formatItem: format string to improve display of server response
• inputSeparator: allows you to add multiple input strings (ie tags).

Check it out online at http://php.scripts.psu.edu/rja171/widgets/autocomplete.php

Niall Doherty has released version 1.1 of the powerful CodaSlider AJAX widget. This upgrade takes an excellent widget and makes it even better.

Some highlights:

• Widget Upgraded to Use jQuery 1.2
• Improved Accessibility, all content housed within the slider is now accessible via a scrollable panel.
• YouTube videos now display properly within slider.
• Improved Polish & Pre-loading.
• Cross-Linking Support

Check It Out on Niall’s Blog

http://www.ndoherty.com/blog/2007/10/29/coda-slider-11/

Lightbox & CodaSlider aren’t compatible.  A situation that was brought to my attention while participating in the comments on a blog post at http://www.ndoherty.com/.  Conflicts like this are a common experience for many of us and I thought this was a good opportunity to explore the cause of one such conflict.

In the case of Lightbox & CodaSlider, the fundamental frameworks were at odds with each other.  Lightbox is built with the Prototype / Scriptaculous framework stack, CodaSlider uses the jQuery framework.  Superficially, this doesn’t seem like a big deal.  While it’s usually bad form to load down a web page with multiple frameworks, I know it’s a crime many of us have been guilty of in the name of expediency or through multiple vendor integrations.  Usually this works, but in this case, the developer was attempting to integrate two widgets that were instantiated at different times and by different methods.

Luckily, there’s a simple solution to the problem.  I directed her towards the popular “ThickBox” widget instead.  In fact, that’s the greatest strength of the Ajax Bestiary we all have at our disposal.  There’s usually another tool available for us to use and in the case of popular frameworks like jQuery, a native solution is out there.  So if you ever find yourself in this situation, try to find the native solution.

Here’s a handy jQuery plugin to speedup development and greatly enhance debugging.

http://happygiraffe.net/blog/archives/2007/09/26/jquery-logging 

This lets you simply add a .log command to a jquery chain and have the result logged to the firebug console with all relevant contextual information.  Fast, easy and simple.

Coda Slider is a slick, sliding panel widget plugin for jQuery.  It smoothly scrolls between a series of dynamically created tabs and provides a slick, circular navigation.

• Some Features:
• Clean and Valid XHTML Strict
• Circular Navigation
• Dynamically Created Tab Set
• Multiple Sliders Can Exist On One Page
• Cross Browser
• Navigation is queued to prevent sudden jumps.

Some Drawbacks,

• Text not selectable in Firefox 2 PC
• Not Possible to Hyperlink to Selected Tabs / Anchor Support

Get It Online Here:

http://www.ndoherty.com/demos/coda-slider/

Read the Blog Post:

http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/

jQuery UI was released last month and provides an official UI library for jQuery development. Included in the release:

• Mouse Interaction
  • Draggables
  • Droppables
  • Sortables
  • Selectables
  • Resizables
• User Interface Extensions
  • Accordion
  • Calendar
  • Dialog
  • Slider
  • Table
  • Tabs
• Effects
  • Shadow
  • Magnifier

Although many modules aren’t ready for primetime use yet. I would advise trying to integrate the official packages in your next jQuery project.  Over the next few days we will be exploring each of these elements in more depth.

John Resig has posted a very cryptic series of images & animation on his blog hinting at some stunning visualization & animation capabilities coming to jQuery. And as for timeline he simply hints at “Sooner”. No word yet on how it works.

You can find it online here:

http://ejohn.org/blog/sneaky-2/

Via Ajaxian

While jQuery is many powerful things, Selectors are quite possibly its most capable and useful feature. So here’s the jQuery Selector crash course.

The Ground Rules:

1. Selectors work just like CSS (1-3) selectors # for ID’s, . for classes p, div, ul, li etc.
2. XPath an also be used.
3. CSS & XPATH selectors can be combined

The $ wrapper.

Selectors + $ = jQuery Nirvana. The $() function accepts any selector and returns an object that can be manipulated.
Filters 

jQuery filters enhance jQuery Selectors by providing additional logic.  Here’s a list of supported filters:

• Not (selector)
•  first
• last
• even
• odd
• eq( index) matches an elements index in returned array
• gt( index) matches all elements after given index in an array
• lt( index ) matches all elements before given index in an array
• header matches all h elements (h1 h2 h3 etc)
• animated (matches all elements that are currently being animated)
• contains( text) matches all elements which contain given text
• empty matches all empty elements
• has(selector) matches all elements containing an element that matches the given selector
• parent matches all elements that are parents / have child element. (opposite of empty)
• hidden matches all elements of type hidden
• visible (opposite of hidden)