Re:morse.nl

The title of this post says it all.
I made a MINI script timer object that counts how long a certain piece of code runs (executes).
It’s very handy for optimizing youre code!

The output is displayed in seconds with 3 digits behind the comma.
if you just want milliseconds remove the “/1000″ from:

this.scriptRunTime = (this.stopTime - this.startTime)/1000;

The code:

/**
 * javascript script timer
 * example:
 * scriptTimer.startTimer();
 * alert('hello');
 * scriptTimer.stopTimer();
 * alert(scriptTimer.scriptRunTime);
 *
 */
var scriptTimer = {
	scriptRunTime : 0,
	startTime : 0,
	stopTime : 0,
	startTimer : function(){
		time = new Date();
		this.startTime = time.getTime();
	},
	stopTimer : function(){
		time = new Date();
		this.stopTime = time.getTime();
		this.scriptRunTime = (this.stopTime - this.startTime)/1000;
	}
}

(continue reading…)

In javascript there is no function for printing variables like you have PHP, I use print_r and var_dump alot in PHP for dumping variables
so I wanted to create a simular function in javascript.

If you want to walk through unknown child objects in javascript you can use a operator called ‘in’ like this:

//Create a object
element = {child1: 'First child', child2: 'Second child'};

string = '';

//Loop through all the child objects in element
for(property in element)
{
	//Add the name and value of the child object
	string += property + ': '+ element[property] + ''+ '\n';
}
//Ouput the result
alert(string);

(continue reading…)

I searched the web ALOT of times to see if there is an event/property or function in scriptaculous to see
if an effect is started or finished. I couldn’t find it anywhere on the web (yeah I did searched at the website of scriptaculous first)!
A friend of mine DID find a sollution for it and it’s VERY easy!

To bad that scriptaculous has not documented it at all,
but i think they did that for a good reason but i dont
know which one .

Let’s see:

beforeStart : is called before the effect start
afterFinish : is called after the effect finished

This also works for Effect.Parallel !!!!

Example:

new Effect.Morph($('someDiv'), {
	style: {
		height: '200px',
		width: '200px'
	},
	beforeStart: function(){ alert('effect started'); },
	afterFinish: function(){ alert('effect finished'); }
})

Parallel example:

    new Effect.Parallel([
		new Effect.Move($('someDiv'), {
	        sync: true,
	        x: 300,
	        y: 300,
	        mode: 'absolute'
	    })
		,
		new Effect.Morph($('someDiv'), {
	        sync: true,
	        style: {
	            height: '200px',
	            width: '200px'
	        }
	    })

	], {
        duration: 1,
		beforeStart: function(){
            alert('effect started');
        },
        afterFinish: function(){
            alert('effect finished');
        }
    });

Basicly i dont know the impact to the effects if ya use this solution.

But it works just fine.

In the tutorial “Mouse coordinates (absolute position) with prototype” i have show u how to get the mouse position.

But sometimes we just want to know if the mouse is in a certain element and what position is the mouse in the element.
We use prototype for this.

Download the sample project: project.zip .

In the body of the html we create a div with id debug for showing some important information.
And we create a div with id container, we want to see if the cursor moves over the container-div and get the relative position
of the cursor in the div. (continue reading…)

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…)