animazioni java, anomalie in IE6-IE7

**TeraBIT** · 26-11-2008, 14:11

nella mia pagina index ho inserito, come da oggetto, delle animazioni java, due per la precisione.
la pagina si comporta correttamente in tutti i browser, almeno al primo caricamento, compare il logo flash, quando questo finisce richiama la funzione che fà partire il preload, che a sua volta esegue prima il fade-in della barra di preload, a caricamento effettuato c'è il fade-out di quest'ultima e contemporaneamente il fade-in del div contenente i link per accedere al sito in italiano o inglese (con background animato della bandiera "proiettata" sotto che si illumina al passaggio del mouse sui[*] che contiengono i link testuali)

come detto, tutto questo succede al primo caricamento, ma in explorer 6 funziona solo la prima volta, se si prova a ritornare alla pagina o cliccando su un link ad essa relativa, o facendo il refresh, o richiamando l'indirizzo dalla barra degli indirizzi del browser ogni volta si comporta in modo diverso :

-sparisce il background della pagina
-non compare la barra ma compare la percentuale
-compaiono i link con background ma senza animazione
-c'è il background solo al link in italiano ma senza animazione
-compare il logo flash e fade in dei link ma senza alcun background(della pagina e dei[*])

questo grosso modo è il problema più grave, in explorer 7 invece se si refresha la pagina l'animazione dello sfondo dei link non parte più

in firefox si comporta in modo strano se si torna alla pagina usando la funzione history-back del browser, i div dei link sono già visibili e la barra del preload tenta di avanzare oltre il 100% (ma ho risolto parzialmente inserendo un controllo prima dell'inizio del preload, così se trova i[*] visibili la barra non avanza perchè il preload è già completo)

vi posto di seguito i codici rispettivi, se riuscite a capire cosa c'è che non và mi fate un favore enorme perchè non sò più dove sbattere la testa...

__________________________________________________ ___________________________

questo è il codice del preload

codice:

function preFIRE()  {if(document.getElementById('ling').style.visibility != "visible")
setTimeout("fade('bar')",1300);
setTimeout("fade('bg')",1300);
setTimeout("fade('loadER')",1300);
setTimeout("fade('percent')",1300);
setTimeout("startLoading()",1750);
}

var pics = new Array(<? ?>);



/////URL DOPO LA FINE DEL DOWNLOAD
var url = "it/index.html";

/////MESSAGGIO POPUP DI CONFERMA NEL BROWSER
var doConfirm = false;

/////SKIP PRELOAD
var canSkip = false;





var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;


function getLayer(layerID) {
if (document.getElementById)
	return document.getElementById(layerID);
else if (document.all)
	return document.all[layerID];
else 
	return null;
}



function startLoading() {
if (document.getElementById || document.all)
	{
	barLayer = getLayer("bar");
	percentLayer = getLayer("percent");
	statLayer = getLayer("stat");
	doneMsgLayer = getLayer("doneMsg");
	
	loadERLayer = getLayer("loadER");
	loadINGLayer = getLayer("loadING");
	loadEDmLayer = getLayer("loadEDm");
	loadEDpLayer = getLayer("loadEDp");
	lingLayer = getLayer("ling");
	barLayer = getLayer("bar");
	bgLayer = getLayer("bg");


	if (canSkip)
		doneMsgLayer.innerHTML = "<span></span><a href=\"javascript:done()\"><font face=\"Arial\" color=\"#CCCCCC\" size=\"1\">Skip Pre-Load</font></a>";
	for (i=0; i<pics.length; i++)
		{
		imgObjs[i] = new Image();
		imgObjs[i].onload = imgLoaded;
		imgObjs[i].onerror = imgFailed;
		imgObjs[i].src = pics[i];
		}
	}
else
	{

	window.location.replace(url);
	}
}


function imgLoaded() {
loaded++;
if (loaded>pics.length)
return
updateBar();
}


function updateBar() {
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
	{
	cPercent = percent;
	barLayer.style.width = (cPercent*3) +"px";
	percentLayer.innerHTML = "<font font-family: Arial, Helvetica, sans-serif;color: #FFFFFF;font-size: 9px;>" +cPercent+ "%</font>";
	statLayer.innerHTML = "<font font-family: Arial, Helvetica, sans-serif;color: #FFFFFF;font-size: 9px;>" +loaded+ "/" +total+ "</font>";
	}
if (loaded == total)
	{
	doneMsgLayer.innerHTML = "";
	////per entrare nel sito <a href=\"javascript:done()\"><font face=\"Arial\" color=\"#FFFFFF\" size=\"1\"></font></a>
	
		////loadERLayer.style.visibility = 'hidden';
		loadINGLayer.style.visibility = 'visible';
		///loadEDmLayer.style.visibility = 'visible';
		///loadEDpLayer.style.visibility = 'visible';
		lingLayer.style.visibility = 'visible';
		fade('ling');
		fade('bar');
        fade('bg');
        fade('loadER');
        fade('percent');
        
		///////////////REINDIRIZZAMENTO AUTOMATICO///////////setTimeout("done()",1500);


	if (doConfirm && confirm("Download terminato, andare all'Home page?"))
		done();
	}
}


function done() {
parent.window.location.replace(url);
}


function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site about this.  The program will skip this file now.");
loaded++;
updateBar();
}

ho tentato di associare l'animazione del preload (i 4 timeout iniziali) a un div che li contenesse tutti ma misteriosamente non funziona, parte solo in quel modo...

questo è il codice che fà comparire/scomparire gli elementi di cui viene specificato il div(fade),
ciascun elemento ha le seguenti proprietà CSS :
{filter:Alpha(opacity=00);-moz-opacity:0.0;opacity:0.0}
lo script le incrementa gradualmente facendo così apparire gli elementi dal nulla...

codice:

var TimeToFade = 400.0;

function fade(eid){

var element = document.getElementById(eid);
if(element == null)
return;

if(element.FadeState == null){
element.FadeState = -2;
}

if(element.FadeState == 1 || element.FadeState == -1){
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;

}else{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime()
+ ",'" + eid + "')", 33);
}
}

function animateFade(lastTick, eid){

var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if(element.FadeTimeLeft <= elapsedTicks){

element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '80' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;

return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;

element.style.opacity = newOpVal;
element.style.filter =
'alpha(opacity = ' + (newOpVal*80) + ')';

setTimeout("animateFade(" + curTick
+ ",'" + eid + "')", 33);
};



function toggleDisplay(eid) {

var element = document.getElementById(eid);
if(element == null)
return;


  if(document.getElementById(eid).style.display == 'none' ) {
    document.getElementById(eid).style.display = 'block';
	
  }else{ setTimeout("setNone('"+eid+"')",TimeToFade);
    
  }
}

function setNone(eid)
{
document.getElementById(eid).style.display = 'none';
}

il seguente invece è il codice per animare il background (ormai lo conoscete benissimo...

)

codice:

if (document.getElementById && document.getElementsByTagName) {
if (window.addEventListener) window.addEventListener('load', initAnims, false);
else if (window.attachEvent) window.attachEvent('onload', initAnims);
}

function initAnims() {

	classChange(document.getElementById('ling'),'scriptactive','noscript')
	var animElements = document.getElementById('ling').getElementsByTagName('li');
	for(var i=0; i<animElements.length; i++) {
		animElements[i].bgAnim = {
		iPos:[0,0],
		pUnit:['%','px'],
		cFrame:0,
		mFrame: 14,
		dPos:[0,-80],
		mSec:15
		}
		animElements[i].onmouseover = backPosAnimF;
		animElements[i].onmouseout = backPosAnimR;
		}


	function backPosAnimF() {
		doBackPosAnim(this,this.bgAnim,this.bgAnim.cFrame, this.bgAnim.mFrame);
	}
	
	function backPosAnimR() {
		doBackPosAnim(this,this.bgAnim,this.bgAnim.cFrame, 0);
	}
	
	
}

function doBackPosAnim(elem,vrH,startFrm,endFrm) {
	if (vrH.intID) window.clearInterval(vrH.intID);
	var actStep = 0, steps = Math.abs(endFrm - startFrm)+1;
	vrH.intID = window.setInterval(
		function() {
			vrH.cFrame = easeInOut(startFrm,endFrm,steps,actStep,1);
			vrH.cPos = [
				vrH.iPos[0]+vrH.cFrame*vrH.dPos[0], 
				vrH.iPos[1]+vrH.cFrame*vrH.dPos[1] 
 				];
			elem.style.backgroundPosition = vrH.cPos[0]+vrH.pUnit[0]+' '+vrH.cPos[1]+vrH.pUnit[1];
			actStep++;
			if (actStep > steps) window.clearInterval(vrH.intID);
		}
		,vrH.mSec)
}

function doBackPosChange(elem,vrH,startPos,endPos,steps,intervals,powr) {
	if (vrH.intID) window.clearInterval(vrH.intID);
	var actStep = 0;
	vrH.intID = window.setInterval(
		function() {
			vrH.cPos = [
				easeInOut(startPos[0],endPos[0],steps,actStep,powr),
				easeInOut(startPos[1],endPos[1],steps,actStep,powr)
				];
			elem.style.backgroundPosition = vrH.cPos[0]+vrH.pUnit[0]+' '+vrH.cPos[1]+vrH.pUnit[1];
			actStep++;
			if (actStep > steps) window.clearInterval(vrH.intID);
		}
		,intervals)
}

function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
	totalSteps = Math.max(totalSteps,1)
	var delta = maxValue - minValue;
	var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
	return Math.ceil(stepp)
}

function classChange(elem,addClass,remClass) {
	if (!elem.className) elem.className = '';
	var clsnm = elem.className;
	if (addClass && !clsnm.match(RegExp("\\b"+addClass+"\\b"))) clsnm = clsnm.replace(/(\S$)/,'$1 ')+addClass;
	if (remClass) clsnm = clsnm.replace(RegExp("(\\s*\\b"+remClass+"\\b(\\s*))*","g"),'$2');
	elem.className=clsnm;
	}

function showError(str) {
if (window.opera) opera.postError('|'+str+'|');
else alert('|'+str+'|');
}

Discussione: animazioni java, anomalie in IE6-IE7

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

animazioni java, anomalie in IE6-IE7

Permessi di invio