Ciao a tutti,
questo è il mio primo messaggio nel forum
Allora spiego subito il mio problema, voglio fare in modo che cliccando su un pulsante la pagina venga "coperta" da uno sfondo semitrasparente e che appaia un'immagine di loading, per intenderci l'effetto lightbox mentre si attende il caricamento di una foto.
Ora prendendo spunto proprio da lightbox, da cui ho estrapolato e modificato alcune funzioni sono riuscita a creare una pagina di esempio (vedi codice in basso), questo però ha un funzionameto quantomeno anomalo che descrivo:
Se metto un alert questo blocca il tutto finchè non lo chiudo. Ma non riesco ancora a capire perchè se tolgo l'alert non si visualizza più l'immagine di loading e il fondo semitrasparente.
Purtroppo non ho possibilità di caricare la pagina di esempio (potete comunque provarla voi in locale).
Vi spiego il comportamento che ottengo:
se lascio l'alert cliccando sul pulsante che imposta la funzione mostra a true il tutto viene eseguito correttamente (o almeno ottengo il comportamento voluto da me tranne per il fatto che compare l'alert) se tolgo l'alert al primo click sulla funzione mostra mi cambia solo il background, ossia lo mette a none eppoi non fa più niente (e non visualizzo neanche errori.
Ora riconosco che io e Javascript siamo all'opposto però neanche mi spiego il perchè di questo funzionamento. Potete aiutarmi? Sicuramente sbaglio qualcosa nel codice ma proprio non riesco ad individuarlo!
Di seguito il codice che potete provare in locale (lo sfondo e il loading usate quelli di lightbox).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
body {
background-color:#00CC00;
}
#scurisciPagina {
width:98%;
height:98%;
background:#00CC00;
z-index:1000;
}
</style>
<script language="javascript">
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
function mostra(vero) {
//SETTO I PARAMETRI PER L'IMMAGINE
var loadingImage = 'loading.gif';
var imgPreloader = new Image();
//SETTO I PARAMETRI PER CENTRARE L'IMMAGINE
var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();
//CREO E SETTO I TAG IMG E A
var objLoadingImageLink = document.createElement("a");
var objLoadingImage = document.createElement("img");
//RILEVO IL TAG BODY NELLA PAGINA
var objBody = document.getElementsByTagName("body").item(0);
//CREO IL DIV CHE CONTERRA' L'IMMAGINE DI LOADING
var objOverlay = document.createElement("div");
//SE CLICCO SUL PULSANTE ATTIVO LA FUNZIONE MOSTRA A TRUE
if(vero == true) {
//FINISCO DI CREARE E SETTARE IL DIV CHE CONTIENE L'IMMAGINE DI LOADING
objOverlay.setAttribute('id','overlay');
objOverlay.style.display = 'none';
objOverlay.style.position = 'absolute';
objOverlay.style.top = '0';
objOverlay.style.left = '0';
objOverlay.style.zIndex = '1000';
objOverlay.style.width = '100%';
//objOverlay.style.color = '#FFFFFF';
objBody.insertBefore(objOverlay, objBody.firstChild);
//objOverlay.style.left = (screen.width/2) - 10 + "px";
//objOverlay.style.top = (screen.height/2) - 10 + "px";
//objOverlay.innerHTML = "Caricamento in corso. Attendere prego.";
//CREO LA FUNZIONE PER IL CARICAMENTO DELL'IMMAGINE DI LOADING
imgPreloader.onload=function() {
//FINISCO DI SETTARE IL TAG A
objLoadingImageLink.setAttribute('href','#');
//APPENDO L'OGGETTO COMPLETO (IL DIV)
objOverlay.appendChild(objLoadingImageLink);
//LO CENTRO NELLO SCHERMO CON QUESTO METODO OPPURE...
objLoadingImage.style.left = (screen.width/2) + "px";
objLoadingImage.style.top = (screen.height/2) + "px";
//...UTILIZZO LE 2 FUNZIONI DELEGATE PER QUESTO
//objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
//objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
//MOSTRO A VIDEO L'OGGETTO COMPLETO
objLoadingImage.style.display = 'block';
//SETTO L'ALTEZZA DEL DIV CHE CONTINE IL LOADING IN BASE ALLA PAGINA
objOverlay.style.height = (arrayPageSize[1] + 'px');
//MOSTRO A VIDEO L'OGGETTO
objOverlay.style.display = 'block';
//SETTO I PARAMETRI DELL'OGGETTO IMG CHE CONTIENE L'IMMAGINE DI LOADING
objLoadingImage.src = loadingImage;
objLoadingImage.setAttribute('id','loadingImage');
objLoadingImage.style.position = 'absolute';
objLoadingImage.style.zIndex = '150';
objLoadingImage.style.border = '0px'
//APPENDO L'OGGETTO COMPLETO (L'IMMAGINE)
objLoadingImageLink.appendChild(objLoadingImage);
}
//IMPOSTO L'ATTRIBUTO SER DELL'IMMAGINE DI LOADING
imgPreloader.src = loadingImage;
//INFINE INSERISCO ALL'ID SCURISCI PAGINA, CONTENUTO NEL BODY, IL FONDO SEMI TRASPARENTE
document.getElementById('scurisciPagina').style.background='transparent url(overlay.png) repeat';
//INFINE QUANDO LA PAGINA E' CARICATA RIMUOVO GLI OGGETTI UTILIZZATI PER IL LOADING
if (document.all) { // Internet Explorer
alert("qua");
objOverlay.style.display = 'none';
document.getElementById('scurisciPagina').style.background='none';
} else if (document.layers) { // Netscape
//alert("quo");
objOverlay.style.visibility= 'hidden';
document.getElementById('scurisciPagina').style.background='none';
} else if (document.getElementById) { // Firefox
alert("qui");
objOverlay.style.visibility = false;
objOverlay.style.visibility= 'hidden';
document.getElementById('scurisciPagina').style.background='none';
}
}
}
</script>
</head>
<body id="scurisciPagina">
<a id="nasco" href="#" onclick="mostra(true);" style="color:#990000">SCURISCI</a>
<DIV>
testo della pagina
</DIV>
</body>
</html>