Re:morse.nl

Sometimes we just want to display the website if all the images are loaded.
Or do something when a few images are loaded and viewable in the browser.

This script makes it very easy for you!
(continue reading…)

Scenario:
Sometimes u have an image tag in youre html file that is VERY big, and u want to read the height, width or something else in youre javascript.
You create a nice onload function that triggers when the dom is loaded.
You didnt set the width and height attribute in the image tag because u want it to be just as big as it is.

This specific prototype function tries to read the height: “$(‘someimage’).getHeight()” but what the f… :
height is 0, nothing or undefined????
(continue reading…)

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