Meta20.net

Examples

Don't like writing <script> tag for every new JS You need ? Nobody likes. Thats why i wrote $.include.

Use it like this:

$.include('js/my-script.js');

It's similar plugin to that one written by Petko D. Petkov, but with couple of enchantments :

• Properly delayes onDomReady event
• Gives You control over order of loading scripts

Here is extended example:

$.include(
	// URL
	'js/my-script.js',
	// will be loaded after this script
	$.include(baseURL+'js/my-other-script.js')
);
$.include('js/src/behaviors.js',
	// dependencies can also be an array
	[
		$.include('js/src/jquery-metadata.js'),
		$.include('js/src/jquery.form.js')
	]
);

Source Code

/**
 * $.include - script inclusion jQuery plugin
 * Based on idea from http://www.gnucitizen.org/projects/jquery-include/
 * @author Tobiasz Cudnik <tobiasz.cudnik/gmail.com>
 * @link http://meta20.net/.include_script_inclusion_jQuery_plugin
 */
// overload jquery's onDomReady
if ( jQuery.browser.mozilla || jQuery.browser.opera ) {
	document.removeEventListener( "DOMContentLoaded", jQuery.ready, false );
	document.addEventListener( "DOMContentLoaded", function(){ jQuery.ready(); }, false );
}
jQuery.event.remove( window, "load", jQuery.ready );
jQuery.event.add( window, "load", function(){ jQuery.ready(); } );
jQuery.extend({
	includeStates: {},
	include: function(url, callback, dependency){
		if ( typeof callback != 'function' && ! dependency ) {
			dependency = callback;
			callback = null;
		}
		url = url.replace('\n', '');
		jQuery.includeStates[url] = false;
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.onload = function () {
			jQuery.includeStates[url] = true;
			if ( callback )
				callback.call(script);
		};
		script.onreadystatechange = function () {
			if ( this.readyState != "complete" && this.readyState != "loaded" ) return;
			jQuery.includeStates[url] = true;
			if ( callback )
				callback.call(script);
		};
		script.src = url;
		if ( dependency ) {
			if ( dependency.constructor != Array )
				dependency = [dependency];
			setTimeout(function(){
				var valid = true;
				$.each(dependency, function(k, v){
					if (! v() ) {
						valid = false;
						return false;
					}
				})
				if ( valid )
					document.getElementsByTagName('head')[0].appendChild(script);
				else
					setTimeout(arguments.callee, 10);
			}, 10);
		}
		else
			document.getElementsByTagName('head')[0].appendChild(script);
		return function(){
			return jQuery.includeStates[url];
		}
	},
	readyOld: jQuery.ready,
	ready: function () {
		if (jQuery.isReady) return;
		imReady = true;
		$.each(jQuery.includeStates, function(url, state) {
			if (! state)
				return imReady = false;
		});
		if (imReady) {
			jQuery.readyOld.apply(jQuery, arguments);
		} else {
			setTimeout(arguments.callee, 10);
		}
	}
});

If You liked Fancy Menu, but not necessarily feel the same to moo.tools (no offence) here You have similar widget for jQuery - Smooth Menu. It works for vertical lists too.

Examples are bare so it's easier to understand whats needed to implement it to your site. Love to see it in combination with rounder corners (imageless).