evento associato a più records

[cybermarinella]

questa la pagina di esempio a cui sto lavorando

http://test.neuronica.it/slideshow/i...anteprime.php#


<script type="text/javascript">
window.addEvent('domready', function() {
var el = $('mari_');
el.addEvent('mouseover', el.fade.bind(el, [1]));
el.addEvent('mouseout', el.fade.bind(el, [0.2]));
});


// element = <?php echo($item)?> ;
//for(i=0; i<1; 1++){}

</script>

questo è il mio sorgente .. solito mootools di base per l'effetto


ho pensato a due soluzioni:
la prima che generi un loop che aggiunga all'elemento "mari_"+ id dell'mmagine (si chiama item o record?!)
dal ad ogni record assegnerò un id="mari_($row->id)"


la seconda soluzione che ragionando mi sembra la migliore è sfruttare la funzione bind per fare un evento che vada bene per ogni oggetto ... ma qui proprio non saprei come cominciare ...

grazie

[Xinod]

senza cicli e senza specifici id, hai gia' una classe css per gli elementi che devono comportarsi allo stesso modo (quadratino)
basta questo

		window.addEvent('domready', function() {
			$$('.quadratino').each(function(el){
				el.addEvent('mouseover', function(){el.fade(1)});
				el.addEvent('mouseout', function(){el.fade(0.2)});
			});
		});

ciao

[cybermarinella]

Grazie mille !!!
effettivamente è la soluzione ideale

mhh la transizione è molto lenta e rende tutto un po' "rottino".
immagino di poter trovare la soluzione aplpicando Fx.tween e controllandone la duration
...
posso chiedere nuovamente supporto se mi trovo in difficoltà!?!
grazie

[cybermarinella]

Non so come mai ma '.quadratino' non viene riconosciuto.
Funziona invece il getElements dove la transizione è un po' pesante.
Qui la funzione:

// window.addEvent('domready', function() {
// $('myGallery').getElements("div").each(function(el ) {
// el.addEvent('mouseover', el.fade.bind(el, [1]));
// el.addEvent('mouseout', el.fade.bind(el, [0.2]));
// });
// });


Sto tendando di usare fxTween per alleggerire 'sta transizione.
Non riesco a gestire la sintassi col getElemnts ...

window.addEvent('domready', function() {
var fadeIn = new Fx.Tween(".quadratino", {duration: 50});
fadeIn.start('opacity', '0.2', '1');
var fadeOut = new Fx.Tween(".quadratino", {duration: 100});
fadeOut.start('opacity', '1', '0.2');

$('myGallery').getElements("div").each(var(el){
el.addEvent('mouseover', el.fadeIn());
el.addEvent('mouseout', el.fadeOut());
});
})

Sono proprio all'inizio - entusiasta dei frameworks ma è una faticaccia!!

grazie

[Xinod]

Originariamente inviato da cybermarinella
Sono proprio all'inizio - entusiasta dei frameworks ma è una faticaccia!!

e' normale ti sia persa un minimo nella logica del framework
tirando di conseguenza un po' ad indovinare la sintassi
potresti fare cosi'

window.addEvent('domready', function() {
	$('myGallery').getElements('div').each(function(el){
		var effetto=new Fx.Tween(el, {duration:200,wait:false}).set('opacity',0.2);
		function fadeItIn(){effetto.start('opacity',1);}
		function fadeItOut(){effetto.start('opacity',0.2);}
		el.addEvent('mouseover',fadeItIn);
		el.addEvent('mouseout',fadeItOut);
	});
});

che nello specifico e' probabilmente piu' immediato scrivere cosi'

window.addEvent('domready', function() {
	$$('#myGallery div').each(function(el){
		var effetto=new Fx.Tween(el, {duration:200,wait:false}).set('opacity',0.2);
		el.addEvent('mouseover',function(){effetto.start('opacity',1)}).addEvent('mouseout',function(){effetto.start('opacity',0.2)})
	});
});

ciao

[cybermarinella]

GRAZIE!!!

mi per averti aiutato ad aggiungere un tassello all'apprendimento di mootools !!! - cerherò di capire meglio le regole della funzione corretta! Mi sa che parto da quella "scomposta"

ciao ciao!