Cross site Ajax plugin for Prototype

Thierry Schellenbach has implemented a Prototype plugin that allows you to do cross site remoting using the dynamic script tag method that other frameworks such as Dojo and jQuery have supported for awhile.

You can implement this by simply setting crossSite: true as a config parameter to Ajax.Request.

Code example:

new Ajax.Request('myurl', {
method: 'GET',
crossSite: true,
parameters: Form.serialize(obj),
onLoading: function() {
//things to do at the start
},
onSuccess: function(transport) {
//things to do when everything goes well
},
onFailure: function(transport) {
//things to do when we encounter a failure
}
});
the full information can be found on Thierry Schellenbach blog.

JavaScript Image effect library

Christian Effenberger wrote nice JavaScript library that let you apply an image mask (in the form of another image) to any image via unobtrusive CSS.

You can take a peek:
http://www.netzgesta.de/corner/

DP_Debug JavaScript Debugging Extensions

Jim Davis has released a simple little JavaScript dumping library, DP_Debug, that supports circular and recursive references, most system objects and specifies certain otherwise ambiguous conditions.

In addition the library allows for simple access to Query String and Cookie values and provides basic logging, code timing support and program integration support.

Full information can be found:
http://www.depressedpress.com/Content/Development/JavaScript/Extensions/DP_DeBug/
:-)

Prototype Library that helps store JSON data in cookies

Lalit Patel wrote JavaScript Library that helps to use JSON to store data in cookies.
The nice library is built on top of Prototype and gives you a simple API to put and get JSON values into cookies.

Full information and download:
Yummy JSON Cookies (using Prototype)

Code Example:
var jar = new CookieJar({
expires:3600, // seconds
path: '/'
});

var dog = {name: 'Jacky', breed: 'Alsatian', age:5};

jar.put('mydog', dog);
mydog = jar.get('mydog');

alert("My dog's name is " + mydog.name);
alert("He is " + mydog.age + " years old");
alert("He is an " + mydog.breed);

Enjoy :-)

CSS+Javascript Fancy menu

If you are looking for cool javascript+CSS menu, you can found one right here on link below:
devthought.com

I found it when I was surfing and looking for cool javascript and CSS stuff.

Compressed versions of Prototype

John-David Dalton Compressed some prototype version like:
1.4, 1.5rc0, 1.5rc1, 1.5 final.
His package can be download from:
Compressed prototype

He managed to get it down to 14.4kb.

ASP.NET JavaScript IntelliSense

A new release of Visual Studio “Orcas” shows off the intellisense features nicely, including:
1) Proactive Completion List: No more waiting for ‘.’
2) Keywords in Completion List: fun your way to function
3) ASP.NET AJAX Concepts in Completion List: Direct support for Atlas
4) IntelliSense from Script Libraries for ASPX Pages: Now you can see objects that exist in other external script files.

This comes along with the release of an updated Ajax Control Toolkit.

more information:
blogs.msdn.com

JavaScript Performance Validator

Hi,
There is great "JavaScript Performance Validator" tool that provides automatic source code performance analysis (profiling) of applications as they run.
Currently the tool works with Mozilla Firefox 1.0.6, Mozilla Firefox 1.5 and Flock 0.7. At present they cannot support Internet Explorer, although they want to support Internet Explorer.

More information can be found on the company (software verify) web site:
JavaScript Performance Validator

Even if you work with Internet Explorer and your application can also run with Mozilla this tool can help you, because often the performance problems are the same in both browsers.

moo.fx javascript effects library for prototype.js or mootools framework.

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.
It's very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won't let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

more information on moo.fx:
http://moofx.mad4milk.net/

Prototype Event Extension: Event.wheel(e)

Frank Monnerjahn created a Prototype Event extension which makes it trivial to use the mouse wheel in Prototype with Event.observe(..).
The demo shows this in action.
The Code:

/*
* Orginal: http://adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" themonnie @gmail.com
*/

extend(Event, {

wheel:function (event){

var delta = 0;

if (!event) event = window.event;

if (event.wheelDelta) {

delta = event.wheelDelta/120;

if (window.opera) delta = -delta;

} else if (event.detail) { delta = -event.detail/3; }

return Math.round(delta); //Safari Round

}

});

/*

* end of extension

*/

var counterSite=0;

function handleSite(e) {

counterSite += Event.wheel(e);

$('delta').innerHTML = counterSite +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) <0 ? 'down' : 'up' );

}

var counterDIV=0;

function handleDIV(e) {

counterDIV += Event.wheel(e);

$('divdelta').innerHTML = counterDIV +'#'+ Event.wheel(e) + ": " + (Event.wheel(e) <0 ? 'down' : 'up' );

}

Usage:
Event.observe(document, "mousewheel", handleSite, false);

Event.observe(document, "DOMMouseScroll", handleSite, false); // Firefox

Event.observe($('divdelta'), "mousewheel", handleDIV, false);

Event.observe($('divdelta'), "DOMMouseScroll", handleDIV, false); // Firefox

W3C DOM vs. innerHTML performance

On of the most important issue developer has to think of when he writes WEB 2.0, AJAX application is JavaScript and browser performance.
I found great test page that intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly from browser to browser.
W3C DOM vs. innerHTML
I hope this link will help improve your client code performance.

More information on JavaScript performance can be on:
The Microsoft Internet Explorer Weblog

Developer Notes for prototype.js

Hi,
Here is a great link that have full explanation on prototype.js, can used as Developer Notes.
http://www.sergiopereira.com/articles/prototype.js.html

JavaScript AJAX framework prototype dissected

Detail every method and property that was available on prototype AJAX framwork:
http://snook.ca/archives/javascript/prototype_disse/

JavaScript actsAsAspect

The idea is that you run actsAsAspect() on any JavaScript object,
and then your object receives 3 extra methods:

1. before()
2. after()
3. around()

You then can use those methods to setup the callbacks you need.

The Code:
function actsAsAspect(object) {
object.yield = null;
object.rv = { };
object.before = function(method, f)
{
var original = eval("this." + method);
this[method] = function()
{
this.rv[method] = f.apply(this, arguments);
if (this.rv[method] == false)
return false;
return original.apply(this, arguments);
};
};
object.after = function(method, f)
{
var original = eval("this." + method);
this[method] = function()
{
this.rv[method] = original.apply(this, arguments);
return f.apply(this, arguments);
}
};
object.around = function(method, f)
{
var original = eval("this." + method);
this[method] = function() {
this.yield = original;
return f.apply(this, arguments);
}
};
}

Example: Applying actsAsAspect() to window

actsAsAspect(window);
function haha() { return "HA Ha ha ha..."; }
after('haha', function() { alert(this.rv['haha']); });
haha();


Full information can be found:

http://beppu.lbox.org/articles/2006/09/06/actsasaspect