Tag: PrototypeJS

Scriptaculous beforestart (onstart) and afterfinish (onfinish) events for effects

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.


Get the mouse(cursor) position relative to an element with prototype

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


Use easy selecting html elements ($(‘elementID’).property) without prototype framework

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
}

;)


Mouse coordinates (absolute position) with prototype

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>

(continue reading…)


Copyright © 1996-2010 Re:morse.nl. All rights reserved.
iDream theme by Templates Next | Powered by WordPress