Div a comparsa

[semolino]

Perfetto!
Problema risolto!


Ora rimane l'incompatibilità con Safari! Ma non riesco a capire come sia possibile. Sembra quasi che dopo che finisce di caricare la div vada "sotto" alla div trasparente che la contiene. Non c'è un modo per metterla come livello sopra a tutte le div possibili? Lo z-index cosa serve? per caso è proprio per quello?

[dvjack]

lo z-index serve appunto per inalzare il livello di un div.
i menu a tendina ad esempio hanno z-index maggiore di 1 per poter sovrapporsi alla pagina.
Per safari cmq non posso aiutarti, mi spiace, prova con gli z-index....

[semolino]

Con gli z-index non cambia niente. Non capisco proprio perchè non funziona in modo corretto. Se elimino l'effetto fade, e quindi carico subito la div, funziona ovviamente.
Devo attendere che qualcuno lo testi con Safari.
Oppure non devo intervenrire con lo z-index all'intern del JS che comanda il fade?

// applica o nasconde l'opacità con link
function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}

function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}

Grazie.

[Dedozzo]

Ma per fare invece un div a scomparsa che elementi devo andare a cambiare?

[dvjack]

sempre quelli utilizzati in questo caso, ma al contrario
invece di aumentare il valore dell'opacità la devi andare a diminuire...
se invece vuoi che da visibile diventi non visibile istantaneamente, devi agire su:

visibility: visible/hidden;
oppure su
display: block/none;