Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

jQuery Scroll Show, A Scrolling Photo Gallery Plugin

Posted by Don Albrecht

scrollshow 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

jQuery Dimension Plugin, Spacial Awareness Made Simple

Posted by Don Albrecht

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/

Improve Jeditable With Autocomplete

Posted by Don Albrecht

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

CodaSlider 1.1 Released

Posted by Don Albrecht

jquery-coda-slider-thumb.jpg

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, ThickBox & Framework Conflicts

Posted by Don Albrecht

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.

Streamline jQuery Debugging with Firebug Logging

Posted by Don Albrecht

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.

Create Slick, Scrolling Panels with jQuery & Coda Slider

Posted by Don Albrecht

jquery coda slider 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/

Getting Started with jQuery UI

Posted by Don Albrecht

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

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.

Stunning jQuery Visuals (There’s something big coming)

Posted by Don Albrecht

Stunning jQuery Visuals (There’s something big coming)

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

jQuery $ unleash the power of selectors

Posted by Don Albrecht

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)