Some people ONLY use the prototype javascript framework for JUST selecting elements with $(‘elementID’)!
This is totally unnecessary because you can make your own function like this:
function $(element) {
if (typeof element == "string") {
element = document.getElementById(element);
}
return element
}
Sometimes you just want to extend javascript with some “home made” functionality.
Prototyping (this has NOTHING to do with prototypejs framework!)
is like attaching custom methods to objects allready created,
in which all object instances then instantly share.
For example we want to have a function called count() for the Array() object,
that counts all the elements of an array and returns it.
//object.prototype.newFunctionName
//in the function: "this" is the Array object
//so this[0] would be 'hello'
Array.prototype.count = function() {
return this.length;
};
var myArray = [ 'hello', 'some', 'another', 'element'];
alert(myArray.count() );
This comes in very handy because you can make your own javascript add-ons.
(continue reading…)
Tutorial on how to get the mouse coordinates with prototype.
Download mouse coordinates sample code
I have seen a lot of questions about how to get the mouse coordinates (some call it absolute position) browser (IE, Firefox, etc.) compatible.
This is where prototype (download @ www.prototypejs.org) comes in handy!
- create a html file like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Remorse.nl get mouse coordinates</title> </head> <body> <div id="debug" style="position:absolute;left:0px;top:200px;width:200px;border:1px solid #000;height:20px;"></div> </body> </html>
In some rare cases you might want to add a self defined attribute to an element. This can be handy to store additional data you might need in your application. Take the following HTML code for example:
<form name="clientEdit" action="/client.php" method="POST">
<!-- ...other form stuff here... -->
<select name="client">
<option id="1" billable="1">Clint</option>
<option id="2" billable="0">Steve</option>
<option id="3" billable="1">Chris</option>
<option id="4" billable="1">Rick</option>
</select>
The added attribute ‘billable’ will be used to check if a client can be billed by our application. Using javascript you can disable the invoice button or display an alert when a non-billable client — in this case Steve — has been selected.
To get the billable attribute you can use the getAttribute() function like in the following example.
/* <![CDATA[ */
function createInvoice()
{
with(document.forms['clientEdit'])
{
if(client.options[client.selectedIndex].getAttribute('billable') == 1)
{
alert("Client is billable, create the invoice");
}
}
}
/* ]]> */
As you can see, it’s simple to get the value of the attribute.
You’ve seen them on different sites but those pesky little icons never used the right color scheme? Now you can create the icons fully automatically online via ajaxload.info.
