Newsgroup: it.comp.lang.javascript
Titolo: Posizione di un div: Z-Index

Ciao a tutti!
Ho fatto una div che compare per mostrare un calendario, ma quando va a
comparire sopra delle <select>, le select risultano in primo piano rispetto
alla div, questa e' la riga della div
<div id="idCalendario" name="idCalendario"
style="Display:none;Position:Absolute;Z-Index:900"
onMouseMove="javascript:MantieniCalendario();"
onMouseOut="JavaScript:NascondiCalendario();"></div>
Come posso fare?
Ciao ;^)=
-- 
RedFoxy
A fox around web
Power at fox for a yiffing world!
Un forum per tutte le esigenze: 
http://forum.redfoxy.it

 Come posso fare?
Non puoi....sorry :-(
-- 
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"
B.M. -- 

 Non puoi....sorry :-(
Ma porc!!!
E' orrendo l'effetto!!!


 E' orrendo l'effetto!!!
Eggià...stesso problema per i menù; sto giusto sviluppando una intranet dove
mi hanno espressamente chiesto di avere i menù "stile windows"; subito sotto
al menù c'è una bellissima select => sto vedendo di posizionare in qualche
modo il menù in modo che NON vada sopra la select (altrimenti anziché andare
sopra andrà sotto e le voci sovrapposte non potranno essere premute)


 voci sovrapposte non potranno essere premute)
Sapevo di questo problema ma non mi ero mai messo alla ricerca di una
soluzione, spostavo solo le select... Solo che ora non posso!
E' assurdo... ma perche' poi?


 E' assurdo... ma perche' poi?
Sul perché ti rimando a questo link (che cerca anche di proporre soluzioni):
http://notnull.org/docs/windowedvswindowless.htm
Ricordati che anche iframe ha lo stesso "problema" (risolto con IE>=5.5, ma
in internet non penso si possa escludere IE 5.0...)


 
Prova cosi: metti la select in un div, e via javascript, quando hai 
bisogno di visualizzare il calendario setti il div che contiene <select> 
con width:0 e height:0, nonché overflow:hidden.
Dovrebbe funzionare, ma non l'ho ancora testato.
Ciao
-- 
Spoken: How much is that gorilla in the window?
Take our advice, At any price, A gorilla like Magilla is mighty nice.
Gorilla, Magilla Gorilla for sale

 in internet non penso si possa escludere IE 5.0...)
In fondo comunque non e' un lavoraccio riscriversi il controllo select 
da zero, sempre che il sito si basi gia' su javascript per altre cose.

 da zero, sempre che il sito si basi gia' su javascript per altre cose.
Interessante...in che senso?
Riscriverlo con componente esterno o intendi riscriverlo con javascript?


 Riscriverlo con componente esterno o intendi riscriverlo con javascript?
No no, assolutamente senza componenti esterni: javascript+dthml.
E' piuttosto semplice.

 E' piuttosto semplice.
Dici?
A me vengono in mente alcune soluzioni, ma tutte richiedono un po' di
lavoro...
Comunque non ci avevo mai pensato, mi sa che ci penserň per la select sotto
il menů di cui parlavo
grazie (magari quando fatto posto il risultato)


 Dovrebbe funzionare, ma non l'ho ancora testato.
Funzia, almeno con IE6:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html>
     <head>
     <title>Prova</title>
     <script>
         function provina() {
             document.getElementById('f1').style.width=0;
             document.getElementById('f1').style.height=0;
             document.getElementById('f1').style.overflow='hidden';
             document.getElementById('d1').style.display='block';
         }
         function reverse() {
             document.getElementById('f1').style.width='100%';
             document.getElementById('f1').style.height='100%';
             document.getElementById('f1').style.overflow='auto';
             document.getElementById('d1').style.display='none';
         }
     </script>
     </head>
     <body>
         <form id="f1" action="" method="post" style="width: 100%; 
height:100%; overflow: auto;"  >
             <select name="s1">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
                 <option>4</option>
             </select>
         </form>
         <div id="d1" style="position: absolute; top: 0; height: 100px; 
width: 100px; background: teal; display:none" 
onmouseout="reverse()">Ciao</div>
         <a href="#" onclick="provina();" >clicca!</a>
     </body>
</html>


 lavoro...
Se ragioni a oggetti sono sicuro che lo troverai semplice.
Come punto di partenza potresti replicare il controllo esistente: un 
oggetto select che ha una proprieta' che contiene un array di options, ecc.

 Magilla il gorilla lilla wrote:
Si ma considera che questa e' una "presa in giro" perche' sai dove sono gli
oggetti e dove va a finire il DIV, nel mio caso non si sa' e la stessa
funzione e' inclusa nelle varie pagine non e' in una sola specifica, percio'
deve essere totalmente libera non con dipendenze nella pagina... :|


 options, ecc.
Non ci sto' capendo una mazza... Come intenderesti fare il tutto?


 Non ci sto' capendo una mazza... Come intenderesti fare il tutto?
Neanch'io... :-/
Non so come lo farei ma dovrei ragionarci un bel po'...Quello che dice lo
Scarta (così lo chiama qualcun altro, se ben ricordo :-) ) non lo
capisco...se devo emulare un controllo select non posso partire dal
controllo select (a meno ovviamente di fare un qualcosa di completamente
diverso ma che dà lo stesso risultato....)
Così al volo avrei pensato a una textbox, un'immaginetta accanto, un div con
scroll che compare sotto onclick dell'immagine.
Sarebbe bello un bel Control MySelect : select {...}, ma javascript non ci è
ancora arrivato (che io sappia)!


 Non ci sto' capendo una mazza... Come intenderesti fare il tutto?
Non ho tempo ora di mettere giu' un po' di codice quindi provo a rendere 
l'idea a parole (ho detto che e' semplice, ma presupponendo una discreta 
conoscenza di js+dhtml).
Prepari un campo hidden nel tuo form per contenere il valore della select.
Per maggiori comodita' di gestione potresti creare un paio di oggetti in 
javascript (uno per rappresentare la select e uno per l'oggetto option) 
magari replicando il piu' possibile la struttura degli oggetti esistenti.
Questo, mi ripeto, per comodita' e possibilita' di riutilizzo; 
altrimenti potresti anche scrivere tutto nel codice html.
Rimanendo in questo esempio avrai un metodo "write" che generera' 
dell'html nella pagina.
Questo codice html potrebbe essere una lista che deve reagire a degli 
eventi: un click sulla "freccia" fara' comparire la tendina degli 
elementi, un click sull'elemento valorizzera' il campo hidden del form e 
nascondera' la tendina.
Ho reso l'idea?

 Ho reso l'idea?
Piů o meno sě...
Prossimamente (=prossime settimane) mi sa che ci lavorerň...


 da zero, sempre che il sito si basi gia' su javascript per altre cose.
All'epoca lo feci, ricordi? Anche se non era niente di che, e troppo basato
su JS. Adesso sicuramente cambierei approccio.
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 No no, assolutamente senza componenti esterni: javascript+dthml.
LOL. Sarebbe come dire Nutella+Pane e Nutella. :)
Con DHTML s'intende la trinita' JS/HTML/CSS.. ne fa gia' parte.
E cmq io non lo farei tanto in questo modo, attualmente.


 lavoro...
Sono due cose diverse. Anche una cosa concettualmente semplice necessita
del suo tempo di sviluppo.


 ancora arrivato (che io sappia)!
A livello di codice si che ci e' arrivato, l'ereditarieta' esiste anche
tramite i prototype. Se con questo intendi estendere GUI, no, il discorso
e' ben diverso e Javascript c'entra relativamente il giusto (e' un
linguaggio di scripting). Inoltre IE non rende pubblici i prototipi degli
elementi HTML (cosa che Gecko fa).


 magari replicando il piu' possibile la struttura degli oggetti esistenti.
Inutile. Se proprio uno deve utilizzare questo genere di cose, direi di
mantenere il controllo select a livello di markup. Cosi' non scombini il
codice, ed hai tutti gli elementi che ti servono.
Fai in modo di "sostituirlo" solo alla fine, con il tuo oggetto che ne
eredita anche le proprieta'. In questo modo diventa anche retro
compatibile, laddove possibile, ed il codice di markup non diventa
un'accozzaglia di campi hidden e/o specifici.


 magari replicando il piu' possibile la struttura degli oggetti esistenti.
E' una FAQ, e come ti e' gia' stato risposto, non puoi. In quanto "select"
e' un oggetto "window" e non "windowless", e quindi ha priorita'
sull'ordine di repainting, su oggetti *windowless*.
Se e' una intranet IE/Win-based, usa il metodo createPopup() dell'oggetto
window, invece di usare un DIV, per il tuo menu'. Gli oggetti creati in
questo modo sono utilissimi per creare elementi tipo menu dropdown,
tooltip, etc, in quanto non vengono sovrapposti da elementi "window" e
possono anche "uscire" dalla pagina.
Di contro, sono un po' pesanti in termini di risorse, a mio avviso.
Per quanto riguarda un sito web, ho notato che la mia versione di Firefox
su WinXP non ha problemi a riguardo. Un div la copre senza problemi.


> Come posso fare?
Assodato che agire su zIndex non serve a niente, secondo me l'unico modo
che hai e' quello di far sparire la select (inserita in un div come piu'
o meno ti e' stato gia' detto...) o semplicemente agendo su se stessa:
quindi dopo aver preso il riferimento alla select, cambi il suo
style.visibility o style.display....


Non posso farlo perche' la DIV non e' detto che compaia sempre su quella
select ed inoltre la div in questione (un calendario per scegliere la data)
viene incluso (il codice e simili) nelle varie pagine che ne necessitano e
richiamato dalla pagina html... Percio' non so' mai dove andra' a finire


 un'accozzaglia di campi hidden e/o specifici.
L'accozzaglia non ce la vedevo, ma la retrocompatibilita' e' 
fondamentale: decisamente meglio "portarselo dentro" alla fine.

 su JS. Adesso sicuramente cambierei approccio.
Gia'. Un "submenu selector" per il sito di Alberto, vero?

 Gia'. Un "submenu selector" per il sito di Alberto, vero?
Si, una cosa che se rivedo adesso rigurgito il pranzo che ancora non ho
fatto; ma del resto e' servito anche quello per costruirmi la conoscenza
che ho adesso.
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Tutti quelli che credono nella psicocinesi, per favore alzino la mia mano.