Mini Guida Italiana - Applicare gli Effect di Script.aculo.us

[rempox]

Spero possa essere utile e considerato un minisito da poter essere pubblicato qui.

Senza alcuna pretesa - in relazione ad alcune richieste viste sul forum - ho pensato di realizzare una sorta di contenitore di esempi - con codice in chiaro da poter copiare ed incollare - anche per i neofiti in materia.

www.beatfly.net/dblog/

Buona lettura ed un saluto. Rempox

[andr3a]

solo alcune osservazioni:

- scriptaculous si basa su prototype e se una lib ne usa un'altra sarebbe meglio sfruttare entrambe piuttosto che una sola. E' il caso del document.getElementById, ad esempio, completamente inutile quando si ha prototype sotto poichè basta scrivere $('dom_id') e nient'altro.

- pensiamo anche a come applicare l'effetto tramite l'onClik direttamente sull'immagine
a parte l'errore (manca una c) è errato chiamare gli eventi in maiuscolo.

Secondo il DOM l'evento è click, senza la "on" davanti, siccome è un evento attribuibile sia da markup che in modo diretto da JavaScript si scrive onclick, tutto minuscolo.
Primo perchè l'evento onClick non esiste, viene interpretato SOLO sul layout perchè i browsers grazie all'orribile IE hanno dovuto imparare a non rispettare in questi casi gli standards, secondo perchè pensare che esisti un evento onClick porta la gente a scrivere in questo modo errato anche sul codice.

Questo, per farla breve, non funzionerà (giustamente)

document.getElementById("dom_id").onClick = function(){alert("click")};

..... mentre questo ovviamente e giustamente si

document.getElementById("dom_id").onclick = function(){alert("click")};

so che il secondo è un appunto apparentemente esagerato ma siccome come hai detto questa mini guida è anche per i più neofiti, che questi non imparino da subito che esiste un evento onClick ... no, casomai esiste onclick (e sul forum JS capita frequentemente questo errore, grazie anche a DreamWeaver che ha deciso che gli eventi si scrivono in quel modo errato).






P.S. vedo che ti stai "allontanando" da Flash anche tu


P.S.2 scusate il post tecnico

[Marsellus Wallace]

nel farti i complimenti per questo sito, rempox, approfitto per salutarti (sempre che tu ti ricordi di me, anni fa sul forum actionscript).
tutto bene?



PS. più in basso nel forum c'è un mio thread, con la segnalazione a un semplice sito. se ti fa voglia la tua critica è sempre molto gradita

[Raptusis]

bravo ! , sito molto utile, almeno per quanto mi riguarda.

quindi grazie




ciauz

[rempox]

Al contrario Andrea, sai che gradisco molto le tue precisazioni, infatti spesso mi trovo in difficoltà perchè utilizzando DW mi capita di sbagliare in automatico.

Appena posso correggo.

Ciao a tutti. Caio Marcellus !!!

[rempox]

Cia Anrd3a ho corretto l'errore di digitazione e la maiuscola, mi sembra però di aver riporato bene i codici in evidenza.

per il primo punto mi chiariresti se ho ben capito ??

a questo
onclick="new Effect.Fade(document.getElementById('myDemo'))

questo
onclick="new Effect.Fade($('myDemo'))

perchè negli esempi ho utilizzato anche onclick="new Effect.Fade(this)

Grazie. Rempox

[andr3a]

scusa il ritardo ... il discorso della dollar $ è che non richiede l'uso, mai, di document.getElementById



se l'evento è assegnato sul layout

<img onclick="..." ... />


ed è riferito allo stesso elemento che lo richiama


<img id="myimg" onclick="do_something($('myimg'))" ... />


non serve ricercare l'oggetto perchè dentro la stringa onclick il this sarà riferito all'oggetto stesso


<img id="myimg" onclick="alert($('myimg') === this)" />

che motrerà true, quindi è sufficiente il this.

<span id="test" onclick="alert(this.innerHTML)">Hello Span</span>

è la stessa cosa di

<script type="text/javascript">
onload = function(){
	$("test").onclick = function(){
		alert(this.innerHTML);
	};
};
</script>

che volendo è la stessa cosa di

<script type="text/javascript">
onload = function(){
	$("test").onclick = function(){
		alert($("test").innerHTML);
	};
};
</script>

ma in questo caso è superfluo ... avrebbe senso per fare qualcosa con un'altro elemento / id

<script type="text/javascript">
onload = function(){
	$("testata1").onclick = function(){
		alert($("contenuto1").innerHTML);
	};
};
</script>

[Mega69]

Buona la guida a scriptacolous, mi serviva proprio!