Problema con div in IE

giovedì 18 gennaio 2007 - 11.04

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

poldo000 Profilo | Newbie

5 messaggi | Data Invio: gio 18 gen 2007 - 11:04

Ciao a tutti!!
Mi sto battendo con un problema di visualizzazione.
Posto una parte del codice, cmq funzionante.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function radio_click()
{

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i ++ )
{
divs[i].style.visibility = "hidden";
divs[i].style.top = "-1000px";
divs[i].style.position = "absolute";
// alert("Fine");
}

if (document.getElementById('text_radio').checked)
{

document.getElementById('sin_text_lev').style.visi bility = "visible";
document.getElementById('sin_text_lev').style.top = "0px";
document.getElementById('sin_text_lev').style.posi tion = "relative";
return;
}

if (document.getElementById('file_radio').checked)
{
document.getElementById('mul_file_lev').style.top = "0px";
document.getElementById('mul_file_lev').style.posi tion = "relative";
document.getElementById('mul_file_lev').style.visi bility = "visible";
return;
}

if (document.getElementById('bool_radio').checked)
{

document.getElementById('bool_lev').style.top = "0px";
document.getElementById('bool_lev').style.position = "relative";
document.getElementById('bool_lev').style.visibili ty = "visible";
return;
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="xaaa">
<table width="900" border="1" style="width: 900px; height: 100px; background-color: antiquewhite;">
<tr>
<td>
<label>
<input type="radio" name="arg_type" value="text" id="text_radio" onClick="radio_click()" checked="checked"/>
text</label>
<br>
<label>
<input type="radio" name="arg_type" value="file" id="file_radio" onClick="radio_click()">
file</label>
<br>
<label>
<input type="radio" name="arg_type" value="boolean" id="bool_radio" onClick="radio_click()">
boolean</label>
<br></td>
<td>
<div id="sin_text_lev" style="position:relative; z-index:1; top: 0px; visibility: visible;">
<p align="center">Default Value</p>
<p align="center"><input type="text" name="textfield3" id="sin_text" style=""></p>
</div>

<div id="mul_file_lev" style="position:absolute; z-index:1; top: -1000px; visibility: hidden;">
<p align="center">Default Value</p>
<p align="center">
<input type="text" name="textfield2" id="mul_text"></p>
<p align="center">
<input name="Add" type="button" id="Add1" value="+" onClick="add_res('mul_text')">
</p>
<p align="center">
<textarea name="textarea" id="mul_text_area"></textarea>
</p>
<br>
</div>

<div id="bool_lev" style="position:absolute; top: -1000px; z-index:1; visibility: hidden;">
<p align="center">Default Value</p>
<p align="center">
<input type="file" name="file" id="mul_file"></p>
<p align="center">
<input name="Add" type="button" id="Add2" value="+" onClick="add_res('mul_file')" align="middle">
</p>
<p align="center">
<textarea name="textarea2" id="mul_file_area"></textarea>
</p>
</div></td>
</form>
</body>

</html>

Con Firefox nessun problema.
Con Internet Explorer, invece, scompaiono le caselle di input. E la cosa strana è ke, invece, le label rimangono correttamente al loro posto!!!!!!
Il prob è in quel

divs[i].style.position = "absolute";

nella funzione. Sembra ke gli "input" ereditino quel valore e poi nn c'è modo di farlo tornare relative!
E allora, perchè nn levarlo? Provate a commentarlo e vedete ke succede (sia con Firefox, sia con IE)!
AIUTOOO!!
Grazie lo stesso,cmq!!

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: gio 18 gen 2007 - 11:18

>nella funzione. Sembra ke gli "input" ereditino quel valore e
>poi nn c'è modo di farlo tornare relative!
>E allora, perchè nn levarlo? Provate a commentarlo e vedete ke
>succede (sia con Firefox, sia con IE)!

Quello che stai facendo è un po' strano.
Se non sbaglio sposti i div a posizione -1000px per spostarli fuori dallo schermo ?

Assurdo!

E' sufficiente che fai 3 div così:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

li metti tutti con visibilità hidden, non tocchi il positioning, quindi rimuovi tutti i riferimenti ad absolute, relative e quant'altro, e poi gestisci il click cambiando solamente lo stile css della visibilità, visible o hidden.

In genere io uso lo stile CSS display:none per fare queste cose.
Tra parentesi il tuo codice non va neanche su Opera.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

poldo000 Profilo | Newbie

5 messaggi | Data Invio: gio 18 gen 2007 - 11:45

MA SEI UN GRANDE!
Supponevo ke la proprietà display e visibility avessero pressokè lo stesso comportamento.
Ed ero costretto a sparare i div invisibili in alto xkè altrimenti, anke se invisibili, occupavano spazio e mi si allungava la colonna della tabella!!
E' bastato mettere display:none o block e tutto funzia!
Grazie!

Giakkè mi trovo, e ke 6 stato così gentile e solerte a rispordermi, ti vorrei fare un'altra domanda

Vorrei sapere che differenza c'è tra la funzione load con oggetti DOM (activeX o "document.implementation.createDocument") e la open di ajax, successiva alla XMLhttprequest. Il mio obiettivo è caricare un file xml (e xsl relativo) garantendo la compatibilità sui diversi browser.
Posso usare una qualsiasi di queste due? Ke cambia (in soldoni)?

GRAZIEEEEEE!!!

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: gio 18 gen 2007 - 11:54

>Posso usare una qualsiasi di queste due? Ke cambia (in soldoni)?

Allora XMLHttpRequest sta subendo un processodi standardizzazione sul W3, questo perchè come al solito ogni Browser a partire da IE la implementava a suo piacimento e poi le applicazioni andavano su uno e non sull'altro, qui trovi i riferimenti del working draft:
http://www.w3.org/TR/XMLHttpRequest/

Diciamo che il supporto è molto buono sui Browser più usati, IE, Firefox, ecc. In ogni caso su IE è sempre possibile utilizzare l'oggetto ActiveX. Leggiti questo post dove trovi un frammento di codice per utilizzare XmlHttpRequest, sia quello nuovo, nativo di IE7 e compatibile anche con altri browser, sia il vecchio ActiveX per IE6 e IE5.
http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx

Accetta la mia risposta con l'apposito link.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

poldo000 Profilo | Newbie

5 messaggi | Data Invio: gio 18 gen 2007 - 12:16

Quindi, x adesso, è meglio utilizzare la "load" che, a quanto ho capito, è supportata da tutti i browser, compreso IE fino al 6 e creare un oggetto active x o document.implementation.createDocument a senconda del browser (IE o non IE), visto ke la open funziona in maniera diversa a seconda dei browser.
O erro?

Brainkiller Profilo | Guru

7.999 messaggi | Data Invio: gio 18 gen 2007 - 14:00

>al 6 e creare un oggetto active x o document.implementation.createDocument
>a senconda del browser (IE o non IE), visto ke la open funziona
>in maniera diversa a seconda dei browser.

Io personalmente non ho mai usato document.implementation.createDocument, non so neanche esattamente come funziona. Non si tratta di Load o non Load ma quale oggetto utilizzare per fare chiamate remote, e in genere si dovrebbe utilizzare la nuova implementazione di XMLHttpRequest compatibile con tutti i Browser perchè si appoggia al Draft del W3 che ti ho indicato.

Il codice contenuto nell'altro Link ti dimostra come usare il supporto XMLHTTP sia per i browser recenti Firefox, Opera, IE7 sia per i vecchi IE6, IE5.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !