Douglas on Web Applications

Using Prototype with jQuery

In theory jQuery plays nice with other libraries as its library, most plugins and "global" objects are stored inside the jQuery namespace. However, both Prototype and jQuery utilize the "$" as a shortcut. jQuery provides an easy workaround. Once the libraries have been loaded, at any time you can call:

 
//tells jQuery to ignore "$" and look for "jQuery" prefix
jQuery.noConflict();
 
//alternative, you can create your own shortcut
var q = jQuery.noConflict(); //assign to variable to create new shorthand
//example usage
q("div p").hide();
 

Tags: conflict, jQuery, prototype, workaround

Disabling a Form with Prototype

 
var form = $('form_id');
[form.disabled ? 'enable' : 'disable']();
form.disabled = !form.disabled;
 

Tags: disable, form, javascript, prototype

Simple Autocomplete with Scriptaculous

There may be times when you prefer to use a local autocomplete field rather than dropdown (or remote AJAX call). The simplest way is by using Scriptaculous Autocompleter.Local. The basic syntax is as follows:

 
new Autocompleter.Local(field_id,target_div_id,array_of_strings,options);

The first paremeter is the text field id and second is the div id of the autocomplete menu. The third parameter is the data array you are searching. Finally, the fourth are the various options which are as follows:

• choices - how many results to return (default: 10)
• partialSearch -If false, will match entered text only beginning of strings. If true, will match text at the beginning of any word in the strings. To search anywhere in the string, also set the option fullSearch to true (default: true)
• fullSearch - Search anywhere in array.
• partialChars - Number of characters to enter before searching begins (default: 2)
• ignoreCase - self-explanatory (default: true)

The following is an example of it's usage:

HTML:

<label for="my_contact_list">List of contacts:</label>
<input id="my_contact_list" size="32" type="text" />
 
<!--div to display results-->
<div class="autocomplete" id="customer_list" style="display:none"></div>
 

Javascript:

 
var contacts = [ 'Atwood, Frank',
'Brower, Karen',
'Drake, Francis',
'Guthry, William',
'Jackson, Mary',
'Lively, Lori',
'Whitley, Marta',
'Zemlicka, Chase'];
new Autocompleter.Local('my_contact_list', 'contact_list', contacts, { });
 

CSS:

div.autocomplete {
  margin:0px;
  padding:0px;
  width:250px;
  background:#fff;
  border:1px solid #888;
  position:absolute;
}
 
div.autocomplete ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
}
 
div.autocomplete ul li.selected {
  background-color:#ffb;
}
 
div.autocomplete ul li {
  margin:0;
  padding:2px;
  height:32px;
  display:block;
  list-style-type:none;
  cursor:pointer;
}

Tags: autocomplete, javascript, prototype, scriptaculous

AutoComplete Like “Facebook To:”

Extended Scriptaculous Autocomplete.Local to simulate Facebook's autocomplete address field:

• View Demo
• Download Zip

Tags: autocomplete, Facebook, prototype, scriptaculous

Semi Unobtrusive Rollovers with Prototype

This is in progress...

 
/*
 * Unobtrusive image rollover with Prototype library, v6.x
 *
 * Author Douglas Gintz
 * Copyright (c) 2008 ArtBuilders <www.artbuilders.com>
 *
 * This script is freely distributable under the terms of an MIT-style license.
/*------------------------------------------------------------------------------*/
var Rollover= Class.create();
    initialize: function() {
	   var scope = this;
        $$('img').each(function(item) {
			scope.addRollover(item,item.identify());
        });
    },
    addRollover: function(img,newURL) {
		if(typeof img=="string"){
			var id=img;
			img=null;
			//look up image by id
			if (document.getElementById) img = document.getElementById(id);
			else if (document.all) img=document.all[id];
			//if not found then look up by name
			if (!img) img=document.images[id];
			//else follow silently
			if (!img) return;
		}
		//if element found is not an img tag, fail
		if (img.tagName.toLowerCase() != "img") return;
		//keep track of original url
		var sourceURL = img.src;
		//preload rollover image
		(new Image()).src = newURL;
		img.onmouseover = function() { img.src = newURL; }
		img.onmouseout = function() { img.src = sourceURL; }
    }
}
Event.observe(window, 'load', function() {
    new Rollover();
});
 

Usage:

 
<!--uses ID to pass second URL-->
<img src="images/icon_plus.gif" width="29" height="23" id="images/icon_minus.gif">
 

Tags: ajax, javascript, prototype, rollovers, unobtrusive