The jQuerires:

$(function() {
	$('.pagination').children().wrapAll('<div class="content"/>;');
	$('.next').click(function() {
		moveContent($('.pagination').scrollTop() + $('.pagination').height() - 9);
	});
	$('.previous').click(function() {
		moveContent($('.pagination').scrollTop() - $('.pagination').height() + 9);
	});
	function moveContent(newTop) {
		$('.pagination').scrollTop(newTop);
	}
});

The CSS:

.pagination {
     width: 300px;
     height: 300px;
     overflow: hidden;
     position:relative;
     border: 1px solid #eee;
     padding: 5px;
}
.content {
    position:absolute;
}
.next, .previous {
    color: black;
    background: #D6D6D6;
    padding: 5px;
    cursor: pointer;
}

The HTMLs:

<span class="next">next</span>
<span class="previous">previous</span>

<div class="pagination">
<h1>Whatever</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

See example:

The CSS:

.store-countries {
    padding-left: 20px;
    background-position: 4px 2px;
    background-repeat: no-repeat;
}
.store-countries option {
    padding: 0 0 0 24px;
    background-position: 2px 4px;
    background-repeat: no-repeat;
}
.store-countries option.Belgium {
    background-image: url(../images/icons/flags/be.gif);
}
.store-countries option.France {
    background-image: url(../images/icons/flags/fr.gif);
}
.store-countries option.Germany {
    background-image: url(../images/icons/flags/de.gif);
}

The jQueries:

function dropDownCountries() {
    $('.store-countries').find('option').each(function() {
        var country = $j(this).val();
        $(this).addClass(country);
    });

    var selectedFlag = $('.store-countries').find('option:selected').css('background-image');
    $('.store-countries').css('background-image',selectedFlag)

    $('.store-countries').change( function() {
        var selectedFlag = $('.store-countries').find('option:selected').css('background-image');
        $('.store-countries').css('background-image',selectedFlag)
    });
}

You create regexp to match current url pathname and remove trailing slash if present (as it could collide with the link in navigation in case trailing slash wasn’t present there.)

Then grab every link from the navigation and test its normalized href against the url pathname regexp and add a classname ‘current’ if it matches.

function menuCurrentHighlight(){
    var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
	/* create regexp to match current url pathname and remove trailing slash if present: */
    if( $('ul a').length>0 ) {
	    $('ul a').each(function(){
		// test its normalized href against the url pathname regexp
		if(urlRegExp.test(this.href.replace(/\/$/,''))){
		    $(this).addClass('current');
		}
	    });
	};
};

//Instead of
$(document).ready(function() {
    //document ready
});
//Use
$(function(){
    //document ready
});

//To run the script before the DOM has loaded (& without $ conflict):
(function($){
	...
})(jQuery);

Inject HTMLs:

var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

Chaining:

$('#myTable')
    .find('.firstColumn')
        .css('background','red')
    .end()
    .find('.lastColumn')
        .css('background','blue');

Create a function:

$.fn.makeRed = function() {
    return $(this).css('background', 'red');
}

$('#myTable').find('.firstColumn').makeRed().append('hello');

Check for something:

if( $(".active").length != 0 ){
	//Now the code here will only be executed if there is at least one active element
}

Find a Selected Phrase and Manipulate It:

//First define your search string, replacement and context:
var phrase = "your search string";  var replacement = "new string";
var context = $(body);

context.html(
	context.html().replace('/'+phrase+'/gi', replacement);
);

Add Pseudo-Selector Support in IE:

//add hover support:
function hoverOn(){
	var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
	$(this).addClass(currentClass + '-hover');
}
function hoverOff(){
	var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
	$(this).removeClass(currentClass + '-hover');
}
$(".nav-item").hover(hoverOn,hoverOff);

//add first-child support:
jQuery.fn.firstChild = function(){
	return this.each(function(){
		var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
		$(this).children(":first").addClass(currentClass + '-first-child');
	});
}
$(".searchform").firstChild();

Manage Search Box Values:

//set default value:
$("#searchbox")
	.val('search?');
	.focus(function(){this.val('')})
	.blur(function(){
		(this.val() === '')? this.val('search?') : null;
	});

Easily Respond to Event Data: jQuery passes an event parameter into all bound/triggered functions, which is commonly called e:

//We can get X/Y coordinates on click events:
$("a").click(function(e){
	var clickX = e.pageX;
	var clickY = e.pageX;
});

//Or detect which key was pressed:
$("window").keypress(function(e){
	var keyPressed = e.which;
});

Encode HTML Entities:

var text = $("#someElement").text();
var text2 = "Some <code> & such to encode";
//you can define a string or get the text of an element or field

var html = $(text).html();
var html2 = $(text2).html();
//Done - html and html2 now hold the encoded values!

Open External Links in a New Window:

$('a[rel$='external']').click(function(){
	this.target = "_blank";
});

How to tell when images have loaded:

$('#myImage').attr('src', 'image.jpg').load(function() {
    alert('Image Loaded');
});

Creating an HTML Element and keeping a reference

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created,
   I can just reference it from the "newDiv" variable */

var e = $("< a />", { href: "#", class: "a-class another-class", title: "...", css: {
        color: "#FF0000",
        display: "block"
    }});

Nesting Filters:

.filter(":not(:has(.selected))")

Toggle states:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Preventing an animation from repeating:

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Preloading images:

jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
};

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

Timer callback functions:

window.setTimeout(function() {
 $('#id').empty();
}, 1000);

Adding to the width with every click:

$("#box").one( "click", function () {
    $( this ).css( "width","+=200" );
});

Calculate which element is the highest:

    var t=0;
    var t_elem;
    var elem = $('.whattever');
    $("*",elem).each(function () {
	$this = $(this);
	if ( $this.outerHeight() > t ) {
	    t_elem=this;
	    t=$this.outerHeight();
	}
    });

Using jQuery for browser sniffing:

if ($.browser.mozilla && $.browser.version.indexOf('1.8.') > -1) {
  $('body').addClass('ff2');
}

// add a body class for firefox 3.0 only
if($.browser.mozilla && $.browser.version.substr(0,5)=="1.9.0") {
  $('body').addClass('ff3');
}

Increment or decrease an input quantity with plus & minus ‘buttons’:

function changeProductQuantity() {
        $('#form1').find(".plus").click(function(e)
	{
	    e.preventDefault();
            var currentVal = parseInt($('#form1').find('#qty').val());
            if (currentVal != NaN)
            {
                $('#form1').find('#qty').val(currentVal + 1);
            }
        });

        $('#product_addtocart_form').find('.minus').click(function(e)
	{
	    e.preventDefault();
            var currentVal = parseInt($('#form').find('#qty').val());
            if (currentVal != NaN && currentVal > 0)
            {
                $('#form1').find('#qty').val(currentVal - 1);
            }
        });
};

Basic JSON:

var json = [
    { "red": "#f00" },
    { "green": "#0f0" },
    { "blue": "#00f" }
];

$.each(json, function() {
  $.each(this, function(name, value) {
    /// do stuff
    console.log(name + '=' + value);
  });
});
//outputs: red=#f00 green=#0f0 blue=#00f

Example of using an argument:

function showHeight(ele, h) {
      $("div").text("The height for the " + ele +
                    " is " + h + "px.");
    }
    $("#getp").click(function () {
      showHeight("paragraph", $("p").height());
    });
    $("#getd").click(function () {
      showHeight("document", $(document).height());
    });
    $("#getw").click(function () {
      showHeight("window", $(window).height());
});

To activate:

$(document).ready(function(){
	expandableInfo('hiddenInfo', 'activation-button');
});

*where #hiddenInfo is the ID of the div to be revealed and #activation-button is the ID of the link to reveal the extra content.

var currentPos = null;

function expandableInfo(moreId, moreButton){
    var moreDivID = $('#'+moreId); //Id of expandable content div
    var moreButtonId = $('#'+moreButton); //Id of button for this content div
    var moreTextLink = $(moreButtonId).text(); //Link Text
    var moreHeight = moreDivID.height(); // Get the height of expandable content div

	//Set the expandable content height to 0 / Hidden!
        moreDivID.css({ height : 0 });

	//Scroll down past the header
	function scrollWinDown(){

		currentPos = $('html,body').scrollTop(); //Store Current position before we scroll
		var divPos = $(moreDivID).offset().top; // Position of div from top
		var buttonPos = $(moreButtonId).offset().top; //Position of button from top
		var amountToScroll = buttonPos - 50; // Distance to Scroll

		if ($(window).height() > divPos + moreHeight && currentPos ===0){
			//console.log('no need to scroll you!');
		}else{
			if (currentPos === 0){ //If user hasnt scrolled yet
				$('html,body').animate({scrollTop: moreHeight}, 500); //Move just the height of the div
			}else{
				$('html,body').animate({scrollTop: amountToScroll}, 500); // Move to the top of button
			}
		}
	}

	//Scroll down upto the header
	function scrollWinUp(){
		$('html,body').animate({scrollTop: currentPos}, 500); //Take user back to where they were
	}

	//More open and close functionality
	$(moreButtonId).click(
            function(){
                    if(moreDivID.hasClass('open')) // If the content is already on display
                    {
                            moreDivID.stop().animate({ height: 0 });  //hide it
                            moreDivID.removeClass('open'); // and remove the class
                            $(this).text(moreTextLink); // and change the text back
                            scrollWinUp();
			    return false;
                    }else{ // Otherwise
                            moreDivID.stop().animate({ height: moreHeight }); //Show the div
                            moreDivID.addClass('open'); //add the class
                            $(this).text('Close'); // change the text
			    scrollWinDown();
                            return false;
                    }
            }

    );

}

This code was devised by Hannah. Amazing.

[/javascript]
function toggleText(id) {
	$('#toggleText').hide();
	$('#displayText').click(function() {
		$('#toggleText').slideToggle();
		var text = $j(this).text() == 'View the content' ? 'Hide the content' : 'View the content';
		$(this).text(text);
	});
}
1

<p id="toggleText">Lorem ipsum, flotsum jetsum, and then some blah blah blah</p>

<span id="displayText">Hide info</span>

It is helpful to set the cursor to pointer, underline the span and add a hove effect with CSS to aid usability. An alternative method, to stop the initial flash of content, would be to use a link instead of a span (with return false or e.preventDefault in the javascript) and set the #displayText to display: none with CSS. The link would take the user to the content in a separate page.

1. Wrap the checkbox in a label:

<label>Save for later <input type="checkbox" value="1" name="list" class="checkbox" /></label>

2: Hide the checkbox and style the label:

.save-for-later {
	cursor: pointer;
}
.save-for-later input {
	display: none;
}
.checked {
	text-shadow: 1px -1px 1px rgba(68,68,68,0.4);
	position: relative;
	top: 1px;
	left: 1px;
}

3. Check the box when the label is clicked:

jQuery(function() {
    labelCheck();
});

function labelCheck() {
    $("#container .save-for-later").each( function(){
	$(this).find('input:checkbox').change(function() {
	    $(this).parent().toggleClass('checked');
	});
    });
}

$("h2 + p").addClass("Large");

Count list:

var myList = $('.myList');

for (i = 0; i < 1000; i++) {
    myList.append('This is list item ' + i);
}

Using the .hover() method:

$("p").hover(function () {
    $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
    var cssObj = {
      'background-color' : '#ddd',
      'font-weight' : '',
      'color' : 'blue'
    }
    $(this).css(cssObj);
});

Change dimensions of an element:

$("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }

    });
});

$(this) refers to all jQuery objects while this refers to the calling object in javascript. For example, we want to use .each and fadeIn() of jQuery after a selector such as below,

$('div#product').each(function(){
	$(this).fadeIn()
})

since fadeIn() is a jQuery effect function, we use $(this) but if we are not dealing with jQuery objects we use this instead.

$('.product').each(function(){
	var myClass = this.className; // provided you have multiple class product
})

Click on each word in paragraph:

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
    $(this).css("background-color","yellow");
});

Remove a word in a text:

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

Replace a div:

$('#thatdiv').replaceWith('<p>Your new content goes here</p>');

Append text:

$('#lal').append("<b>lol</b>");

Combine more than one effects in jQuery to animate and remove:

$("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });
});

Test if something is hidden using jQuery:

if($(element).is(":visible") == "true") {
       //The element is Visible
}

Center an element on the Screen:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

Smooth Scrolling:

$('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
      && location.hostname == this.hostname) {
       var $target = $(this.hash);
       $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
       if ($target.length) {
           $target.ScrollTo(400);
           return false;
       }
    };
 });

Equal Height Columns:

jQuery.fn.equalHeight = function () {
	var tallest = 0;
	this.each(function() {
		tallest = ($(this).height() > tallest)? $(this).height() : tallest;
	});
	return this.height(tallest);
}

//Now you can call equalHeight
$(".content-column").equalHeight();

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

//Usage:
$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});

Extending jQuery with a custom selector:

//extend the jQuery functionality
$.extend($.expr[':'], {  

    //name of your special selector
    moreThanAThousand : function (a){
        //Matching element
        return parseInt($(a).html()) > 1000;
    }
});  

$(document).ready(function() {
    $('td:moreThanAThousand').css('background-color', '#ff0000');
});

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

Access iFrame Elements:

var iFrameDOM = $("iframe#someID").contents();
//Now you can use find() to access any element in the iframe:

iFrameDOM.find(".message").slideUp();
//Slides up all elements classed 'message' in the iframe

Fade in page:

var $container = $("body");
$container.hide().fadeIn(400);

$("a").live('click', function(e) {
	e.preventDefault();
	$container.fadeOut(400, function() {
		document.location = this.href;
	});
});

The $() function


document.getElementById("id_of_element").style.color = "#ffffff";


The $() function reduces the code to:


$("id_of_element").setStyle({color: '#ffffff'});


Find by ID

<script type="text/javascript">
function test_byid() {
$("first").toggleClassName("highlight");
}
</script>

<p>
<span id="first">My ID is first</span><br/>
<a href="javascript:test_byid();">Test function test_byid</a>
</p>

Find by Class


<script type="text/javascript">
function test_byclass() {
$$("second").each(function(elmt) {
elmt.toggleClassName("highlight")
});
}
</script>

<p>
<span class="second">My class is second</span><br/>
<input type="button" onClick="test_byclass();" value="Test function test_byclass" />
</p>

Find by Tag


<script type="text/javascript">
function test_bytag() {
$$("em").each(function(elmt) {
elmt.toggleClassName("highlight")
});
}
</script>


<p><em>I'm in a em</em><br/>
<input type="button" onClick="test_bytag();" value="Test function test_bytag" />
</p>

Click Events

<script type="text/javascript">
document.observe('dom:loaded', function() {
  $("click").observe("click", function() {
    alert('Clicked!');
  });
});
</script>

<p><span id="click">Click me!</span></p>

<script type="text/javascript">
Event.observe(document, 'dom:loaded', function() {
  $("clickme2highlightID").observe("click", function() {
    $("clickme2highlightID").toggleClassName("highlight");
  });
});
</script>

<p><span id="clickme2highlightID">Click me to highlight ID</span></p>

<script type="text/javascript">
Event.observe(document, 'dom:loaded', function() {
  $("clickme2highlightID2").observe("click", function() {
    $("clickme2highlightanotherID").toggleClassName("highlight");
  });
});
</script>
<p><span id="clickme2highlightanotherID">Highlight me (ID)</span></p>
<p><span id="clickme2highlightID2">Click me (ID) to highlight another ID</span></p>

<script type="text/javascript">
Event.observe(document, 'dom:loaded', function() {
  $$(".clickme2highlightAClass2").each(function(elmt) {
    elmt.observe("click", function() {
      $("clickAClass2HighlightMe").toggleClassName("highlight");
    });
  });
});

</script>
<p><span id="clickAClass2HighlightMe">Highlight me (ID)</span></p>
<p><span class="clickme2highlightAClass2">Click me (Class) to highlight an ID</span></p>

<script type="text/javascript">
Event.observe(document, 'dom:loaded', function() {
  $("clickme2highlightID3").observe("click", function() {
    $$(".clickme2highlightaClass").each(function(elmt) {
      elmt.toggleClassName("highlight");
    });
  });
});
</script>
<p><span class="clickme2highlightaClass">Highlight me (Class)</span></p>
<p><span id="clickme2highlightID3">Click me (ID) to highlight a class</span></p>

<script type="text/javascript">
document.observe('dom:loaded', function() {
  $("clickme2highlightSomeClasses").observe("click", function() {
    $$(".someClasses").each(function(elmt) {
      elmt.toggleClassName("highlight")
    });
  });
});
</script>

<p>
<span class="someClasses">My class is 'someClass'</span> - <span class="someClasses">and so is mine</span><br/>
<input type="button" id="clickme2highlightSomeClasses" value="Click me to highlight some classes" />
</p>

<script type="text/javascript">
document.observe('dom:loaded', function() {
  $$(".clickme2highlightSomeID").each(function(elmt) {
    elmt.observe("click", function() {
      $("someID").toggleClassName("highlight");
    });
  });
});
</script>

<p>
<span id="someID">My ID is 'someID'</span><br/>
<input type="button" class="clickme2highlightSomeID" value="My class is clickme2highlightSomeID" /> - <input type="button" class="clickme2highlightSomeID" value="So is mine" />
</p>

Filter What You Find

<script type="text/javascript">
document.observe('dom:loaded', function() {
  $("click2").observe("click", function() {
    $$("span:first-child").each(function(elmt) {
      elmt.toggleClassName("highlight")
    });
  });
});
</script>

<p id="click2">Click to highlight first span</p>
<p><span>First span</span> <span>Second span</span></p>

The $$() function

In prototype, unlike jQuery, it’s important to consider the $$ function returns an array

// an array of element references
$("img1", "img2", "img3")
// an array of all input elements inside ID 'commentform'
$$("#commentform input")
// an array of all links with the class 'external'
$$("a.external")

Testing for an element

var elt = $('exampleDiv');
if (elt)
elt.update('Div content updated!');

<script type="text/javascript">

var elt = $('foo');

if (elt.hasClassName('hover')) { // does not reach this

}

elt.addClassName('hover');

if (elt.hasClassName('hover')) { // does reach this

}

</script>

<script type="text/javascript">

var elt = $('foo');
elt.observe('mouseover', function(e) {
this.addClassName('hover');
});
elt.observe('mouseout', function(e) {
this.removeClassName('hover');
});
</script>

Set Styles

<script type="text/javascript">
var elt = $('foo');
var styles = {
size : '18px',
fontWeight : 'bold',
background : '#f00',
padding : '10px'
}
elt.setStyle(styles);
</script>

Note: Some CSS properties (such as float) are reserved words, and must therefore be quoted in the style hash. For example, you would use styles = { ‘float’ : ‘left’; }

Get Dimentions

<script type="text/javascript">
var elt = $('foo');
// retrieve required dimensions var eltDims = elt.getDimensions();
var browserDims = document.viewport.getDimensions();
// calculate the center of the page using the browser and element dimensions
var top = (browserDims.height - eltDims.height) / 2;
var left = (browserDims.width - eltDims.width) / 2;
// set the style of the element so it is centered
var styles = {
position : 'absolute',
top : top + 'px',
left : left + 'px'
};
elt.setStyle(styles);
</script>

• update() – Used to update the inner HTML of the target element.
• select(), up(), down(), previous() and next() – Used to find other elements in the DOM relative to the target element.
• insert() – Used to add a new element to the DOM relative to the target element.
• remove()
• hide() and show() 

<script type="text/javascript">// <![CDATA[
Event.observe(window, 'load', function() {
var homeImg1 = $('homeimg1');
if(homeImg1.hasClassName('darkImg'))
{
$$('.page').first().addClassName('darkImgPage');
}
Cufon.set('fontFamily', 'Futura_BT_Light');
Cufon.replace('#home_nav .home_nav_links em');
});
// ]]></script>

<script type="text/javascript">// <![CDATA[
Event.observe(window, 'load', function() {
var homeImg1 = $('homeimg1');
if(homeImg1.hasClassName('darkImg'))
{
$$('.page').first().addClassName('darkImgPage');
}
Cufon.set('fontFamily', 'Futura_BT_Light');
Cufon.replace('#home_nav .home_nav_links em');
});
// ]]></script>

Using each in a loop

http://www.phpriot.com/articles/prototype-data-types/5

<script type="text/javascript">
function doSomething(item, i)
{
var output = $('output');

$$('#foo li').each(doSomething);
</script>

Other Enumerable Methods

There are a number of other methods that can be used with enumerable objects at http://prototypejs.org/api/enumerable.

Invoke

.invoke() allows you to call a single function on each element in the enumerable.


//hide all elements by using invoke() to apply the hide() method.

$$('#foo li').invoke('hide').

//remove the active class name from all elements

$$('#foo li').invoke('removeClassName', 'active').

// of course, this works on Prototype extensions

$('navBar', 'adsBar', 'footer').invoke('hide')

// because Prototype extensions return the element itself you can also chain ‘invoke’ calls:

$$('#windows div.close').invoke('addClassName', 'active').invoke('show');

<script type="text/javascript">
function onItemClick(e)
{
var item = Event.element(e);

$$('#foo2 li').each(function(item) {
item.observe('click', onItemClick);
});
</script>

With Event.findElement() you specify a tag name as the second argument

<script type="text/javascript">
function onItemClick(e)
{
var list = Event.findElement(e, 'ul');

$$('#foo3 li').each(function(item) {
item.observe('click', onItemClick);
});
</script>

Event.findElement() can only find ancestor elements based on their tag name. For more targeted search combine Event.element() with the up() method:

<div class="outer">
  <div class="inner">
    <ul id="foo4">
      <li>Click Me</li>
      <li>Click Me</li>
      <li>Click Me</li>
    </ul>
  </div>
</div>

<script type="text/javascript">
function onItemClick(e)
  {
  var item = Event.element(e);
  var outer = item.up(‘div.outer’);

  outer.setStyle({ backgroundColor : ‘#cf9′ });
  }

$$(‘#foo li’).each(function(item) {
  item.observe(‘click’, onItemClick);
});
</script>

<div id="foo5">
Click me
</div>

<script type="text/javascript">
function onFooClick(e)
{
var element = Event.element(e);

alert(‘You clicked the element!’);

element.stopObserving(‘click’, onFooClick);
element.update(‘Clicking me now does nothing’);
}

$(‘foo5′).observe(‘click’, onFooClick);
</script>

• Tutorials

• Eight Weeks of Prototype
• www.saschakimmel.com/2009/05/tutorial-how-to-use-prototypejs-on-your-site/
• 24ways.org/2005/easy-ajax-with-prototype
• www.saschakimmel.com/tag/prototypejs/

• Plugin Portals

• prototype-plugins.com
• ajaxian.com/by/topic/prototype
• scripteka.com

• Widgets

• protofish – ‘Suckerfish type’ dropdown
• protoflow – Slider ’3D’ Carousel
• lightview – Slider ’3D’ Carousel
• helpballoonjs – Tooltip
• dhonishow.de – Slideshow

• UI Libraries

• livepipe.net
• prototype-ui.com – Based on Prototype 1.6

• Progressive CSS
• Progressive JavaScripting
• Unobtrustive JavaScript
• Understand browsers and users
• Event Delegation
• Relationships
• Maintenance
• JQuery
• JQuery & XML

Here’s a download link: Behavioral separation and jQuery