Newsgroup: it.comp.lang.javascript
Titolo: auto hide layers

ciao, sono nuovo, scrivo per chiedere un aiuto abbastanza urgente. ho
cercato su Google in velocità ma non ho trovato niente che facesse al caso
mio.
Il problema è questo, ho un classico menù orizzontale che mi fa apparire dei
livelli, il problema è che il cliente vuole che questi livelli spariscano
appena uno esce col mouse da qualsiasi parte. Ho provato il famoso
auto-hide-layers di PVII (
www.projectseven.com
) ma non vuole saperne di
fungere su mozilla/netscape.
Voi avete qualche soluzione? Deve essere compatibile anche su Mac.
ciao e grazie.

 
www.html.it
www.programmazione.it
www.devspy.com
http://javascript.internet.com/
http://www.planetsourcecode.com/vb/default.asp?lngWId=2
http://www.webmasterpoint.org/home.asp
-- 
Posted via Mailgate.ORG Server - 
http://www.Mailgate.ORG

 
http://www.webmasterpoint.org/home.asp
Ho cercato e trovato molti esempi, ne sto analizzando uno scaricato da
jsdir.com
, il problema è che in tutti i casi il codice genera sia il menù
stesso che le tendine, io invece ho già entrambe le cose. Il menù è fatto di
immagini e le tendine sono HTML dentro livelli e non si può cambiare nulla.
Io voglio solo che ste benedette spariscano onMouseOut ma per me, essendo un
grafico, è troppo difficile estrapolare la parte di codice necessaria dalle
100 righe di quegli esempi... :(

 100 righe di quegli esempi... :(
eh
lo stesso problema che avrei Io se dovessi modificare i livelli di una
immagine.
Purtroppo senza una conoscenza minima del linguaggio è ben dura
cavarsela.


 Voi avete qualche soluzione? Deve essere compatibile anche su Mac.
Basta che non prendi in considerazione IE4.5 per Mac, pero'.
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 100 righe di quegli esempi... :(
Okay, se hai il codice della tua pagina on-line, e mi chiarifichi 
meglio il behavior che vuoi ottenere, vedo di darti una mano 
direttamente sul tuo codice.
Cosi' alla cieca e' un po' dura.


 cavarsela.
.. Ed io invece sono sia sviluppatore che grafico, tie' :P
Scherzi a parte, concordo con quanto dici. Per fare le cose, o ci si 
ritaglia un po' di tempo per imparare un minimo le basi necessarie a 
farle, oppure si fa fare a qualcuno che le sa fare..


 cavarsela.
sigh sob :(  ma se tu mi chiedessi un aiuto specifico su photoshop io te lo
darei ;) purtroppo, è brutto a dirsi nei ng, sto cercando la pappa pronta
perchè qua non abbiamo un programmatore fisso e cmq si occupa di cgi e
database....
niente niente?
grazie comunque.

 Cosi' alla cieca e' un po' dura.
Hai ragione, metto on-line una pagina di prova.... fatto:
www.gpesrl.com/ammin3.htm
 , le tendine appaiono dal menù orizzontale.
Nell'<head> le ultime due funzioni sono per il "famoso" auto-hide-layers di
PVII che però non è applicato in questa pagina. Per applicarlo loro
consigliano di scatenarlo onLoad sul body ma niente da fare su
netscape/mozilla. I menù spariscono toccando le immagini adiacenti col
classico script di Dreamweaver. Altre due considerazioni, nel livello che
compare c'è anche l'immagine stessa del bottone, questo per far sì che il
livello scompaia uscendo da ogni lato (ma so che non è il metodo migliore).
C'è anche un'altro script di PVII che serve a linkare la posizione dei DIV
alle immagini così che restino al posto giusto con qualsiasi risoluzione.
Spero di aver detto tutto.
grazie 1000.

 Spero di aver detto tutto.
Ho visto il sorgente.. cribbio che bordello ^_^"
.. Detesto DW anche per questo.. fosse per me, riscriverei tutte le 
funzioni exnovo.
BTW, te l'ho fatto funzionare, e' abbastanza semplice il concetto. Solo 
una domanda: Il tuo sito deve essere retrocompatibile? Ovvero deve 
contemplare anche Netscape 4.x? Perche' le funzioni che ti mette a 
disposizione DW lo contemplano, ma fatto girare su tale browser non 
funziona una cippa lippa.


 funziona una cippa lippa.
ok lasciamo perdere netscape 4.x! mi metti on-line la pagina corretta? cmq
il bordello nel codice è dovuto soprattutto al fatto che il cliente voleva
un cambiamento ogni mezz'ora e lo comunicava ai grafici (da stampa) che ci
hanno passato il lavoro i quali lo comunicavano a noi.... tremendo!
Intanto ti ringrazio enormemente!
ciao
Enrico.

 Intanto ti ringrazio enormemente!
Fallo dopo che hai visto se funziona :P
Allora, iniziamo. Mettiti comodo.
Ti avverto anche che non e' la soluzione ottimale, ma e' la piu' veloce 
che mi e' venuta in mente senza stravolgere troppo il codice che gia' 
c'e'.
Prima modifica da fare: Creazione di una funzione ad hoc per la 
visualizzazione dei menu', ci appoggeremo alle funzioni di DW per non 
stravolgerti troppo la cosa:
var currentMenu=null;
function setMenuVisible(id,e){
	if (currentMenu){
		currentMenu.style.visibility="hidden";
		currentMenu=null;
	}
	if (id && (pObj=MM_findObj(id))){
		currentMenu=pObj;
		currentMenu.style.visibility="visible";
	}
	if (e) e.cancelBubble=true;
}
La variabile globale "currentMenu" tiene traccia del menu attualmente 
"aperto" (ovvero visibile), dato che i menu si escludono a vicenda se 
ne puo' avere solo uno visualizzato per volta.
setMenuVisible prende come parametro l'id del layer e l'evento 
scatenato.
Verifica se esiste un menu' precedentemente aperto, in quel caso lo 
nasconde e distrugge il riferimento.
Poi passa a verificare se e' stato passato un id di un menu' da 
visualizzare, e se tale id esiste nel documento.
In quel caso setta il nuovo riferimento al menu' corrente e setta tale 
menu come visibile.
Come ultimo step, controlla se e' stato passato un evento. In quel caso 
ne interrompe la propagazione (quest'ultimo passaggio te lo spiego 
piu' avanti).
Come puoi vedere, quindi, se io chiamo setMenuVisible senza parametri, 
la funzione non fara' altro che nascondermi il menu' attualmente 
aperto, se c'e'.
Primo cambiamento all'HTML: cambiare nell'evento onMouseOver delle 
immagini la chiamata che rende visibile il layer.
In pratica, sostituire (per esempio):
MM_showHideLayers
('Layer3','','hide','Layer2','','hide','Layer1','','show');
Con
setMenuVisible('Layer1',event);
Come vedi e' anche piu' corto e leggibile :)
In questo modo abbiamo migliorato il codice, la performance ma il 
risultato e' sempre lo stesso. Come fare a nascondere quindi il menu in 
caso si esca dallo stesso e si vada da qualsiasi altra parte?
Basta aggiungere, al tag body questo semplice evento:
<body onmouseover="setMenuVisible()" ..etc..
e ai tag div che fanno da menu', il seguente:
<div id="Layer1" onmouseover="event.cancelBubble=true" ...etc..
E qui ci si ricollega alla propagazione degli eventi di cui prima. In 
sintesi, cosa dico di fare al browser?
Gli dico "quando il body o uno dei suoi elementi figli scatena un 
evento onmouseover, nascondi il menu currente, se c'e' ".
Ma questo da solo non basterebbe, perche' altrimenti non si vedrebbe 
MAI alcun menu'. :) In quanto gli elementi che ne scatenano la 
visibilita', sono a loro volta figli di body.
E qui entra in gioco la propagazione degli eventi.
Grazie al cancelBubble settato uguale a true, dico al browser che se 
quell'elemento cattura l'evento onmouseover (nel caso del div c'e' solo 
quell'istruzione, nel caso delle immagini l'istruzione e' acclusa nella 
funzione setMenuVisible() ) NON DEVE notificarlo agli elementi 
genitori.
In questo modo, quando passo sopra col mouse all'immagine e al menu' 
appena aperto, il body non ricevera' mai la notifica dell'avvenuto 
evento, e non tentera' di nascondere il menu' appena aperto.
In tutti gli altri casi, si. Ergo, appena esco dal menu', esso verra' 
chiuso.
