problema visualizzazione campo select e div a comparsa

**tntgiallo** · 21-09-2006, 11:50

ho generato con un javascrip che sull'evento del mouse su un icona compaia un div, con all'interno delle spiegazioni, per creare un tooltips piu completo, mi ritrovo pero che sotto essendoci un campo input di tipo select, questo campo non viene nascosto dal div, ma rimane in primo piano creando un effetto sbagliato, e rendendo impossibile la lettura del testo, ho letto alcune soluzioni, manon ne ho trovata una buona, chi mi sa aiutare??
grazie

metto un esempio:

<html><head><title>Esempio</title></head><body>

<script type="text/Javascript">

</script>

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background-color: green; z-index: 1;" onMouseOver="Mostra();" onMouseOut="Nascondi();"><font style="color: white; font-weight: bold;">Passa il mouse qui sopra</font></div>

<div style="position: absolute; top: 40px; left: 180px; width: 60px; height: 50px; visibility: visible; z-index: 2; background-color: #CCFF00 ; "><font style="font-weight: bold;">z-index:2
<select style="visibility: visible;" id="tendina"><option>Questo elemento</option><option>ha z-index:2</option><option>e questa volta</option><option>finisce sotto</option></select></font></div>

<div id="secondoDiv" style="position: absolute; top: 10px; left: 150px; width: 200px; height: 200px; background-color: red; visibility: hidden; z-index: 3;"><font style="color: white; font-weight: bold;">Secondo div (z-index:3)</font></div>

</body></html>

**serialkiller** · 21-09-2006, 12:37

lascia perdere gli z-index

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio</title>

<style type="text/css">
#firstDiv {
position: absolute;
top: 40px;
left: 180px;
height: 50px;
visibility: visible;
background-color: #CCFF00;
font-weight:bold;
}

#secondoDiv {
position: absolute;
top: 10px;
left: 150px;
width: 200px;
height: 200px;
background-color: red;
visibility: hidden;
font-weight:bold;
}

#controlDiv {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: green;
font-weight:bold;
}
</style>

<script type="text/Javascript">
<!--

function Mostra() {
document.getElementById("secondoDiv").style.visibility="visible";
document.getElementById("firstDiv").style.visibility="hidden";
}

function Nascondi() {
document.getElementById("secondoDiv").style.visibility="hidden";
document.getElementById("firstDiv").style.visibility="visible";
}

//-->
</script>

</head><body>

<div id="controlDiv" onmouseover="Mostra();" onmouseout="Nascondi();">

Passa il mouse qui sopra</p></div>

<div id="firstDiv">


a</p>
<form id="pippo" action="" method="post" enctype="multipart/form-data">
<select id="tendina">
<option>Questo elemento</option>
<option>ha z-index:2</option>
<option>e questa volta</option>
<option>finisce sotto</option>
</select>
</form>

</div>

<div id="secondoDiv">

Secondo div</p></div>

</body></html>

formatta i testi con i css e non con <font .....

**nuky** · 21-09-2006, 12:45

Soluzione che permette di nascondere il campo select anche solo in parte:
http://forum.html.it/forum/showthrea...hreadid=565700

**tntgiallo** · 21-09-2006, 15:07

non é che si é risolto molto in quella discussione, dicmao che alla fine si é morta con degli isoluti

**nuky** · 21-09-2006, 15:17

Originariamente inviato da tntgiallo
non é che si é risolto molto in quella discussione, dicmao che alla fine si é morta con degli isoluti

Quanto postato inizialmente mi è sembrato ok (almeno su IE).
E' comunque una soluzione un po' delicata, l'alternativa è quella di sostituire le select con oggetti dal layout simile, ma composti da div. Non è semplicissimo, ma si può fare. Credo che in giro per la rete ci sia qualcosa già fatto in questo senso.

**serialkiller** · 21-09-2006, 15:29

Originariamente inviato da tntgiallo
non é che si é risolto molto in quella discussione, dicmao che alla fine si é morta con degli isoluti

domanda :

dando per scontato che sappiamo che IE z-index non lo digerise al meglio, la soluzione che ti ho postato prima, perfettamente funzionante, cos'ha che non va ?

hai particolari esigenze che mi sfuggono da dover forzatamente basarti sui livelli z-index ?

dove sta la differenza tra sovrapporre e sostituire in questo caso ?

anzi c'è...nel problema da te riscontrato, quindi non capisco perchè non ti vada bene, spiegati.

**nuky** · 21-09-2006, 15:39

Originariamente inviato da serialkiller
domanda :

dando per scontato che sappiamo che IE z-index non lo digerise al meglio, la soluzione che ti ho postato prima, perfettamente funzionante, cos'ha che non va ?

hai particolari esigenze che mi sfuggono da dover forzatamente basarti sui livelli z-index ?

dove sta la differenza tra sovrapporre e sostituire in questo caso ?

anzi c'è...nel problema da te riscontrato, quindi non capisco perchè non ti vada bene, spiegati.

Credo che quanto postato da tntgiallo fosse solo un esempio per dimostrare che non riesce a sovrapporre un div a una select. Altrimenti avrebbe accettato senza esitare la tua soluzione.

**serialkiller** · 21-09-2006, 15:45

Originariamente inviato da nuky
Credo che quanto postato da tntgiallo fosse solo un esempio per dimostrare che non riesce a sovrapporre un div a una select. Altrimenti avrebbe accettato senza esitare la tua soluzione.

giusto per capire, mi sembrava che l'utilità fosse quella di mostrare una sorta di tooltip se l'esigenza è diversa allora niente

**tntgiallo** · 21-09-2006, 16:33

il problema che con l'esempio fatto tu lavori avendo sotto controllo tutte le select della pagina e conoscendo misure e contenuti, mentre nel mio caso devo creare un oggetto generico che va inserito in un contesto di portare con livelli diversi di oggetti,e con oggetti di cui non ho il controllo, e se anche l'avessi sarebbe estremamente pericoloso cambiarne gli stati o lavorarci sopra.

il codice poi é stato formattato con il font, e non con uno stile esterno perche ho preso il primo esempio che ho trovato in giro.

grazie

**serialkiller** · 21-09-2006, 16:40

Originariamente inviato da tntgiallo
il problema che con l'esempio fatto tu lavori avendo sotto controllo tutte le select della pagina e conoscendo misure e contenuti, mentre nel mio caso devo creare un oggetto generico che va inserito in un contesto di portare con livelli diversi di oggetti,e con oggetti di cui non ho il controllo, e se anche l'avessi sarebbe estremamente pericoloso cambiarne gli stati o lavorarci sopra.

sinceramente non ho capito quasi nulla

se il roblema è il nome id dell'oggetto da rendere visibile basta passarlo alla funzione javascript, ma ripeto, non sono sicuro di aver capito.

Discussione: problema visualizzazione campo select e div a comparsa

Strumenti discussione

Ricerca discussione

Visualizza

problema visualizzazione campo select e div a comparsa

Permessi di invio