mootools: how to pass a variable?

[unwashed potato!]

ok this is very first time i am using mootools and i'm very lost with it so far so needing a quick bit of help.

i am playing around with the demos, this one at the bottom of the page, the morph to .myClass. I'm trying to alter it to work in different ways and so far i can get it to do simple things different.

now the problem i have is getting to to work for many different examples but only one at a time if that makes sense, so say i have box_44, box_32, box_39 if i clicked box_39 it only worked on box_39, box_32 it only works on box_32 etc. i have tried passing a variable to the function by the standard CSSmorphEffect(3) but mootools doesn't work with the typical onClick, the id of the element is just called CSSmorphEffect so i have no way of passing the function a variable as far as i can see.

anyone know how i can pass a variable to the function?

 

[Pulseammo]

I'm not sure I'm following you entirely so sorry if any of these questions are insulting .

You're wanting to click something, a div? And you want the div you just clicked to morph to another CSS class, is that correct?

Ok, so in the demo they've used a link to do this, and what they did was they added an event to the link that calls an inline function:

//THIRD EXAMPLE
53
54 var anotherEl = $('anotherElement');

.. snip snip ..

67 // Or we just use Element.morph
68 $('CSSmorphEffect').addEvent('click', function(e) {
69 e.stop();
70 // Changes the element's style to .myClass defined in the CSS
71 anotherEl.morph('.myClass');
72 });

Sorry about the line numbers. So say you wanted to click a div with the id box_39 all you have to do is wire the div up with the onclick instead of the link so:

68 $('box_39').addEvent('click', function(e) {
69 e.stop();
70 // Changes the element's style to .myClass defined in the CSS
71 $('box_39').morph('.myClass');
72 });

(Compare that to the same line numbers above). You can reference any page element with an ID in mootools by doing $('id_name'). If you had many box_39 box_40 etc, you can even wire these in a loop since all you pass to the $() is a string, so you can make up your ID names like

for ( int i = 0; i < 41; i++ ) {
$('box_' + i).addEvent('click', blah blah blah
}

etc.

Anyway, this is getting quite drawn out and messy. So if you need more help then I'll try to post back, but I think you need to clarify exactly what you are trying to do i.e. click a div, morph that div, click a link morph some div with the same number at the end of that link's id etc.

Hope this helps a bit though.

P.S Remember to wire events using mootools I think you need to wrap that in aside the domready event call, if you've used mootools before then you should know about that.

 

[unwashed potato!]

ah now i see (i think), ok knowing i can assign an event to any page element by referencing the id makes it much clearer now how to do it, i have done a quick test with random numbers and from what i can tell i can now alter it to work on the real page so thank you for the help pulseammo.

 

[unwashed potato!]

was hoping i wouldn't have to ask any more help but unfortunately i am.

been busy last few days but had a chance tonight to continue with this and got it so close to working just one small thing stopping me. the for loop i do with php works fine when displaying all the boxes, however the for loop i do with javascript does not, it's as though the loop doesn't exist as nothing ever happens with it. when writing each event separately then the effect works perfectly but not from the loop.

the code is pretty much exaclty as above,

for(var i = 0; i < 20; i++ ){
 $('box_' + i).addEvent('click', function(e) {
        e.stop();
        // Changes the element's style to .myClass defined in the CSS
        $('box_' + i).morph('.myClass');
    });

}

any reason this would not work?

 

[Pulseammo]

Hhmmm, the loop looks fine to me, I forgot though that mootools has better selectors (the dollar thing) than concatenating the strings to get elements.

If the loop isn't running, do you have the firebug addon installed in firefox (if you use it), it may give you hints if there is some kind of error.

I've not used mootools for a few months and in that time they released a new version, but in the older version you could do this to get all divs with an ID starting with box_:

window.addEvent('domready', function() {
	$ES('div[id^=box_]').each(function(element) {
		element.addEvent('click', function(e) {
			element.morph('.myClass');
		});
	});
});

Is your current loop inside of the dom ready event handler like my code btw? If your JS is before your divs and it runs immediately (outside of dom ready) I don't know if the browser will handle it properly.

Maybe these ideas will help a bit, I'm a bit rusty with this stuff . Also, remember in javascript you can do an alert("hello world") or whatever to help debug, may let you see if some code is being run?

 

[unwashed potato!]

ok i have figured out the problem, well i believe i have. i think it was having difficulty with using the value of i from the loop as a character rather then a digit, atleast this is what i am thinking as when i put the script in the head section of the page itself and then used php to do the loop it then worked, nothing different except using $i instead of i.

i tried setting i as a var but it didn't mak a difference. anything else i can try?

 

[Pulseammo]

anything else i can try?

$ES was removed from 1.2 it seems. I think this is the new way of doing it.

window.addEvent('domready', function() {
	$(document.body).getElements('div[id^=box_]').each(function(element) {
		element.addEvent('click', function(e) {
			element.morph('.myClass');
		});
	});
});

See the manual here: http://docs.mootools.net/Selectors/Selectors#Element:getElements

Edit: This may also work (and it's cleaner) but I'm not entirely happy about the "this." bit. Theres prolly a way to access the current element while the iteration is going, but I'm not sure if it's "this" or some other variable.

window.addEvent('domready', function() {
    $(document.body).getElements('div[id^=box_]').addEvent('click', function(e) {
		this.morph('.myClass');
    });
});