creare codice crossbrowser

**oronze** · 29-07-2003, 20:15

Potrebbe essere il titolo di una pillola ma non lo è (se mi gira però potrei crearla la pillola) cmq:

codice:

<html>
<head>
<style type="text/css">
Td.uno {
	text-align : center;
	color : #0099CC
	}
Td.due {
	text-align : center;
	text-decoration : none;
	color : #ffffff;
	} 
Td.tre {
	text-align : center;
	color : #FFFFFF;
	}
Td.quattro {
	text-align : center;
	color : #0099CC;
	filter:Alpha(Opacity=90, Style=3); 
	width=1px;
	}
</style>
</head>
<body bgcolor="#3c3c3c">
<script language="javascript" type="text/JavaScript">
function settalink(cosa1,stile1,cosa2,stile2,cosa3,stile3,cosa4,stile4) {
var recupera= (document.all) ? document.all : document.getElementById;
if (stile1=="tre") {
	recupera("id1").className='uno'; 
	recupera("id2").className='uno'; 
	recupera("id3").className='uno'; 
	recupera("id4").className='uno'; 
}
else if (stile2=="tre") {
	recupera("id1").className='uno'; 
	recupera("id2").className='uno'; 
	recupera("id3").className='uno'; 
	recupera("id4").className='uno'; 
}
else if (stile3=="tre") {
	recupera("id1").className='uno'; 
	recupera("id2").className='uno'; 
	recupera("id3").className='uno'; 
	recupera("id4").className='uno'; 
}
else if (stile4=="tre") {
	recupera("id1").className='uno'; 
	recupera("id2").className='uno'; 
	recupera("id3").className='uno'; 
	recupera("id4").className='uno'; 
}
if(recupera("id1").className!='tre') recupera("id1").className='uno'; 
if(recupera("id2").className!='tre') recupera("id2").className='uno'; 
if(recupera("id3").className!='tre') recupera("id3").className='uno'; 
if(recupera("id4").className!='tre') recupera("id4").className='uno'; 
if(recupera(cosa1).className!='tre') recupera(cosa1).className=stile1;
if(recupera(cosa2).className!='tre') recupera(cosa2).className=stile2; 
if(recupera(cosa3).className!='tre') recupera(cosa3).className=stile3; 
if(recupera(cosa4).className!='tre') recupera(cosa4).className=stile4;
}
</script>

<table border="0" cellpadding="0" cellspacing="0" height="-1">
<tr>
<a href="nuove.php" onFocus="this.blur();" target="iframe">
    <td nowrap="nowrap" name="id1" id="id1" class="uno" style="cursor:default" onClick="settalink('id1','tre','id2','uno','id3','uno','id4','uno');" onMouseOver="settalink('id1','due','id2','quattro','id3','quattro','id4','quattro')" onMouseOut="settalink('id1','uno','id2','uno','id3','uno','id4','uno')">
       <font face="Verdana" size="2">Ultime</font>
    </td>
</a>
<a href="storico.php" onFocus="this.blur();" target="iframe">
    <td nowrap="nowrap" name="id2" id="id2" class="uno" style="cursor:default" onClick="settalink('id1','uno','id2','tre','id3','uno','id4','uno');" onMouseOver="settalink('id1','quattro','id2','due','id3','quattro','id4','quattro')" onMouseOut="settalink('id1','uno','id2','uno','id3','uno','id4','uno')">
      <font face="Verdana" size="2">Storico</font>
    </td>
</a>
<a href="ricerca.php" onFocus="this.blur();" target="iframe">
    <td nowrap="nowrap" name="id3" id="id3" class="uno" style="cursor:default" onClick="settalink('id1','uno','id2','uno','id3','tre','id4','uno');" onMouseOver="settalink('id1','quattro','id2','quattro','id3','due','id4','quattro')" onMouseOut="settalink('id1','uno','id2','uno','id3','uno','id4','uno')">
      <font face="Verdana" size="2">Ricerca</font>
    </td>
</a>
<a href="javascript:apri('include/scrivici.php','scrivi')" onFocus="this.blur();" target="iframe">
    <td nowrap="nowrap" name="id4" id="id4" class="uno" style="cursor:default" onClick="settalink('id1','uno','id2','uno','id3','uno','id4','tre');" onMouseOver="settalink('id1','quattro','id2','quattro','id3','quattro','id4','due')" onMouseOut="settalink('id1','uno','id2','uno','id3','uno','id4','uno')">
      <font face="Verdana" size="2">Contattami</font>
    </td>
</a>
</tr>
</table>
</body>
</html>

Questo codice funziona benissimo su explorer6 e non capisco perchè non funziona su netscape6 (oltre a non funzionare mi fa anche bloccare il browser)
Pensavo fosse
filter:Alpha(Opacity=90, Style=3);
ma non cambia nulla, il browser si blocca e lo script non funziona!
Come faccio a farlo funzionare su netscape?
Mi spiegate anche il css compatibile con netscape di alfa? cioè, il filtro css da me usato su netscape non funziona. Esiste una versione compatibile per netscape? (spero di sì!)
GRAZIE A TUTTI!
P.S non per fare polemica ma pechè netscape 6 impiega un sacco di tempo per aprirsi (impiega molto meno explorer o opera [anche se impiega un po' più tempo di explorer])?

**Xinod** · 30-07-2003, 04:43

è qui l' errore
var recupera= (document.all) ? document.all : document.getElementById;

sostituiscilo con una funzione a parte
function recupera(name_ID) {
return (document.all)?document.all[name_ID]:(document.getElementById)?document.getElementById (name_ID):null
}

x il sostituto dell' alpha x Mozilla/NN7 esiste la MozOpacity,
se ricerchi nel forum con questa chiave dovrebbero saltar fuori un paio di esempi

cmq NN6 ha un po' di bug, meglio il 7 (lento cmq)
:ciauz:

**standard** · 30-07-2003, 09:09

Tutto giusto quello che dice Xinod, vorrei spendere due parole in più su:

Originariamente inviato da Xinod
è qui l' errore
var recupera= (document.all) ? document.all : document.getElementById;

sostituiscilo con una funzione a parte
function recupera(name_ID) {
return (document.all)?document.all[name_ID]: (document.getElementById)?document.getElementById( name_ID):null
}

Il problema è lo scoping.
Il codice scritto da oronze, usato per evitare di riscrivere continuamente lo stesso codice, può nascondere come in questo caso bug difficili da individuare (almeno le prime volte....soprattutto se si testa solo su Explorer).
Il problema, dicevo, riguarda lo scope delle funzioni chiamate, ovvero, il "contesto in cui i riferimenti usati dalle funzioni sono validi" (passatemi la definizione stringata

).
Nel dettaglio, con:

codice:

var recupera= (document.all) ? document.all : document.getElementById;

l'intenzione è quella di associare a "recupera" un puntatore a funzione (in maniera crossbrowser). Il problema è che la funzione non è una funzione globale, ma un metodo dell'oggetto document (nel quale metodo si possono avere riferimenti all'oggetto stesso).
Il codice sopra decontestualizza il metodo, ovvero fa sì che "recupera" sia uguale al puntatore a funzione cercato, ma il contesto (lo scope) in cui viene introdotto non è più quello corretto (cioè quello di document).
Per capirci meglio faccio un esempio:

codice:

Forum = {
        nome : "Scripting",
        avvisa : function(){alert("sei nel forum "+this.nome)}
}

supponiamo di voler chiamare il metodo "avvisa" all'onload. Quello che occorre fare è assegnare al gestore d'evento onload un puntatore alla funzione che vogliamo lanciare.
Se facessimo però:

codice:

onload = Forum.avvisa

avremo correttamente assegnato ad onload un puntatore a funzione, ma questa verrebbe decontestualizzata e portata nello scope di window e non di Forum.
Quello che occorre fare è quindi assegnare ad onload un puntatore a funzione che consenta di conservare correttamente lo scope del metodo:

codice:

onload = function(){Forum.avvisa();}

Ho usato la funzione anonima, ma potevo usare qualsiasi altra funzione contenitore, l'importante è che al suo interno faccia la chiamata utilizzando i giusti riferimenti.
In pratica questa funzione contenitore è la stessa usata da Xinod per il recupera che consente:
1) di risparmiare bytes da caricare, evitando di riscrivere ogni volta il codice crossbrowser.
2) di rendere il codice più leggibile
3) di effettuare la chiamata in maniera corretta

Va infine detto che oronze probabilmente non si è accorto dell'origine del problema perchè il suo codice probabilmente funziona su Explorer.
Essendo codice "nativo" la mia è una supposizione, ma credo che per Explorer sia "corretto", per il fatto che consente di accedere ad un qualsiasi elemento utilizzando una variabile che abbia come nome il valore dell'attributo ID. Questo dimostra un legame molto stretto tra lo scope di document.all e quello globale (di window).
Questa scelta di Explorer è proprio brutta a mio avviso e nasconde magagne come questa.

in sostanza occhio allo scoping e non testate le cose solo su Explorer.
ciauzz

**oronze** · 30-07-2003, 09:12

Io però il name_id lo setto dopo quindi se faccio la funzione così

codice:

function recupera() { 
return (document.all)?document.all:(document.getElementById)?document.getElementById:null 
}

dovrebbe funzionare?
ah, perchè si fa così il controllo e come lo avevo fatto io era errato?
Per richiamare la funzione bata fare
recupera['id del file'].altro
giusto?
Se non si richiama così, io ho la necessita di definire l'id dopo, si può rendere 1 variabile contenuta all'interno della funzione recupera globale?
GRAZIE 100000
P.S. perchè non si mettono d'accordo ie, moz, netscape, opera....e fanno i tag e stili uguali(infondo non cambia nulla)?

Ringrazio anche standard per la sua risposta!
Infatti io il codice lo stavo testando su vari browser
1)ie--tutto bene
2)nn--errore
3)op--risolvo prima l'errore di nn
e non potevo mai immaginare che lì ci fosse errore perchè ie non lo segnalava!

**standard** · 30-07-2003, 09:15

non ho capito le tue domande, ma leggiti il mio intervento precedente, spero ti risolva i dubbi.

ciauzz

**oronze** · 30-07-2003, 09:21

Il tuo intervento ha risolto un paio di dubbi ma me ne rimane 1
come la richiamo la funzione considerando che voglio fare così:
funzione_che_definisce_all_o_getelementbyid("id del td")
perchè se definisco nella funzione l'id mi si allungherebbe il codice di parecchio!
Grazie

**oronze** · 30-07-2003, 09:34

ho trovato un'esempio che hai fatto tu (preload)
filter:alpha(opacity=0);-moz-opacity:0;
nel css devo metterli così?

**standard** · 30-07-2003, 09:40

per la funzione usa quella che t'ha suggerito Xinod, o magari quella che abbiamo nella lib (

):

codice:

	/*********************************************************************************
	*
	*			funzione recEId (recupera Elemento Da Id)
	*
	* autore : William "standard" Verdolini - standard@wedev.it
	* versione : 0.1
	* data : 7/6/2003
	*
	* 
	* La funzione restituisce un riferimento ad un elemento
	* recuperato attraverso il suo attributo ID.
	*
	* Note: 
	* 1) Parola riservata alla libreria Wedev.
	*/

function recEId(aID){
	return document.all?document.all[aID]:document.getElementById?document.getElementById(aID):null;
}

che poi è praticamente la stessa di Xinod.

per l'opacità sì, devi fare così.
ma ti ricordo che l'opacità in mozilla non è stata implementata benissimo...rischi di far rallentare le animazioni (se ce ne hai).
ciauzzz

**oronze** · 30-07-2003, 09:44

k, ho capito che devo usare quella funzione ma io l'id devo settarlo dopo e non nella funzione, se noti come l'ho fatta io (sbagliando) la var che salvava document.all o document.getelementbyid riesci a interpetarmi (oggi sono dislessico, ho solo 4 ore di sonno [stupidi grilli])

**standard** · 30-07-2003, 09:50

io credo di averti capito, basta che usi una delle due funzioni che t'abbiamo proposto, il tuo codice può rimanere così come l'hai scritto poi, ad esempio se usi il "recupera" proposto Xinod, potrai sempre fare:

codice:

	recupera("id1").className='uno'; 
	recupera("id2").className='uno'; 
	recupera("id3").className='uno'; 
	recupera("id4").className='uno';

basta che definisci la funzione "recupera" (globale) ed elimini la tua var.
ciauzzz

Discussione: creare codice crossbrowser

Strumenti discussione

Ricerca discussione

Visualizza

creare codice crossbrowser

Re: creare codice crossbrowser

Permessi di invio