Newsgroup: it.comp.lang.javascript
Titolo: opacity

Mettiamo che ho un div di cui voglio modificare l'opacità (solo in IE), 
quale è la sintassi?
So che il css è: filter: alpha(opacity=x) dove x è un numero che va da 1 a 
100.
Mettttiamo che il div abbia id "rettangolo", quale la sintassi?
Io ho scritto:
document.getElementById("rettangolo").style = "filter: alpha(opacity=100)";
e non mi funge, nel senso che mi dà errore...
saluti Summonix 

 alpha(opacity=100)";
ALT, ci sono riuscito :-) ma ho bisogno comunque del vostro aiuto.
Dunque, il codice è: 
document.getElementById("rettangolo").style.filter="alpha(opacity=100)";
Adesso volevo creare una sorta di effetto fade in, in cui si passa da 
trasparenza 0 a trasparenza 100 ma non riesco.
In pratica ho scritto questa breve funzioncina:

 In pratica ho scritto questa breve funzioncina:
Scusate, ho inviato per sbaglio!
La funzioncina è:
function ret(){
var cont = 20;
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
document.getElementById("rettangolo").style.filter="alpha(opacity=cont)";
}
Per il momento nessun effetto fade, perché stavo testando se funzionava, 
ossia se il rettangolo assumeva l'opacità del valore della variabile -cont- 
ma nulla di fatto, perchè?
Dopo avevo intenzione di creare l'effetto in questo modo, ma ci devo essere 
1000 errori... ecco di seguito la funzione per intero:
function ret(){
var tempo;
var cont = 0;
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
document.getElementById("rettangolo").style.background = "black";
document.getElementById("rettangolo").style.filter="alpha(opacity=cont)";
tempo = setTimeout("ret()",100);
if (cont == 100) {
clearTimeout(tempo);
}
}
saluti Summonix 

 clearTimeout(tempo);
Secondo me ti conviene non eseguire direttamente il setTimeout se
cont>=100; comunque sia devi salvarti l'handler della function per poter
rimuovere il setTimeout:
 
http://developer.mozilla.org/en/docs/DOM:window.clearTimeout
-- 
"Affacciati affacciati benedici, guardaci
 guardaci...guardaci!
 Tanto sono quasi duemila anni che stai a guardare!"
									    E.B.

 ha scritto nel messaggio 
news:1msmvljrjrp53$.19wc8443b4oyz$.dlg@40tude.net...

Allora, c'è un problema a monte che non riesco a risolvere, anche stando a 
quanto mi hai suggerito. In pratica la mia funzione è questa:
function ret(cont){
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
rettangolo.style.filter="alpha(opacity='+cont+')";
e nel body, per prova, ho inserito onLoad="ret(20)"
per vedere se me lo visualizza a opacità 20. Purtroppo però già qui non 
funziona, nel senso che mi visualizza il rettangolo completamente opaco, 
quindi ignora quel -cont-
Ho provato a mettere un valore numerico (tipo 20, per rimanere nell'esempio, 
e funziona). Perchè?
Il setTimeout e compagnia bella provo ad inserirlo dopo quando avrò risolto 
questo piccolo grattacapo.
Dove sbaglio?
ciao Summonix

 beh, ma cont vale zero e non cresce mai, come fai a fare un fade-in ? (a
Si, scusa, avevo dimenticato di inserire il contatore++
Ciuao Summonix 

 quindi ignora quel -cont-
e se metti, al post di cont, opacity=20, funziona?
Non è che so molto dei filtri di IE, ma non devi esplicitare anche lo
style? (vedi esempio in giro, style=alpha(opacity=20,style=0)) ?
Mi permetto di ripetermi: come mai non usi fade-in/out, visto che tanto
sono effetti IE-Only? vedo un comodissimo Fade per esempio:
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm
-- 
"Voi abili a tenere sempre un piede qua e uno là
 avrete un avvenire certo in questo mondo qua
 però la dignità
 dove l'avete persa?"
									    V.R.

 ".....alpha(opacity="+cont+")";
Ho trovato dove sbagliavo in questo punto!!!
IO scrivevo ".....alpha(opacity='+cont+')";
Mettevo le virgolette semplici. Perché non fungeva? In effetti non capisco, 
perché tu hai messo i doppi apici dappertutto? Pensavo che le virgolette 
interne dovessero essere diverse da quelle esterne.
Ciao Summonix 

 
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm
Ti ringrazio per l'esempio, se non riesco a risolvere da solo utilizzerò 
questo codice, anche se devo ammettere che preferirei renderlo crossbrowser 
il più possibile :-)
Vabbè, adesso vado a provare l'effetto fade, vediamo se mi riesce, e poi 
tornerò sicuramente qui perché lo voglio rendere compatibile almeno anche 
con Firefox.
ciao Summonix 

 il più possibile :-)
ma filter-alpha non è compatibile firefox ...


 Ti ringrazio per l'esempio, se non riesco a risolvere da solo utilizzerò
Evviva!!! Ce l'ho fatta!
Ecco la funzione:
function ret(cont){
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
rettangolo.style.filter='alpha(opacity='+cont+')';
cont++;
tempo = setTimeout("ret("+cont+")",10);
if (cont >=100) {
clearTimeout(tempo);
}
Adesso non mi resta che renderlo compatibile con Mozilla e sono a cavallo! 
Che dire, grazie a te, altrimenti non ci sarei mai arrivato.
Soltanto una domanda, non ho proprio capito il perché degli apici, ossia 
perché si ripetono gli stessi apici sia esternemente che internamente 
all'espressione come in: 'alpha(opacity='+cont+')' o in 
setTimeout("ret("+cont+")",10);
Ed infine, e qui so che cado nel ridicolo, non ho capito perché devo 
concaternare con il segno +. Ad esempio, perché non scrivere direttamente: 
setTimeout("ret(cont)",10);  cont non è una variabile? e allora perché deve 
essere messa tra virgolette?
Mi sa che mi confondo con php...
ciao Summonix 

 ma filter-alpha non è compatibile firefox ...
No, infatti... però adesso questo va bene per IE giusto?
Quindi adesso dovrei fare una distinzione. Se è IE faccio eseguire questo 
codice, se è Mozilla faccio eseguire altro codice, che devo sempre vedere
Ci provo e poi ti faccio sapere (chissà quel combino!)
ciao Summonix 

 essere messa tra virgolette?
vedi sopra: non è globale, non sa cosa sia cont quando eseguirà, dopo x
millisecondi, la chiamata ...
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

 - mozilla: -moz-opacity
Ok, dunque, adesso mi va con IE e con Firefox invece non mi funge. Ci sto 
sbarocciando di testa sopra, potresti darmi un'occhio al codice, please? 
Eccolo:
function ret(contIE,contMOZ){
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
if (document.all){
rettangolo.style.filter='alpha(opacity='+contIE+')';
contIE++;
tempoIE = setTimeout("ret("+contIE+")",10);
if (contIE >=100) {
clearTimeout(tempoIE);
}
} else {
rettangolo.style.opacity =''+contMOZ+'';
contMOZ++;
tempoMOZ = setTimeout("ret("+contMOZ+")",10);
if (contMOZ >=1) {
clearTimeout(tempoMOZ);


 stai indicando ret(20 (se cont vale 20)) ...
Un sec... ma in javascript se scrivo:
var mioNome = "Alessandro";
var presentazione = "Io mi chiamo mioNome" non funge????
Si deve scrivere per forza "Io mi chiamo "+mioNome ???
ciao Summonix 

 contMOZ++;
Qui ho sbagliato a scrivere, perché devo mettere
contMOZ = contMOZ+0.1;
ma non funge uguale.
Summonix 

In definitiva, la funzione che ho scritto è la seguente:
function ret(contIE,contMOZ){
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
if (document.all){
rettangolo.style.filter='alpha(opacity='+contIE+')';
contIE++;
tempoIE = setTimeout("ret("+contIE+")",10);
if (contIE >=100) {
clearTimeout(tempoIE);
}
} else {
rettangolo.style.opacity =''+contMOZ+'';
contMOZ = contMOZ+0.1;
alert(contMOZ); // qui ho inserito un alert per vedere se mi conta bene
tempoMOZ = setTimeout("ret("+contMOZ+")",10);
if (contMOZ >=1) {
clearTimeout(tempoMOZ);
}
}
}
Non funge, ed infatti l'alert che ho inseirito mi dà NaN (not a number?) 
Come sarebbe che non è un numero???
ciao Summonix

 0.50
  }
}
ciao 
mrz

 }
Perfetto. Grazie.
Intanto il codice che ho cavato fuori dopo un giorno di spremitura a freddo! 
:-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#rettangolo {
 visibility: hidden;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
var contIE=0;
var contMOZ=0;
function ret(){
var rettangolo= document.getElementById("rettangolo");
rettangolo.style.visibility = "visible";
if (document.all){
rettangolo.style.filter='alpha(opacity='+contIE+')';
contIE += 2;
tempoIE = setTimeout("ret("+contIE+")",2);
if (contIE >=100) {
contIE = 0;
clearTimeout(tempoIE);
}
} else {
rettangolo.style.opacity =contMOZ;
contMOZ = contMOZ+0.1;
tempoMOZ = setTimeout('ret()',50);
if (contMOZ >= 1) {
contMOZ = 0;
clearTimeout(tempoMOZ);
}
}
}
//-->
</script>
</head>
<body onClick="ret()">
<div id="rettangolo" style="position:absolute; width:200px; height:115px; 
z-index:1; left: 251px; top: 162px; background-color: #000000; 
layer-background-color: #000000; border: 1px none #000000;"></div>
</body>
</html>
Mi pare che funzioni. L'ho testato sia con Firefox che IE.
ciao Summonix

 quale è la sintassi?
ti hanno già risposto ma ti volevo chiedere hai mai provato jquery
http://jquery.com/
in home page c'è un esempio di quello che chiedi fatto con una riga di codice...
Saluti. Carlo.
-- 
Puoi chiamarmi con Skype, il mio id e' carlonike
Vuoi un sicuro e gratuito programma per la tua posta?
http://www.pegasusmail.tk
 o 
http://www.pmail.com

 codice...
Ciao Carlo, ci ho dato un'occhiata ed ho constatato che il codice è 
sintetico, però ho l'impressione che non otterrei quello che voglio. Io sono 
nato come web designer, poi mi son messo a "leggere" un po' di 
programmazione e se è più che vero che la programmazione è ancora un mondo 
sconosciuto per me, dall'altro ho una certa esperienza in fatto di design 
del web, e cerco sempre di ottenere il miglior "effetto". Ho visto l'esempio 
di quello che mi dici tu, che dovrebbe fare quello che chiedevo io, ed in 
effetti lo fa, ma non in maniera egregia, e soprattutto non lascia spazio 
alla creatività. Io invece le animazioni voglio crearle secondo il mio estro 
ed ispirazione del momento, e nessun linguaggio "precompilato" potrebbe mai 
aiutarmi a fare lo stesso.
ciao, e comunque grazie per il suggerimento, ho apprezzato.
Summonix 

 aiutarmi a fare lo stesso.
hai dato un'occhiata alla funzione animate?
http://docs.jquery.com/Effects
si possono fare tantissime cose... non insisto oltre


 Si deve scrivere per forza "Io mi chiamo "+mioNome ???
sì ... in netscape4 c'era il modo per includere il valore (stile php), se
ricordo bene una cosa tipo "io mi chiamo {mionome}", ma non penso esista
con firefox e simili.
-- 
"La realtà è un'illusione causata dall'assenza di alcool."
									      A.

 con firefox e simili.
Grazie per la precisazione.
ciao Summonix