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)

When you’re using a robust toolkit like jQuery, there’s usually a date picker of some kind.  With jQuery it’s a widget plugin.

Originally Written by Marc Grabanski & Extended by Keith Wood.  The jQuery Calendar v2.7 is a powerful and useful tool to add to your jQuery arsenal.

You can find it online here:

http://marcgrabanski.com/code/jquery-calendar/

The new jQuery UI will be landing on Sunday, September 16th. This will provide a powerful new set of widget tools to the jQuery toolkit.

What to Expect:

• Draggables
• Droppables
• Resizables
• Shadows
• Sliders
• Sortables
• Tabs
• Accordions
• Selectables
• Trees
• Modals

Coverage and tutorials of the new features will be published next week. In the meantime, check out the latest jQuery 1.2

The JQuery Team just realesed JQuery 1.2.  A major new revision to the JQuery toolkit.  While there are many major revisions to the software.  Some features have been removed, many others added or updated.

Some Key revisions include improvements to the ability to use custom namespaces & queueing for animations.

Other New Features:

• Ajax
  • Partial .load()
  • Cross-Domain getScript
  • JSONP
  • .serialize() Overhaul
  • Disable Caching
• Effects
  • .stop()
  • %/em Animations
  • Color Animations
  • Relative Animations
  • Queue Control
  •  :animated
  • step: Function
• Events
  • Namespaced Events
  • .triggerHandler()
• Internals
  • Documentation Move
  • Expando Management

Find out more at jQuery.com

Name: ext Javascript Library
URL: http://extjs.com
Native Server Environment: None
Included Widgets: Grids, Layouts, Panels, Menus, Buttons, Form, Tree, ComboBox, Dialog, Tab Panel
Download Size: VariableOriginally developed as an add on library for the YUI toolkit, ext has emerged as a powerful and capable toolkit in its own right. Ext has a powerful focus on widgets and application construction similar to Dojo’s dijit system. It’s biggest strength, however, is the fact that it can float on top of just about any underlying AJAX library or stand on its own.

Some Highlights

• Powerful animation & effect tools
• Excellent editable grid widget
• Compatible with several major AJAX libraries
  • YUI
  • Scriptaculous / Prototype
  • jQuery
• Powerful Skinning System

Some Drawbacks

• A bit of a learning curve
• Demo’s & tutorials may not work due because they were coded for different underlying library
• Depends on underlying library for many key functions, some features don’t work well with all libraries.
• Focus on XML or JSON for some tasks & in documentation