bypassare evento focus/blur

[TeraBIT]

ho aggiunto uno sfondo animato ai campi di un form mail, la parte di codice vitale per l'animazione è la seguente :

	classChange(document.getElementById('Cbig'),'scriptactive','noscript')
	var animElements = document.getElementById('Cbig').getElementsByTagName('textarea');
	for(var i=0; i<animElements.length; i++) {
		animElements[i].bgAnim = {
		iPos:[0,0],
		pUnit:['px','px'],
		cFrame:0,
		mFrame: 14,
		dPos:[0,-200],
		mSec:15
		}
		animElements[i].onfocus = backPosAnimF;
		animElements[i].onblur = backPosAnimR;
		}

tutto è andato a buon fine finchè non ho scoperto un'interessante feature di Explorer che interpreta male le istruzioni sul background di questi elementi, per cui se si verifica un overflow invece di restare fermo si scrolla anche il background, utilizzare l'attachment fixed peggiora solo le cose perchè l'immagine non si muove più in caso di ridimensionamento della pagina, ho eseguito quindi la soluzione proposta quì di inserire la textarea trasparente dentro un div che contiene lo sfondo per evitare il problema.

il trucco funziona, solo che il mio background deve animarsi quando riceve il focus dell'utente, ma la textarea, seppur trasparente, fà da scudo invisibile per il div sottostante di cui dovrebbe animarsi il background ricevendo il focus

Il codice sopra fà in modo che quando l'elemento specificato per l'animazione subisce un determinato evento questo attiva l'animazione sull'elemento stesso (animElements), ovvero cliccando(focus) sul div si attiva l'evento e l'animazione del background del div stesso.
Quello che mi serve (ma che non riesco proprio a ottenere) è bypassare il focus alla textarea e fare in modo che in quel momento si attivi l'animazione del background dell'elemento div e viceversa per il blur, ho provato come segue :

	classChange(document.getElementById('Cbig'),'scriptactive','noscript')
	var animElements = document.getElementById('Cbig').getElementsByTagName('div');
	for(var i=0; i<animElements.length; i++) {
		animElements[i].bgAnim = {
		iPos:[0,0],
		pUnit:['px','px'],
		cFrame:0,
		mFrame: 14,
		dPos:[0,-200],
		mSec:15
		}
		document.getElementsByTagName('textarea').onfocus.animElements[i] = backPosAnimF;
		document.getElementsByTagName('textarea').onblur.animElements[i] = backPosAnimR;
		}

e anche altre combinazioni ma niente...
la pagina incriminata si trova quì

[TeraBIT]

help...

[TeraBIT]

è più difficile di quello che credo, il codice java che ho messo non è sufficiente e serve che metto anche il resto per meglio "contestualizzarlo" oppure ho formulato male la domanda?

datemi un segno di vita, stò provando tutte le combinazioni ma non riesco ad associare quell'evento al tag textarea e successivamente l'animazione al div(animElements[i])...

[artorius]

Ma scusa, sto leggendo il tuo codice, ma mi sembra che tu non abbia le idee molto chiare: onFocus ed onBlur sono eventi applicabili solo ai form element, se lo applichi ad un div, non viene semplicemente mai lanciato, dato che un div non ha il focus... Devi applicare l'evento al textarea, facendo applicare l'effetto al div sottostante.

[TeraBIT]

Originariamente inviato da artorius
Devi applicare l'evento al textarea, facendo applicare l'effetto al div sottostante.

è quello che ho (confusamente) chiesto all'inizio, come scrivere correttamente l'istruzione in modo da applicare l'evento alla textarea e successivamente che tale evento faccia partire l'animazione del div, purtroppo non ci riesco...

riguardo al focus/blur, ho volutamente lasciato la textarea più piccola del div il modo che quest'ultimo sia cliccabile, con firefox non funziona ma se visiti la pagina con explorer 6/7 cliccando sul div l'animazione parte (interessante ma non mi serve), dev'essere un'altra "feature" di explorer...

[artorius]

beh, prova a fare:

var animElements = document.getElementById('Cbig').getElementsByTagNa me('textarea');

...
animElements[i].bgAnim = {
iPos:[0,0],
pUnit:['px','px'],
cFrame:0,
mFrame: 14,
dPos:[0,-200],
mSec:15
}
animElements[i].onfocus = backPosAnimFtextarea;
animElements[i].onblur = backPosAnimRtextarea;

immagino vedi che ho usato funzioni diverse, ma il motivo è che devi riscriverle in modo che l'effetto non vada applicato sul elemento this, ma su this.parentNode.

[TeraBIT]

questo è il codice per intero

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('Cbig'),'scriptactive','noscript')
	var animElements = document.getElementById('Cbig').getElementsByTagName('div');
	for(var i=0; i<animElements.length; i++) {
		animElements[i].bgAnim = {
		iPos:[0,0],
		pUnit:['px','px'],
		cFrame:0,
		mFrame: 14,
		dPos:[0,-200],
		mSec:15
		}
		animElements[i].onfocus = backPosAnimF;
		animElements[i].onblur = 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+'|');
}

come ho già spiegato all'inizio non posso usare il background della textarea per il problema dello scroll in caso di overflow di explorer

       animElements[i].onfocus = backPosAnimF;

questa stringa fà in modo che il tag che gli viene assegnato (animElements) subisca l'evento(onfocus) e allo stesso tempo gli viene applicata l'animazione al background (= backPosAnimF;).

ho bisogno di mantenere l'attachment della funzione al tag specificato in animElements(nel mio caso il div), ma di associare l'evento focus/blur alla textarea per questo ho provato combinazioni tipo la seguente ma senza risultato

document.getElementsByTagName('textarea').onfocus.animElements[i] = backPosAnimF;

vorrei quindi cambiare solo il tag che subisce l'evento senza toccare altro dato che tutto è contcatenato in modo abbastanza preciso...o non è fattibile?

[artorius]

no... tu non hai capito come funge la cosa...

Dunque, quando associ ad un Element una funzione ad uno dei suoi eventi (onfocus, onblur, onchange, etc) nel momento in cui la catena di propagazione dell'evento (dall'elemento chiamante, dove si verifica, passado di padre in padre fino al window) arriva a quell'elemento la funzione viene lanciata.

Ora, gli eventi onBlur e onFocus non si propagano ai Div, è questo il tuo problema.

Non puoi associare l'evento al div, devi associarlo al textarea, e la funzione deve applicare l'effetto al div.

Un'ultima cosa:

document.getElementsByTagName('textarea').onfocus. animElements[i] = backPosAnimF;

Non ha senso:

getElementsByTagName torna un array non un elemento, inoltre un evento (come onfocus) non ha sotto elementi.

[TeraBIT]

Originariamente inviato da TeraBIT
quando associ ad un Element una funzione ad uno dei suoi eventi (onfocus, onblur, onchange, etc) nel momento in cui la catena di propagazione dell'evento (dall'elemento chiamante, dove si verifica, passado di padre in padre fino al window) arriva a quell'elemento la funzione viene lanciata.
[...]
Non puoi associare l'evento al div, devi associarlo al textarea, e la funzione deve applicare l'effetto al div.

credo di aver afferrato meglio...devo per forza mettere come tag nella funzione textarea, in questo modo l'evento può partire...ma come faccio a fare in modo che invece di animare il background della textarea si animi il div sottostante?

alcuni dei valori presenti in queste istruzioni vengono "richiamati" nella funzione associata all'evento, preceduti da vari "this", presumo che questa funzione si occupi di passare i valori inseriti per l'animazione dell'elemento al motore vero e proprio del'animazione (doBackPosAnim)

[...]
		animElements[i].bgAnim = {
		iPos:[0,0],
		pUnit:['px','px'],
		cFrame:0,
		mFrame: 14,
		dPos:[0,-200],
		mSec:15
		}
[...]
	function backPosAnimF() {
		doBackPosAnim(this,this.bgAnim,this.bgAnim.cFrame, this.bgAnim.mFrame);
	}

l'animazione viene richiamata per il tag specificato in animElements, cioè la textarea(altrimenti l'azione non parte)...dovrei quindi sostituire manualmente il tag richiamato per l'elemento da animare nella funzione dopo e tutto filerebbe liscio...? una cosa tipo :

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

l'ho buttata lì, non capisco se i "this" richiamano gli elementi sequenzialmente o se si riferiscono tutti ad animElement (ovvero la textarea) o se fungono in altro modo(tipo ciascuno fà da ponte per i rispettivi valori e non possono essere sostituiti con delle costanti),però la variabile animElements contiene due valori, l'id cui fà riferimento l'oggetto che contiene gli elementi da animare (Cbig) e poi il tag (textarea)...sento che mi sfugge qualcosa...

[TeraBIT]

non và, firebug dice che "div" non è definito...