Moving my plugins to Google Code

Google Code

I decided to move my plugins from my private svn to Google Code. This means the code being developed is now public and can be viewed and reviewed by anyone.

I'm also trying to automate the building process with a makefile in order to make deploys less tedious (thus more frequent :)).

Everyone's invited to check the code, review it, comment and report bugs. The repository has a few plugins that I actually never released. It doesn't contain non-jQuery scripts yet. I haven't moved them yet and won't do yet.

Links

• Project Home
• Trunk

2 Ajax plugins for jQuery +1.3

Introduction

I never actually posted about 2 tiny plugins I made, once jQuery 1.3 was nearing.

Both are somehow related, they are related to Ajax (jQuery.ajax) and they provide sort of a manager to allow multiple implementations of the same feature.

Needless to say, both plugins only work under jQuery 1.3 or higher. The packages(zips) include jQuery 1.2.7pre because that's the version I used to test them when I made them. You obviously don't need to use that version.

XHR

Since jQuery 1.3. The default XHR "factory" function can be overriden by passing an 'xhr' setting to jQuery.ajax with a new function

This tiny plugin provides a simple registry for different xhr implementations to co-exist.

To provide a new implementation, you need to do something like this:

jQuery.xhr.register( 'my_xhr', function( settings ){
  return new MyXhrImplementation( settings );
});

The argument settings is the object passed to jQuery.ajax.

To use it, you do:

jQuery.ajax({
    url:'...',
    transport:'my_xhr',
    // ...
});

The built-in implementation is used by default (unless it's overriden with jQuery.ajaxSetup) and it's called 'xhr'.

Links & Downloads

• Project Page
• jQuery.XHR 1.0.0 Zip

AjaxFilter

This plugin lets you store multiple functions to sanitize ajax responses.

If you want to provide a new implementation, you need to do something like this:

jQuery.ajaxFilter.register('js_in_href','html',
 function( data ){
  return data.replace(/href="javascript:[^"]+"/g, '');
});

or

jQuery.ajaxFilter.register('eval','script html json',
 function( data ){
   return data.replace(/eval\(.+?\);?/g, '');
});

Arguments for jQuery.ajaxFilter.register() are:

1. Name for the filter, used as 'filter' when calling jQuery.ajax.
2. One or more dataTypes to handle. Can be any combination of ajax, html, json and xml separated by spaces.
3. The filter function. Will receive 2 arguments: the data and the type. The 'this' will reference the settings object.

To use it, you do:

jQuery.ajax({
    url:'foo.html',
    filter:'js_in_href',
    // ...
});

The filter can also parse the response.
That means it can (for example) provide an alternative way of eval'ing json. This is specially useful for Adobe AIR apps. If the filter returns something else than a string, it's assumed to be the final response.

Links & Downloads

• Project Page
• jQuery.AjaxFilter 1.0.1 Zip

jQuery.LocalScroll 1.2.7 released

Notice

I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.

In this release I cleaned up the code a little and added some features. Also removed a few old (aka deprecated) stuff that were still hanging around.

Enhancements

• Added some misc enhancements and cleanup the code.
• Updated the plugin to take advantage of recent scrollTo additions.

Changes

• The element that triggered the scroll cannot be accessed anymore from within the onBefore, you can bind your own click (or w/e) to them in order to add a class or things like that.
• settings.persistent is no longer supported (was deprecated).

Features

• The set of settings can be accessed from within the onBefore as the 'this'.
• The hash (#foo) is set to the URL before scrolling, so the back button works accurately (when scrolling the window).
• The option 'hash' doesn't make the window jump when scrolling overflown elements
• $.localScroll.hash now resets the element scroll to (0,0) by default. You can set the setting 'reset' to false to avoid this.

Enjoy!

Links

• Downloads
• Github Repo
• Demo
• Changelog

jQuery.ScrollTo 1.4.1 released

Fixes

• The plugin accepts floating numbers.
• Using jQuery.nodeName where neccessary so that this works on xml+xhtml.
• The max() internal function wasn't completely accurrate, now it is 98% (except for IE on quirks mode but it's not too noticeable).

Features

• The target can be 'max' to scroll to the end while keeping it elegant.
• The plugin works on quirks mode.

Enhancements

• Default duration is 0 for jquery +1.3. Means sync animations.
• Rewrote $.fn.scrollable() again. The plugin works on all major browsers (FF, IE, Safari, Opera, Chrome), on all versions, compat & quirks modes, even for iframes.
• In addition to window/document, if html or body are received, the plugin will choose the right one.

Links

• Downloads
• Github Repo
• Demo
• Changelog

jQuery.ScrollTo 1.4 released!

Fixes

• Fixed the problem when scrolling the window to absolute positioned elements on Safari.
• Fixed the problem on Opera 9.5 when scrolling the window. That it always scrolls to 0.

Features

• Added the settings object as 2nd argument to the onAfter callback.
• The 3rd argument of scrollTo can be just a function and it's used as the onAfter.
• Added full support for iframes (even max scroll calculation).
• Instead of $.scrollTo, $(window).scrollTo() and $(document).scrollTo() can be used(even for iframes).
• Added $().scrollable() that returns the real element to scroll, f.e: $(window).scrollable() == [body|html], works for iframes too.

I rewrote the scroll limit calculations part, in order to fix the 2 bugs. If you notice any problem, please report.

This version should be perfectly compatible with the latest versions of SerialScroll and LocalScroll.

I tested this only with jQuery 1.2.6 (from trunk) but it should work well even with pretty old versions of jQuery.

Tested my demos and some iframe experiments on IE 6/7, FF 2/3, Safari 3 and Opera 9.2/5. All worked as expected. Enjoy!

Links

• Downloads
• Github Repo
• Demo
• Changelog

jQuery is on fire!

The jQuery team and the UI team have been working very hard lately to bring you these new outstanding releases.

jQuery 1.2.6

This release adds a ton of outstanding changes.

• Many many incredible speed improvements.
• A bunch of improvements to existing methods.
• A complete rewriting of the .attr() method, making it much more versatile and useful.
• Dimensions, by Brandon Aaron has been included into the core.
• Me!

Go see the official Blog post to see them all.

jQuery UI 1.5

The excellent jQuery UI Module got a new release.
It brings a ton of features and improvements, as well as a standarized API to manipulate all the widgets.
Go check their official Blog Post to learn all about it!

UI Enchant

UI has a set of +15 effects to be used along with the jQuery animations.

ThemeRoller

This widget, provided by the Filament Group, allows you to fine tune all your UI components and achieve a unique look for your work.
To read more about it, check the ThemeRoller Documentation.

Doctorate on jQuery.SerialScroll

Introduction

After replying to a large amount of comments and emails about jQuery.SerialScroll, I decided to comment some more about this plugin, also to publish some snippets, to achieve commonly desired effects or behaviors.
This should save you (and me :)) some time. It might also show you some additions, that you haven't considered.
I'll also try to show some more model calls to the plugin, so you can unattach yourself from those in the demo.

A little bit of theory

Before the snippets, I'll go through the basics, to refresh your mind.

Calls to the plugin

It can be done on two different kind of elements

• Element to be scrolled: This is what you normally do when you want one single instance of SerialScroll in a page.

  $('#pane').serialScroll({
  //...
  });
  

• Container: You might want to create many "SerialScrolls" in the page, you don't need to call it many times, just put the option 'target' to work.

  $('div.container').serialScroll({
  //...
  target:'div.pane',
  //...
  });
  

  This will allow you to have many divs with class container, which contain a scrollable div with class pane. They don't need to be divs.
  When doing this, the selectos for the arrows also become relative to the container, instead of absolute.
• Global call: If by chance, you want to scroll the window, you'll need to use this approach.
  

  $.serialScroll({
  //...
  });
  

  If, for some reason, you need to retrieve this implicit element, call:

  $.scrollTo.window();

  This will return you the element, don't use window or document.

onBefore

This setting, which is a callback, will empower some snippets, so you better learn about it.

$('div.container').serialScroll({
//...
onBefore:function( e, elem, $pane, $items, pos ){
//...
},
//...
});

Note that:

• The 'this' is the element that triggered the event.
• e is the event object.
• elem is the element we'll be scrolling to.
• $pane is the element being scrolled.
• $items is the items collection at this moment.
• pos is the position of elem in the collection.
• if it returns false, the event will be ignored.
• Those arguments with $ are jqueryfied.

The onAfter, only receives 'elem' as the first argument, and the 'this' is the element being scrolled ($pane but not jqueryfied).

The snippets

Now, what you really want, the code required to do all those fancy things, that the plugin doesn't do natively.
One note, all the snippets are wrapped with a document ready and they use symbolic ids. Needless to say, you don't need to copy the ids, or even USE ids.
Only the relevant settings are specified, so you will see "..." reminding that it's incomplete code.
You configure the selectors and the rest of the settings, according to your needs.

• Use constant auto-scrolling. getnew
• Hide the arrows when the limits are met. get
• Stop the auto scrolling on hover. get
• Scroll from right to left (or bottom to top). get
• Manipulate the widget using the keyboard. get
• Generate a pager based on the items. get

Concluding

I hope this helped and saved you some time, I also hope you learnt something new.
I plan to add more snippets as they come up from requests.
If you have any doubt, don't hesitate to ask.

Update 6/25/08

Added the constant scrolling snippet

jQuery.Modularize

Introduction

This small plugin(673 bytes!) enables you to have modular methods on jQuery.
It allows the developer to apply the module pattern, to the functions of jQuery.fn.
They can be used as namespace/module for more functions.
This helps keeping the rule of only claiming one name from the jQuery namespace.

Example

It takes a module declared like this:

$.fn.foo = function(){ ... };

$.fn.foo.bar = function(){ ... };

$.fn.foo.baz = function(){ ... };

And enables you to use it like this:

$(...).foo().bar( ... );

$(...).foo( .... );

$(...).foo().baz( ... ).foo().bar( ... ).foo( ... );

As showed above, the method that acts as module, can also be used as function.
To avoid using it as module, the function must receive arguments.

How to use

Basic call

$.modularize( 'foo' );

If $.fn.foo already exists, it will be used when $(...).foo(...) is called with arguments.
If $(...).foo(...) won't be used as method, then you don't need to declare it, just call the plugin before adding the sub-functions.

Providing a default method

$.modularize( 'foo', function(){ ... } );

The given function will be used when $(...).foo(...) is called with arguments.
This is a shortcut for declaring it, and then calling the plugin.

Nested calls

$.modularize( 'baz', null, $.fn.foo );

This allows:

$(...).foo().baz().foobar( ... )

Instead of null, you could send the default method.
Before doing this call, make sure you created $.fn.foo.

Miscellaneous

The 'this' (scope) of the methods, will always be pointing to the calling jQuery object, $(...).
The methods will be gathered on the first call to the function.
Thus, you can "modularize" before adding the sub-methods to the module, or after, it doesn't matter.

If you need to call the module and then add methods, or you just want the methods to be gathered each time, set

$.fn.foo.lazy = true;

You can set this to true, call the methods, and then reset to false.

Links

• Project Page
• Demo

Downloads

• jQuery.Modularize 1.0.0 Zip(all files and docs)
• jQuery.Modularize 1.0.0 Source(to learn or test)
• jQuery.Modularize 1.0.0 Minified(recommended)

jQuery.FastTrigger

What is it

This small plugin includes a clean and simplified version of jQuery.trigger, that will perform better and will specially scale better.

How is this achieved

Many useless steps are skipped when programatically triggering an event, this step that jQuery does no matter what, are not really necessary for triggered events, and some of them hit on perfomance badly. Most of them are not optimized for speed and scalability, but for reusability and code size.

Differences with trigger

This method supports array of data (can include an event object), namespaced events and exclusive triggering. The only known difference with jQuery.trigger is that this method doesn't trigger native handlers, so it's actually comparable to .triggerHandler().

Perfomance

This is method is at least 4 times faster than the regular trigger, and will scale much better as you call it more elements at once.

Global triggering

The equivalent for jQuery.event.trigger, is $.fastTrigger it accepts the same arguments as its prototype's counter-part, but triggers the event on all the elements in the page. This is a dangerous method to use, as it may hang the browser if the page has many elements, using $.fastTrigger won't solve the problem, but will surely perform better. This case should show off the previously mentioned (improved) scalability.

A few examples

$('ul li').fastTrigger('mouseover');//regular
$('h1').fastTrigger('click.foo');//with namespace
$('li p').fastTrigger('focus!');//exclusive
$('ul.list').fastTrigger('collapse');//custom event
$('#bar').fastTrigger('click', ['foo']);//data array
$.fastTrigger('keypress');//global triggering
$('a').fastTrigger('blur',[obj]]);//your event object

Links

• Project Page

Downloads

• jQuery.FastTrigger 1.0.0 Zip(all files and docs)
• jQuery.FastTrigger 1.0.0 Source(to learn or test)
• jQuery.FastTrigger 1.0.0 Minified(recommended)

jQuery.SerialScroll 1.2 released

I added a major release of jQuery.SerialScroll. It includes a ton of new features and allows close integration with jQuery.LocalScroll.

Fixes

• If you call the plugin on the same (scrollable)element more than once, the custom events get bound only on the first call.

Changes

• The event 'start' no longer receives the interval, you must set it at start, stop/start only pause/restart.

Features

• You can notify SerialScroll that the active item changed, by using the event notify.serialScroll.
• Thanks to the event notify, this plugin can be now closely integrated with LocalScroll(1.2.5 or higher).
• Also, thanks to notify, you can call SerialScroll on the same element more than once, and they interact nicely.
• You can specify the option 'target', and then the matched elements become the context of all the selectors, and target matches the element to be scrolled. This allows you to call SerialScroll on many element at the same time.
• You can combine the options 'jump' and 'lazy' (not adviced if no target is specified).
• LocalScroll and SerialScroll are so compatible, that they can use the same hash of settings.
• Added option 'constant'(true by default), specifies whether the speed must be constant or not.
• Added option 'navigation' to add a group of element to jump to the items.

Links

• Main Post
• Project Page
• Demo
• jQuery.ScrollTo
• jQuery.ScrollTo's demo
• Changelog

Downloads

• jQuery.SerialScroll 1.2.1 Source(to learn or test)
• jQuery.SerialScroll 1.2.1 Minified(recommended)
• jQuery.ScrollTo 1.3.3 Source(to learn or test)
• jQuery.ScrollTo 1.3.3 Minified(recommended)

I really advice using the minified versions. The code is optimized for those releases. Source versions should only serve to learn.

jQuery.SerialScroll 1.1 released

I added a major release of jQuery.SerialScroll. It doesn't have that many changes, but I really feel it made one step ahead.

Optimizations

• The animation is skipped if a bad position was received or it's the same as the actual. Saving some overhead.

Changes

• Changed the licensing from GPL to GPL+MIT.

Features

• The plugin binds 3 events to the container to allow external manipulation. They are clearly explained in the main post, please check it.
• Added 2 more arguments to the onBefore callback: actual item collection, index of the actual item in the collection.
• Added option 'interval', can be a number specifying the amount of milliseconds for autoscrolling.

I upgraded the main post and it has extensive and detailed documentation. Also added some more text and options to the demo.

Links

• Main Post
• Github Repo
• Demo
• jQuery.ScrollTo
• jQuery.ScrollTo's demo
• Changelog

Downloads

• jQuery.SerialScroll 1.2.2 Source(to learn or test)
• jQuery.SerialScroll 1.2.2 Minified(recommended)
• jQuery.ScrollTo 1.4.3.1 Source(to learn or test)
• jQuery.ScrollTo 1.4.3.1 Minified(recommended)

I really advice using the minified versions. The code is optimized for those releases. Source versions should only serve to learn.

jQuery.Listen 1.0 released

I updated jQuery.Listen and it got to it's first stable version. This release includes mostly features. A few optimizations and a couple of structural changes.
As specified in the change list, the licensing changed from GPL to GPL+MIT.

Optimizations

• Reduced the code size, this release (with all its features) is smaller than the previous one.
• Added many optimizations for minified code size.
• Improved the cleaning done on window.onload to avoid memory leaks.

Fixes

• The [].splice.call(arguments,..) wasn't working in my Opera.

Changes

• $.listen is not used for stopping/restarting the indexers.
  use $(..).indexer(...).(start|stop)() instead.
• Changed the licensing from GPL to GPL+MIT.

Features

• Added Jörn Zaefferer's approach of focusin/focusout. You can now safely listen for blur and focus events.
• Added $(..).indexer( event_name ) to get access to the indexers of the first matched element and $.indexer(..) to the global indexer.
• $.listen.fixes is a hash that maps event/fixedEvent. If you add a fix at $.event.special, add it to this hash and it will work automatically.
• It's possible to instruct indexers to emulate the natural bubbling like this: $(..).indexer( ... ).bubbles = true, use with discretion, will hit on perfomance.
• Added support for multiple events separated with spaces.

Kudos to Jörn Zaefferer for lending me the code that now allows listening for focus and blur!

Links

• Main Post
• Project Page
• Small demo
• Changelog

Downloads

• jQuery.Listen 1.0.3 Zip(all files and docs)
• jQuery.Listen 1.0.3 Source(to learn or test)
• jQuery.Listen 1.0.3 Minified(recommended)

I really advice using the minified versions. The code is optimized to those releases. Source versions should only serve to learn.

jQuery.SerialScroll

Notice

I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.

Introduction

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.

What's it for ?

jQuery.SerialScroll doesn't have one definite purpose. It's generic and adaptable. You can certainly use it as a screen slider. That is, to sequentially navigate a group of screens.
This plugin can also animate a text scroller in no time.
It can definitely handle slideshows, the high customizability of the scrolling effect lets you create beautiful animations.
You can even build an automatic news ticker!
Three of these uses are exemplified in the demo.
Remember, it's not restricted to these situations. It will take care of any collection of html elements that you want to scroll consecutively.

Settings and customization

jQuery.SerialScroll gives you access to a lot of options.
These are:

• target

  The element to scroll, it's relative to the matched element.
  If you don't specify this option, the scrolled element is the one you called serialScroll on.

• event

  on which event to react (click by default).

• start

  first element of the series (zero-based index, 0 by default).

• step

  how many elements to scroll each time. Use a negative number to go on the other way.

• lock

  if true(default), the plugin will ignore events if already animating. Then animations can't be queued.

• cycle

  if true, the first element will be shown after going over the last, and the other way around.

• stop

  if true, the plugin will stop any previous animations of the element, to avoid queuing.

• force

  if true, an initial scroll will be forced on start.

• jump

  if true, the specified event can be triggered on the items, and the container will scroll to them.

• items

  selector to the items(relative to the scrolled element).

• prev

  (optional)selector to the 'previous' button.

• next

  (optional)selector to the 'next' button.

• lazy

  if true, the items are collected each time, allowing dynamic content(AJAX, AHAH, jQuery manipulation, etc).

• interval

  If you specify a number, the plugin will add auto scrolling with that interval.

• constant

  Should the speed remain constant, no matter how many items we scroll at once ? (true by default).

• navigation

  Optionally, a selector to a group of elements, that allow scrolling to specific elements by index. Can be less than the amount of items.

• excludenew

  If you want the plugin, to stop scrolling before the actual last element, set this to a number, and that amount of items is ignored counting from the end.
  This is useful if you show many items simultaneously, in that case, you probably want to set this option to the amount of visible items - 1.

• onBefore

  A function to be called before each scrolling. It receives the following arguments: event object, targeted element, element to be scrolled, collection of items and position of the targeted element in the collection.
  The scope(this) will point to the element that got the event. If the function returns false, the event is ignored.

Also, you can use jQuery.ScrollTo's settings!
Check its demo to see all of them.

The option 'target'

This option is a new addition, included since 1.2.0.
Before, you needed to call the plugin once for each scrolled element.
When this option is specified, the matched elements are no longer the scrolled elements, but a container.
In this case, the selectors of prev, next, navigation and target will be relative to this container, allowing you to call SerialScroll on many elements at once.

External manipulation, event triggering

jQuery.SerialScroll automatically binds 3 events to the containers.
These are:

• prev.serialScroll

  Scrolls to the previous element.

• next.serialScroll

  Scrolls to the next element.

• goto.serialScroll

  Scrolls to the specified index, starts with 0.

• start.serialScroll

  (Re)starts autoscrolling.

• stop.serialScroll

  Stops the autoscrolling.

• notify.serialScroll

  Updates the active item.

This looks confusing, but it's not. You use it like this:

$(container).trigger( 'prev' );

$(container).trigger( 'next' );

$(container).trigger( 'goto', [ 3 ] );

$(container).trigger( 'start' );

$(container).trigger( 'stop' );

$(container).trigger( 'notify', [ 4 ] );

'notify' also accepts a DOM element(item), or any of its descendants.
$(container) is the element that gets scrolled each time. If you specified a 'target', then that element, else, the element you called the plugin on.
Note that to use 'start' and 'stop' you need to use the option 'interval' first.
If your container element already has any of these event names bound(odd!), then just add the namespace when you trigger.
You probably won't need to deal with these events, but if so, this is how.

What makes jQuery.SerialScroll so special ?

This plugin has many positive features, of course, it won't fit everyone's needs. That's impossible.

• Small Footprint

  This plugin is tiny, as said before, it requires jQuery.ScrollTo. Both plugins together, take less than 3.5kb minified.
  If by chance, you decide to include jQuery.LocalScroll, the 3 of them require less than 5kb. Including this plugin is not a bad idea, it can be used, instead of the option 'navigation' to build a widget with sequential and random scrolling.

• Highly customizable

  This plugin has many settings to customize, in addition, it can use jQuery.ScrollTo's settings. That makes 27 different options!
  If you take a while to analyze them all, you can make your work really unique.

• Accessible, degrades gracefully

  Probably many will automatically skip this part, shame on you!
  If you make sure non-javascript users will see the scrollbars, then they can perfectly navigate your content. You can show the scrollbars only for these few users, easily, using css/js.
  This is one of the main differences with many similar scripts, they generate the content and the styling using javascript.

• Adaptable

  jQuery.SerialScroll won't alter the html or styles at all.
  You are in control of the styles and content of your collections. You don't need the plugin to decide what html to use, or how many items to show simultaneously, and you can safely change that yourself, the plugin will always work.
  The items don't need to have fixed size, nor to be aligned. SerialScroll will scroll from one to the other, no matter what.
  If you want a plugin with premade styles or automatic generation of html, then you should consider any of jQuery carousels.

• Generic and reusable

  Finally, as mentioned before, this plugin can be used for many different situations and doesn't have one specific application.

Links

• Downloads
• Main Post
• Github Repo
• Demo
• jQuery.ScrollTo
• jQuery.ScrollTo's demo

jQuery.LocalScroll 1.2 released

A new major update of jQuery.LocalScroll has seen the light.
Two minor releases were added after it and is now at 1.2.2. I'll detail them all together:

Optimizations

• Replaced a $('[name='+name+']') for a document.getElementsByName(name) to critically improve perfomance.
• Small improvements to make the code shorter.

Fixes

• The last argument received by onBefore when scrolling the window, is no more $(window) but the real element being scrolled.

Changes

• Renamed the option 'persistent' to 'lazy', the latter seemed more adequate. Using 'persistent' will still work (backwards compatibilty)

Features

• Added the option 'stop', if true (default), each event will stop any previous animations of the target.
• Added the option 'lock', if true, the plugin will ignore events if already animating.
• Added $.localScroll.hash( settings ); which will scroll to the given element if the URL contains a valid hash.
• Removed the option 'cancel' that wasn't working well, and added the option 'hash'. It does what 'cancel' was meant to do, but in a different way.
  After a scroll, the hash( #some_id ) of the link is added to the URL.
  Note:This setting is not compatible with options like offset and margin, as the browser will natively scroll in the end.
  If you use the option 'target'(to scroll an overflowed element) and the window has overflow, setting the hash will scroll the window as well. So my advice is:
  only use 'hash' when scrolling the window.

jQuery.ScrollTo is now at 1.3.2, it has a new option called 'over', check its demo to see it in action.
jQuery.LocalScroll 1.2.x requires jQuery.ScrollTo 1.3.1 or higher.

Links

• Main post
• Github Repo
• Regular Demo
• AJAX Demo
• jQuery.ScrollTo
• jQuery.ScrollTo's demo (must see)
• Changelog

Downloads

• jQuery.LocalScroll 1.2.7 Source(to learn or test)
• jQuery.LocalScroll 1.2.7 Minified(recommended)
• jQuery.ScrollTo 1.4.3.1 Source(to learn or test)
• jQuery.ScrollTo 1.4.3.1 Minified(recommended)

I really advice using the minified versions. The code is optimized for those releases. Source versions should only be used to learn.

Feedback

I thought I'd create a post where readers could easily add general opinions and/or suggestions. The scope of this post is the entire blog, so it can be about any jQuery plugin, Maxthon's console, or the script to add Static methods to Array. General input about the blog is welcomed too.

Also I'd like to know, if someone's using any of these scripts on a site. So if you do, please let me know by posting a comment.

I also plan to make a list of sites using these scripts. So if you are interested, add the url and I'll link to your site.

jQuery.Preload

Introduction

This is an advanced multi-functional preloader, that has 4 modes integrated. Each mode suits a different, common situation.

Modes and settings

The modes are:

• URL

  Preload a JS array of static URLs.
   related settings:
  •  base: This string is prepended to the URLs.
  •  ext: This string is appended to the end of each URL in the array.

• Rollover

  Preload based on DOM images, slightly modifying their src.  Can be used for rollovers, or for image-thumb.
   related settings:
  •  find: String or regex that matches part of the srcs.
  •  replace: Replacement to the matched part, to generate the alternate URL.

• Placeholder

  Take regular images and set a placeholder image while they load. Show each original image when fully loaded. Allows sequential loading with a threshold.
   related settings:
  •  placeholder: URL of the temporal image shown while loading.
  •  notFound: Optional image to show if a given image failed to load.

• Link

  Preload images that appear in the href matched links.
   related settings: none.

There's also a threshold setting, that determines how many images are preloaded simultaneously, it is 2 by default.

Placeholder+Rollover Mode

Since 1.0.6, you can combine these 2 modes, for another common use.
If you have many images in a page, you might want to load a lighter version of them first, and then sequentially load and replace the real images.
To achieve this, use the light versions in the html, then preload the heavy ones as if they were rollover images(find+replace).
If you set 'placeholder' to true, each preloaded image will be set instead once it loads.

Callbacks

The hash of settings can also contain callback functions for 3 important moments of the preloading proccess.
They receive a hash of data, with information about the related image and the overall process.
The callbacks are:

• onRequest

  Called when requesting a new image.

• onComplete

  Called when a request is complete.

• onFinish

  Called when all images are fully preloaded.

Hash of data for the callbacks

The first argument of the callbacks will be a hash.
It contains the following information:

• loaded

  how many images were preloaded successfully.

• failed

  how many images failed the preloading.

• next

  0-based index of the next image to preload.

• index

  0-based index of the current image.

• done

  amount of preloaded images ( loaded + failed ).

• found

  whether the last image could be preloaded or not.

• total

  amount of images to preload overall.

• image

  URL of the related image.

• original

  The original source related to this image.

Troubleshooting

IE throws a "stack overflow" error.

I worked around this limitation of IE on 1.0.6.
If you still get this alert, you'll need to modify $.preload.gap, which is 14 by default. Reduce this number by 1 until it works. You need to exit the site each time, to be sure it works.
Try not to touch the original code, modify it from the outside.

I have many images and they seem to get un-cached

Try setting the option 'enforceCache' to true (+1.0.8).

Links

• Downloads
• Github Repo
• Demo
• Changelog

jQuery.Collection

This plugin generates generic collection classes, that work almost exactly as jQuery does. These collections include all those jQuery functions, that are used to manipulate the collection itself. The supported functions are:

  add, andSelf, attr, each, end, eq, extend, filter,
  get, implement, include, index, init, is, map, not,
  pushStack, setArray, size and slice.

The init() function included is a basic and generic one. It should be (likely) modified for each collection, to suit the needs. The include() function, is an invention of the plugin, it works similary to extend(), it will copy the listed attributes/methods from target to source. If target's not specified, then it will be the caller(like extend). The arguments are .include([ target,] source, methods ). Every collection will have a build() function, that will create a new collection class, that inherits from the caller. $.collection is a collection class by itself. So other collections will inherit from it, or its subclasses. The filter() function accepts:

• A function that returns true/false.
• Anything else will be taken literally and compared. Only those items included pass the filter. The filter can be an array of items.

$.collection(1,2,3,4).filter([2,3]);//--> [ 2, 3 ]

The function .not() works the same way, but matches the opposite.

Links:

• Project page

Downloads:

• jQuery.Collection 1.0.3 Zip(all files and docs)
• jQuery.Collection 1.0.3 Source(to learn or test)
• jQuery.Collection 1.0.3 Minified(recommended)

The project page at jQuery includes some examples of its use.
I really advice using the minified versions. The code is optimized for those releases. Source versions should only be used to learn.

jQuery.Rule 1.0 released

Important: The last release that appears in the project page, is not really the last one. See this release instead. Changes:

• Added semicolon to the start, for safe file concatenation.
• Minor changes for perfomance.
• Made many changes tp $.rule.fn.filter
  • The filtering function used to get element & index as arguments instead of element as 'this' and index as 1st argument.
  • String filters are no longer turned into regex, now they are compared (case insensitive) to each (splitted by comma) selector.
• $.data and $.removeData have been hacked to allow animations in IE. Some styles might fail, also rules precedence needs some kind of workaround.
• Added show/hide/toggle and slide functions to $.rule.fn.
• Improved the hack to $.curCSS, it returns some default values in case none is set, for animations. It needs some more work.
• Updated the API.
• Updated the demo.

Links:

• Main post of jQuery.Rule
• Project Page
• Demo
• jQuery.Rule's API

Downloads:

• jQuery.Rule 1.0.2 Zip(all files and docs)
• jQuery.Rule 1.0.2 Source(to learn or test)
• jQuery.Rule 1.0.2 Minified(recommended)
• jQuery.Rule 1.0.2 Packed(only for no gzip)

I really advice using the minified versions. The code is optimized for those releases. Source versions should only be used to learn.

jQuery.Accessible

What is this ?

• This plugin aims to be a collection of snippets that improve accessibility for websites.
• It also includes a set of "recommendations" coded as tests to improve accessibilty (even beyond javascript).
• These recommendations can be tested against a page, and get a summary of the results.

How to use it ?

• First add a call to jquery.js (duh!).
• Add jquery.accessible.js. This contains the engine for rules/fixes and a set of predefined ones.
• Right after this, you are ready to run the fixes by calling jQuery.accessible(). You can pass in a hash to specify, with the id and true or false, which ones to run. IMPORTANT: don't call this function inside document.ready, call it right away instead.

If you want to run the tests in your page:

• Add jquery.accessible.validator.js after jquery.accessible.js.
• Call jQuery.accessible.runTests(). (right away too)
• You can optionally indicate where to output the results, with a selector as first argument.

What else ?

• This plugin is mostly a proof of concept for now.
• The author's intention is to get developers to collaborate, in order to consolidate a large number of improvements to websites' accessibility.
• Allowing any developer to make his/her site, much more accessible, with little effort.

If you have something to say or contribute, please:

• Add a feature request.
• Or email me to aflesler(at)gmail(dot)com.

Links:

• Project page at jQuery Plugins
• jQuery.Accessible 0.1
• Demo

jQuery.Rule 0.9 released

Changes

• Made the code work faster.
• Extended $.fn with ownerNode,sheet,cssRules and cssText.
• Added text and outerText to $.rule and $.rule.fn.
• Made the example nicer.
• Removed $.fn.collect.
• Created an API.
• Added queue,dequeue,animate and stop to $.rule.fn (non-IE).
• remove() works in Opera 9 and Safari Win!
• $.rule.fn.filter now supports a regex as filter.

Links

• Main post of jQuery.Rule
• Project Page
• Demo
• jQuery.Rule's API

Downloads:

• jQuery.Rule 1.0.2 Zip(all files and docs)
• jQuery.Rule 1.0.2 Source(to learn or test)
• jQuery.Rule 1.0.2 Minified(recommended)
• jQuery.Rule 1.0.2 Packed(only for no gzip)