jQuery Notes

Basic ToolBox Module with globalToLocal Method

<script type="text/javascript">
	if(!window.console || typeof console.log !== 'function'){
		window.console = (function(){
			var me = {};
			me.assert = me.debug = me.error = me.fatal = me.log = me.info = me.warn = function(){};
			return me;
		})();
	}

	if(!document.head){
		document.head = document.getElementsByTagName('head')[0];
	}

	var ToolBox = (function($){
		var api = {};

		function init(){
			// Initialize ToolBox //
		}

		/**
		 * Convert a targets global offsets to the local scope
		 *
		 * @param	target	The target to to localize.
		 * @param	scope	The scope to localize to.
		 * @return	An object with localized left and top properties.
		 *
		 * @see http://www.bennadel.com/blog/1871-Translating-Global-jQuery-Event-Coordinates-To-A-Local-Context.htm
		 */
		api.globalToLocal = function(target, scope){
			var targetGlobalOffset = $(target).offset();
			var scopeGlobalOffset = $(scope).offset();
			var globalToLocal = {};
			globalToLocal.left = Math.round(targetGlobalOffset.left - scopeGlobalOffset.left);
			globalToLocal.top = Math.round(targetGlobalOffset.top - scopeGlobalOffset.top);
			console.log('[ToolBox][globalToLocal]', 'targetGlobalOffset:', Math.round(targetGlobalOffset.left)+'x'+Math.round(targetGlobalOffset.top));
			console.log('[ToolBox][globalToLocal]', 'scopeGlobalOffset:', Math.round(scopeGlobalOffset.left)+'x'+Math.round(scopeGlobalOffset.top));
			console.log('[ToolBox][globalToLocal]', 'globalToLocal:', globalToLocal.left+'x'+globalToLocal.top);
			return globalToLocal;
		}

		api.onReady = init;

		return api;
	})(jQuery);

	$(document).ready(ToolBox.onReady);
</script>

Page Ready

Browser Detection

$(document).ready(function(){
	// $.info('[pageReady]');
	var IE = !!document.attachEvent,
		// agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+\.{0,1}\d*\.{0,1}\d*))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?)|(?:Version\/)(\d+\.\d+\.{0,1}\d*\.{0,1}\d*))/.exec(navigator.userAgent),
		regEx = /(?:MSIE|Gecko|Firefox|GranParadiso|Iceweasel|rv|Chrome|Safari|WebKit|AppleWebKit|Mobile|Version).(?:\d[\d.]*)/gi;
		// regEx.g = true;
		// agent = regEx.exec(navigator.userAgent),
		agent = String(navigator.userAgent).match(regEx),
		IE9 = (agent[1] && (parseFloat(agent[1]) >= 9.0));
	$.info('[pageReady]', 'IE:', IE, ':: IE9:', IE9, ':: agent:', agent, ':: location.hash:', location.hash);
	// $.debug('[pageReady]', 'navigator.userAgent: '+navigator.userAgent);
	// $.debug('[pageReady]', 'document.referrer: '+document.referrer);
});

Improving jQuery?

Making jQuery.empty over 10x faster

<script type="text/javascript">
	jQuery.fn.removeAll = function(){
		var ret = [];
		this.each(function(){
			var newEl = this.cloneNode(false);
			this.parentNode.replaceChild(newEl, this);

			//Copy back events if they haven't been copied already by IE
			if(jQuery.support.noCloneEvent){
				cloneCopyEvent($(this), $(newEl));
			}

			ret[ret.length] = newEl;
		});
		return jQuery(ret);
	};
</script>

jQuery Plugins

jQUery jScrollPane Plugin

Handling window resize events.

$(window).resize(function(){ 
	var top = $('#my_scroller').css('top');
	$('#my_scroller').jScrollPaneRemove();
	$('#my_scroller').jScrollPane();
	$('#my_scroller').css('top', top);
});

jQuery SwapImage Plugin

<!--
Handles basic rollovers, click swap, double-click swap, click swap no restore and disjoint rollovers (all others in list and other target)
http://code.google.com/p/jquery-swapimage/
http://labs.xddnet.com/jquery-swapimage/example/example.html
-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.metadata.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.swapimage.min.js"></script>
<script language="javascript" type="text/javascript">
	// SwapImage Plugin //
	$(document).ready( onReady );
	function onReady()
	{
		$.swapImage(".swapImage");

		// Set focus on the first visible input field //
		$("input:visible:first").focus();
	}
</script>
<!-- Basic Image Rollover -->
<img class="swapImage {src: 'images/2.gif'}" src="images/1.gif" />

<!-- Disjoint Rollover: Others In List -->
<img id="i1" class="swapImage {src: 'images/a.gif', sin: ['#i2','#i3'], sout: ['#i2','#i3'] }" src="images/1.gif" />
<img id="i2" class="swapImage {src: 'images/b.gif', sin: ['#i1','#i3'], sout: ['#i1','#i3'] }" src="images/2.gif" />
<img id="i3" class="swapImage {src: 'images/c.gif', sin: ['#i1','#i2'], sout: ['#i1','#i2'] }" src="images/3.gif" />

<!-- Disjoint Rollover: Target Other -->
<img id="main" src="images/blank.gif" />
<img class="swapImage {sin: ['#main:images/a.gif'], sout: ['#main:images/blank.gif'] }" src="images/1.gif" />

Snippets

Simple Accordion

http://varnerin.info/2011/06/how-to-make-a-jquery-accordion/

Simple Image Rollover with jQuery

<script type="text/javascript" src="/assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	// Tiny Rollover Code //
	$(document).ready( onReady );
	function onReady(){
		$("img.rollover").hover( function(){ this.src = this.src.replace("-normal","-hover"); }, function(){ this.src = this.src.replace("-hover","-normal"); } );
	}
</script>
<img class="rollover" src="/assets/img/nav/about-normal.gif" width="77" height="33" alt="About Us"/>

Simple AJAX

<script type="text/javascript">
	var return_value = $.ajax({ type:"GET", url:"myfunction.php", async:false }).responseText;
</script>

Accessing DOM Elements

$("#target").context.nodeName
$("#target").get(0).nodeName
$("#target").get(0).tagName
$("#target")[0].tagName